Monday 13 May 2013

Android Sliding menu like facebook,gmail,google+,youtube

 Now a days most of the android application uses sliding menu. Many good apps like facebook, gmail,google+,youtube are using this type of menu.

To integrate sliding menu you need to use third party library. If you want to use actionbar in older version of android then sherlock library is also required.

Today I am going to explain how to use these library for sliding menu in your android application.

Output of the project is shown in below screenshot.






 You can download libraries and source code from following links.
      Sherlock Libraray
      Slidingmenu Library
      Project Source



activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Swipe left"
        android:textStyle="bold" />

</RelativeLayout>

menu.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/frag_menu"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        class="com.ketan.slidingexample.Menufragment" />

</RelativeLayout>

menulist.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:divider="#000"
        android:dividerHeight="1dp"
        android:entries="@array/marray" />

</RelativeLayout>

 MainActivity.java

package com.ketan.slidingexample;

import android.os.Bundle;
import android.widget.TextView;

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuItem;
import com.slidingmenu.lib.SlidingMenu;

public class MainActivity extends SherlockFragmentActivity implements Menufragment.MenuClickInterFace{
    SlidingMenu menu;
    TextView text;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        text=(TextView)findViewById(R.id.text);
        ActionBar ab = getSupportActionBar();
        ab.setHomeButtonEnabled(true);
        ab.setDisplayHomeAsUpEnabled(true);
        menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        menu.setMenu(R.layout.menu);
        menu.setSlidingEnabled(true);
       
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        menu.toggle();
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onListitemClick(String item) {
        // TODO Auto-generated method stub
        text.setText(item);
    }
}


MenuFragment.java

package com.ketan.slidingexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

import com.actionbarsherlock.app.SherlockFragment;

public class Menufragment extends SherlockFragment {
    ListView list;
    MenuClickInterFace mClick;

    interface MenuClickInterFace {
        void onListitemClick(String item);
    }

    @Override
    public void onAttach(Activity activity) {
        // TODO Auto-generated method stub
        super.onAttach(activity);
        mClick = (MenuClickInterFace) activity;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
        list = (ListView) getView().findViewById(R.id.list);
        list.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                String i=(String) arg0.getItemAtPosition(arg2);
                mClick.onListitemClick(i);
            }
        });
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View v = inflater.inflate(R.layout.menulist, container, false);
        return v;
    }

}




Again download libraries and source code from following links and Njoy!!!
      Sherlock Libraray
      Slidingmenu Library
      Project Source

23 comments:

  1. hey plz can u tell me how to add that slide menu to
    many fragments

    mail me plz

    waheed.anjam@gmail.com

    ReplyDelete
    Replies
    1. Hi Waheed
      What do you mean by many fragments ? Can you be more specific about you requirement please ?

      -Ketan

      Delete
    2. i want to call fragments from menu list ..and add that slide menu to that fragment which is called


      when i click in the menu item (india) directly call the fragment and in the fragment also show this slide menu



      i am really bored for searching such threads ..plz help me

      Delete
  2. I imported the project but I had an error, this is the logcat:
    Unable to resolve superclass of Landroid/support/v4/app/Watson; (86)
    Link of class 'Landroid/support/v4/app/Watson;' failed
    Unable to resolve superclass of Lcom/actionbarsherlock/app/SherlockFragmentActivity; (94)
    Link of class 'Lcom/actionbarsherlock/app/SherlockFragmentActivity;' failed
    Unable to resolve superclass of Lcom/ketan/slidingexample/MainActivity; (242)
    Link of class 'Lcom/ketan/slidingexample/MainActivity;' failed
    Shutting down VM
    thread exiting with uncaught exception (group=0x40018578)
    FATAL EXCEPTION: main
    java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.ketan.slidingexample/com.ketan.slidingexample.MainActivity}: java.lang.ClassNotFoundException: com.ketan.slidingexample.MainActivity in loader dalvik.system.PathClassLoader[/data/app/com.ketan.slidingexample-1.apk]
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1573)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1667)
    at android.app.ActivityThread.access$1500(ActivityThread.java:117)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:935)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:130)
    at android.app.ActivityThread.main(ActivityThread.java:3687)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:507)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:867)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:625)
    at dalvik.system.NativeStart.main(Native Method)
    Caused by: java.lang.ClassNotFoundException: com.ketan.slidingexample.MainActivity in loader dalvik.system.PathClassLoader[/data/app/com.ketan.slidingexample-1.apk]
    at dalvik.system.PathClassLoader.findClass(PathClassLoader.java:240)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:551)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
    at android.app.Instrumentation.newActivity(Instrumentation.java:1021)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1565)
    ... 11 more

    Could you please help me?? Thanks in advance

    ReplyDelete
    Replies
    1. If you have changed package name then make changes in activity name in manifest file.

      If you are running app in older version then change the theme like

      android:theme="@style/Theme.sherlock" in manifest file.

      -Ketan

      Delete
    2. By adding android:theme="@style/Theme.Sherlock" works perfect.
      Thanks a lot Ketan

      Delete
    3. tnks ketan awesome work

      Delete
  3. links are not working please update links.

    ReplyDelete
  4. Hi Mangesh thanks for letting me know.
    I have updated links now you can download files.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. 09-11 19:06:57.610: W/dalvikvm(4024): Unable to resolve superclass of Landroid/support/v4/app/Watson; (86)
    09-11 19:06:57.614: W/dalvikvm(4024): Link of class 'Landroid/support/v4/app/Watson;' failed
    09-11 19:06:57.614: W/dalvikvm(4024): Unable to resolve superclass of Lcom/actionbarsherlock/app/SherlockFragmentActivity; (94)
    09-11 19:06:57.618: W/dalvikvm(4024): Link of class 'Lcom/actionbarsherlock/app/SherlockFragmentActivity;' failed
    09-11 19:06:57.618: W/dalvikvm(4024): Unable to resolve superclass of Lcom/ketan/slidingexample/MainActivity; (242)
    09-11 19:06:57.622: W/dalvikvm(4024): Link of class 'Lcom/ketan/slidingexample/MainActivity;' failed
    09-11 19:06:57.622: D/AndroidRuntime(4024): Shutting down VM
    09-11 19:06:57.622: W/dalvikvm(4024): threadid=1: thread exiting with uncaught exception (group=0xa619f908)
    09-11 19:06:57.626: E/AndroidRuntime(4024): FATAL EXCEPTION: main
    09-11 19:06:57.626: E/AndroidRuntime(4024): java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.ketan.slidingexample/com.ketan.slidingexample.MainActivity}: java.lang.ClassNotFoundException: Didn't find class "com.ketan.slidingexample.MainActivity" on path: /data/app/com.ketan.slidingexample-1.apk
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2106)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread.access$600(ActivityThread.java:141)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.os.Handler.dispatchMessage(Handler.java:99)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.os.Looper.loop(Looper.java:137)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread.main(ActivityThread.java:5041)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at java.lang.reflect.Method.invokeNative(Native Method)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at java.lang.reflect.Method.invoke(Method.java:511)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at dalvik.system.NativeStart.main(Native Method)
    09-11 19:06:57.626: E/AndroidRuntime(4024): Caused by: java.lang.ClassNotFoundException: Didn't find class "com.ketan.slidingexample.MainActivity" on path: /data/app/com.ketan.slidingexample-1.apk
    09-11 19:06:57.626: E/AndroidRuntime(4024): at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:65)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at java.lang.ClassLoader.loadClass(ClassLoader.java:501)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at java.lang.ClassLoader.loadClass(ClassLoader.java:461)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.Instrumentation.newActivity(Instrumentation.java:1054)
    09-11 19:06:57.626: E/AndroidRuntime(4024): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2097)
    09-11 19:06:57.626: E/AndroidRuntime(4024): ... 11 more



    Please help me on this error

    ReplyDelete
    Replies
    1. I already answered this in one of above comments.

      Anyway, if you have changed package name then make changes in activity name in manifest file.

      If you are running app in older version then change the theme like

      android:theme="@style/Theme.sherlock" in manifest file.

      -Ketan

      Delete
  7. Thanks for the tutorial, it worked, but there was a detail that I describe below.

    Implemented a map in the main activity, when sliding the menu, the menu is displayed on a layer of black, which does not allow to look at the menu, you have to see the map on this or something else be configured.

    ReplyDelete
  8. Hello Ketan Ahir.
    I am sandeep hingu from gujarat
    I appreciate your work very well done.
    I need both side sliding menu like Facebook.
    if you have any source code for that please share with us.
    Thank you so much

    ReplyDelete
  9. sir i want to apply sliding to the fragments how can we do it.........for ex in one fragment i have button when i click the button next fragment comes with sliding from right..........pls help me

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. i want R.dimen.shadow_width can sm1 help me

    ReplyDelete
    Replies
    1. Hello Jigar
      You can find shadow_width.xml inside slidingmenu library project.
      I think your R.java file is not created inside "gen" folder that's why you are getting this error.

      -Ketan

      Delete
  12. actually this statment is raising an error

    ReplyDelete
  13. Need a help I want swipe view + Navigation Drawer like gmail when you open a mail you can swipe between diff emails and you can open the Drawer too any help would be appreciated.Thanks

    ReplyDelete
  14. Hi,

    How to move the Action-bar while open the sliding menu.

    ReplyDelete
    Replies
    1. You should use SLIDING_WINDOW in this line menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

      Delete
  15. Implementing the main activity in an Android application would often pose a challenge to a beginning programmer. This is because it is often hard to much the resource view and main view. It is thus necessary to get the necessary support from such a platform and move on.Medical School Admission Essay Writing Company

    ReplyDelete