Sliding Menu

  1.  Create Android Application Project
  2.  In your activity_main.xml file, Add LinearLayout with following content

First Child of the linear layout is for menu. You can change the width of menu from layout weight of first child and second child, but sum of should be 1.

This one is for your main content and header
Add another child in RelativeLayout.

<android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="1.0" >

<android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight=".75"
         android:background="@android:color/black"
         android:gravity="center_horizontal"
         android:orientation="vertical" >

<android:id="@+id/lvMainMenu"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:cacheColorHint="@null"
         android:divider="@android:color/white"
         android:dividerHeight="2dp" />

<android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight=".25"
         android:background="#000000" />

a. add textview named tvHeader for Page Name. and add imageview named ivMenu for menu in header.

3. Create header.xml and menu_inflater.xml

b. add textview named tvMenuInflaterName in menu_inflater.

4. Create anim folder with view_to_left and view_to_right.xml.

These files are for moving menu to left and right. Add the following content in that files respectively.

a.

<android:duration="400"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:startOffset="0"
 android:toXDelta="+75%p" />

5. Open MainActivity.java and add the following content

a. variable declaration

private float MENU_WIDTH = .75f;
private boolean isMenuOpened = false; 
private ListView lvMainMenu; 
private ImageView ivMenu; 
private LinearLayout llMainContent; 
private MenuAdapter menuAdapter; 
private TextView tvHeader; 
private String[] nameArray = { "Dashboard", "My Profile", "Logout" }; 
private int[] imageArray = { R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher };

b. Add following content in onCreate method

setContentView(R.layout.activity_main); 
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); 
getWidgetReferences(); 
bindEventHandlers(); 
menuAdapter = new MenuAdapter(this, nameArray, imageArray); 
lvMainMenu.setAdapter(menuAdapter);
setContentView(R.layout.activity_main);

c. getWidgetReferences with following initialization

lvMainMenu = (ListView) findViewById(R.id.lvMainMenu); 
ivMenu = (ImageView) findViewById(R.id.ivMenu); 
llMainContent = (LinearLayout) findViewById(R.id.llMainContent); 
tvHeader = (TextView) findViewById(R.id.tvHeader); onDashboardClicked();

d. add below method for implementation of swipe left and right and other event handlers

private void bindEventHandlers() {
  ivMenu.setOnClickListener(this); 
  lvMainMenu.setOnItemClickListener(this); 
  
  lvMainMenu.setOnTouchListener(new OnSwipeTouchListener(MainActivity.this) 
   { 
     public void onSwipeTop() { 
   }
  public void onSwipeRight()
   { 
     openMenu();
   }
  public void onSwipeLeft() 
   { 
    closeMenu(); 
   } 
  public void onSwipeBottom()
   { 
   } 
  public boolean onTouch(View v, MotionEvent event)
   { 
     return gestureDetector.onTouchEvent(event); 
   } 
});
 llMainContent.setOnTouchListener(new OnSwipeTouchListener(MainActivity.this) 
  {
    public void onSwipeTop() 
   {
   }
  public void onSwipeRight() 
  { 
    openMenu(); 
  } 
 public void onSwipeLeft()
 {
   closeMenu();
 } 
 public void onSwipeBottom() 
  { 
  } 
public boolean onTouch(View v, MotionEvent event) 
{ 
  return gestureDetector.onTouchEvent(event); } });
 }
}


e. open menu and close menu and adjust view accordingly

private void bindEventHandlers()
 { 
   ivMenu.setOnClickListener(this); 
   lvMainMenu.setOnItemClickListener(this);
   lvMainMenu.setOnTouchListener(new OnSwipeTouchListener(MainActivity.this)
    { 
      public void onSwipeTop() 
       { 
       } 
      public void onSwipeRight()
       { 
        openMenu();
       } 
       public void onSwipeLeft()
        { 
         closeMenu();
        } 
       public void onSwipeBottom()
        {
        }
      public boolean onTouch(View v, MotionEvent event)
       {
         return gestureDetector.onTouchEvent(event);
       } }); 
       llMainContent.setOnTouchListener(new OnSwipeTouchListener(MainActivity.this) 
       { 
         public void onSwipeTop() 
         { 
         } 
        public void onSwipeRight()
        { 
           openMenu();
         } 
       public void onSwipeLeft()
        { 
            closeMenu(); 
        } 
       public void onSwipeBottom()
       { 
       } 
      public boolean onTouch(View v, MotionEvent event) 
       { 
         return gestureDetector.onTouchEvent(event); 
       } }); }

f. rest of the methods like onclick and onitemclick

@Override
    public void onClick(View v) {
        if (v == ivMenu) {
            if (!isMenuOpened) {
                openMenu();
            } else {
                closeMenu();
            }
        }
    }

    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        onCategoryClicked(position);
        tvHeader.setText(nameArray[position]);
        menuAdapter.notifyDataSetChanged();
    }

    private void onCategoryClicked(int position) {
        closeMenu();
        menuAdapter.setSelectedPosition(position);
        menuAdapter.notifyDataSetChanged();
        switch (position) {
        case 0:
            onDashboardClicked();
            break;
        case 1:
            onMyProfileClicked();
            break;
        case 2:
            finish();
            break;
        default:
            break;
        }
    }

    private void onDashboardClicked() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        MyFragment fragment = new MyFragment();
        fragmentTransaction.replace(R.id.llMain, fragment);
        fragmentTransaction.commit();
    }
 

    private void onMyProfileClicked() {
    }

 

 

a. MenuAdapter.java(Adapter)6. Add following class for Adapter and Listner and Fragment

public class MenuAdapter extends BaseAdapter {
    private Context mContext;
    private final String[] nameArray;
    private final int[] imageArray;
    private int position;
    public MenuAdapter(Context c, String[] web, int[] Imageid) {
        mContext = c;
        this.imageArray = Imageid;
        this.nameArray = web;
    }

    @Override
    public int getCount() {
        return nameArray.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        Holder holder;
        if (convertView == null) {
            holder = new Holder();
            convertView = inflater.inflate(R.layout.menu_inflater, null);
            holder.tvMenuInflaterName = (TextView) convertView.findViewById(R.id.tvMenuInflaterName);
            // holder.ivMenuInflateImage = (ImageView)
            // convertView.findViewById(R.id.ivMenuInflateImage);
            convertView.setTag(holder);
        } 
     else {
            holder = (Holder) convertView.getTag();
        }

        holder.tvMenuInflaterName.setText(nameArray[position]);
        holder.tvMenuInflaterName.setCompoundDrawablesWithIntrinsicBounds(imageArray[position], 0, 0, 0);
        holder.tvMenuInflaterName.setCompoundDrawablePadding(20);
        if (position == this.position) {
            convertView.setBackgroundColor(Color.parseColor("#33000000"));
        } else {
            convertView.setBackgroundColor(Color.TRANSPARENT);
        }
        return convertView;
    }

    private class Holder {
        TextView tvMenuInflaterName;
    }

    public void setSelectedPosition(int position) {
        this.position = position;
    }

}


b. MyFragment.java(Fragment)

public class MyFragment extends Fragment
 { 
    private View v; // use mActivity for access of getActivity() 
    private FragmentActivity mActivity; 

   @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
   { 
    v = inflater.inflate(R.layout.dashboard, container, false); 
    super.onCreateView(inflater, container, savedInstanceState);
    return v;
   } 
  
  @Override public void onAttach(Activity activity) 
  { 
   super.onAttach(activity); 
   mActivity = (FragmentActivity) activity; 
  } 

  @Override public void onDetach()
  { 
   super.onDetach(); mActivity = null;
   } 
}

 

c.OnSwipeTouchListener.java(Listener)

 

public abstract class OnSwipeTouchListener implements OnTouchListener {
    protected final GestureDetector gestureDetector;
    public OnSwipeTouchListener(Context ctx) {
        gestureDetector = new GestureDetector(ctx, new GestureListener());
    }
 
    private final class GestureListener extends SimpleOnGestureListener {
        private static final int SWIPE_THRESHOLD = 100;
        private static final int SWIPE_VELOCITY_THRESHOLD = 100;

        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                    }
                    result = true;
                } else if (Math.abs(diffY) > SWIPE_THRESHOLD
                        && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                    if (diffY > 0) {
                        onSwipeBottom();
                    } else {
                        onSwipeTop();
                    }
                }
                result = true;
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }

    public void onSwipeRight() {
    }

    public void onSwipeLeft() {
    }

    public void onSwipeTop() {
    }

    public void onSwipeBottom() {
    }

}

Let's Think together, Say Something !