Android Sliding Menu Navigation Drawer

By | March 17, 2014

In most of the android applications like Facebook , Google plus ,you tube, amazon kindle , true caller .. etc you have seen a side menu which appears on click of an icon on top left corner or by dragging on to the screen from left to right , so here in this tutorial we shall see how to create the sliding menu for you android application .

Note : Drawer Layout was added to Android Support Library, revision 19.0.1           Developer site : Support library

Design Pattern


  • By swiping from the left edge of the screen.
  • By touching the application icon on the action bar.


  • Touching the app icon (at top left corner) .
  • Touching the content outside drawer .
  • Swapping anywhere on the Screen .
  • Pressing Back

For More Brief on design visit developer site Navigation Drawer . In this tutorial we will see an example in which i  have added three items for listview , onclick of any particular item of the list , the corresponding content will be displayed .  Below is the diagrammatic representation .

While making this tutorial i was not able to import Drawer class ,reason i have not updated the Development environment with support library so to do that follow the below steps (do if you are not able to import drawer class or getting error ).

  1. In Eclipse right-click over the project, then choose Android Tools  >  Add Support Library
  2. Accept License and then click Install.


Lets See An Example

Project Detail
Project Name SlidingMenu
Package com.pavan.slidingmenu
Minimum SDK API 8
Target SDK API 17
Theme Holo Light Theme


String Constant

Before i start coding i will initialize all the strings and arrays inside the inside res/strings.xml . and also i  have kept  all the images inside the drawable folder of project.

file : strings.xml

<?xml version=”1.0″ encoding=”utf-8″?> 
<string name=”app_name”>SlidingMenu</string>     
  <string name=”action_settings”>Settings</string>    
 <string name=”hello_world”>Hello world!</string>
<string name=“imgdesc”>imgdesc</string><string-array name=”titles”>         
<array name=”icons”>

I have edited the images and added to the drawable resource directory which you can find inside the download source code.

drawable – mdpi(48*48) drawable – hdpi(72*72) drawable – xhdpi(96*96)


Main XML Layout

Create a main layout which contains DrawerLayout as parent view and add FrameLayout and ListView  as a child to it , the framelayout act as the main content view and listview act as menu list  

file : activity_main.xml

android:layout_height=”match_parent” >
<!– The main content view –>           
android:layout_height=”match_parent” />    
 <!– The navigation drawer list –>
android:dividerHeight=”0dp” />

ListView Set Up

I am setting up a Custom ListView for ListView Inside which contains one ImageView and one TextView, so create list_item.xml inside layout directory ,this layout is used to defines the design of each row items in a list view .

file : list_tem.xml

<?xml version=”1.0″ encoding=”utf-8″?>
android:padding=”5dp” >
android:contentDescription=”@string/imgdesc” />
android:textSize=”20sp” />

Bean Class
Create a Bean Class RowItem which is used for setting and getting row data’s of each items in ListView ( icons and titles).  

file :

package com.pavan.slidingmenu;  
public class RowItem {    
     private String title;     
      private int icon;      
      public RowItem(String title, int icon) {
this.title = title;           
              this.icon = icon;
             public String getTitle() {
return title;
             public void setTitle(String title) {
this.title = title;
              public int getIcon() {
return icon;
               public void setIcon(int icon) {      
                         this.icon = icon;

Create a Custom adapter which extends BaseAdapter , this is used for inflating each row items of the listview .

file :

package com.pavan.slidingmenu;   
import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;  
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;  
import android.widget.ImageView;
import android.widget.TextView;  
public class CustomAdapter extends BaseAdapter {
Context context;  List<RowItem> rowItem;CustomAdapter(Context context, List<RowItem> rowItem) {
this.context = context;
this.rowItem = rowItem;

 public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) context                     .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.list_item, null);
ImageView imgIcon = (ImageView) convertView.findViewById(;
TextView txtTitle = (TextView) convertView.findViewById(;
RowItem row_pos = rowItem.get(position);

// setting the image resource and title
return convertView;

public int getCount() {
return rowItem.size();

 public Object getItem(int position) {
           return rowItem.get(position);

  public long getItemId(int position) {
         return rowItem.indexOf(getItem(position));


Create Fragment for each Items of the ListView

Create fragment for each items of the listview , below you can see i have create fragment for facebook item of listview.

XML Layout Java Class
Facebook fb_fragment.xml
Google-Plus gp_fragment.xml
TutorialsBuzz tb_fragment.xml

file : fb_fragment.xml

<?xml version=”1.0″ encoding=”utf-8″?>
android:layout_height=”match_parent” >
android:src=”@drawable/fb” />

file :

package com.pavan.slidingmenu.slidelist;
import com.pavan.slidingmenu.R;
import android.annotation.SuppressLint;  
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
  public class FB_Fragment extends Fragment {@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
View rootView = inflater .inflate(R.layout.fb_fragment, container, false);        
        return rootView;


 Similarly Create Two More Fragments

Handling ListView Item click listener

Create a inner class called SlideitemListener , Inside the MainActivity class , and override onItemClick method inside this method call updateDisplay() method by passing position as a parameter to it and then inside updateDisplay by knowing  the position clicked ,we are replacing the current fragment with the respective fragment associated with the items of listview . you can find the updateDisplay method inside the MainActivity class .

mDrawerList.setAdapter(adapter); mDrawerList.setOnItemClickListener(new SlideitemListener());   … … class SlideitemListener implements ListView.OnItemClickListener   {
           public void onItemClick(AdapterView parent, View view, int position, long id)        {            updateDisplay(position);


Main Activity

file :

package com.pavan.slidingmenu;
import java.util.ArrayList;
import java.util.List;
import android.annotation.SuppressLint;
import android.content.res.Configuration;
import android.content.res.TypedArray;  
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;  
import android.widget.ListView;
import com.pavan.slidingmenu.slidelist.FB_Fragment;
import com.pavan.slidingmenu.slidelist.GP_Fragment;
import com.pavan.slidingmenu.slidelist.TB_Fragment;  public class MainActivity extends Activity {
String[] menutitles;  TypedArray menuIcons;
// nav drawer title
private CharSequence mDrawerTitle;
private CharSequence mTitle;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;   
private ActionBarDrawerToggle mDrawerToggle;
private List<RowItem> rowItems;
 private CustomAdapter adapter;

@Override  protected void onCreate(Bundle savedInstanceState) {


mTitle = mDrawerTitle = getTitle();
menutitles = getResources().getStringArray(R.array.titles);
menuIcons = getResources().obtainTypedArray(R.array.icons);    
       mDrawerLayout = (DrawerLayout) findViewById(;
mDrawerList = (ListView) findViewById(;

rowItems = new ArrayList<RowItem>();

for (int i = 0; i < menutitles.length; i++) {
RowItem items = new RowItem(menutitles[i], menuIcons.getResourceId(      i, -1));

   adapter = new CustomAdapter(getApplicationContext(), rowItems);   
  mDrawerList.setOnItemClickListener(new SlideitemListener());

// enabling action bar app icon and behaving it as toggle button
getActionBar().setDisplayHomeAsUpEnabled(true);     getActionBar().setHomeButtonEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,     R.drawable.ic_drawer, R.string.app_name,R.string.app_name)
        public void onDrawerClosed(View view) {
// calling onPrepareOptionsMenu() to show action bar icons
public void onDrawerOpened(View drawerView) {
// calling onPrepareOptionsMenu() to hide action bar icons
invalidateOptionsMenu();          }
if (savedInstanceState == null) {         
 // on first time display view for first nav item
}  class SlideitemListener implements ListView.OnItemClickListener {

          public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{                  updateDisplay(position);

}  private void updateDisplay(int position) {
Fragment fragment = null;
switch (position) {
case 0:      fragment = new FB_Fragment();
case 1:       fragment = new GP_Fragment();
case 2:         fragment = new TB_Fragment();
                            if (fragment != null) {
FragmentManager fragmentManager = getFragmentManager();
                      fragmentManager.beginTransaction().replace(, fragment).commit();
// update selected item and title, then close the drawer
else {
// error in creating fragment
Log.e(“MainActivity”, “Error in creating fragment”);
  public void setTitle(CharSequence title) {
mTitle = title;         getActionBar().setTitle(mTitle);
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(, menu);
return true;
public boolean onOptionsItemSelected(MenuItem item) {   
 // toggle nav drawer on selecting action bar app icon/title
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
// Handle action bar actions click
switch (item.getItemId()) {
case :
return true;
default :
return super.onOptionsItemSelected(item);

/***   * Called when invalidateOptionsMenu() is triggered   */
@Override      public boolean onPrepareOptionsMenu(Menu menu) {
// if nav drawer is opened, hide the action items
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
return super.onPrepareOptionsMenu(menu);

/**   * When using the ActionBarDrawerToggle, you must call it during   * onPostCreate() and onConfigurationChanged()…   */
  protected void onPostCreate(Bundle savedInstanceState) {
// Sync the toggle state after onRestoreInstanceState has occurred.          
mDrawerToggle.syncState();    }
public void onConfigurationChanged(Configuration newConfig) {
// Pass any configuration change to the drawer toggles

 Don’t Miss   : Sliding Menu With WebView .

More on Menus
  1. Android Option Menu .
  2. Android Context Menu .
  3. Android Popup Menu .
  • Its working on api level 11 but i want to support android version 2.2

  • can you post me the code on same navigation drawer so that on clicking facebook of navigation drawer, it goes to facebook activity and listview display

  • @Dheeraj
    Navigation Drawer is supported from Android 1.6 (API level 4 , Donut ) and above ,
    I hope you have missed to add support library

    Stay tuned for updates by subscribing and also share with your friends

  • @ Desan ,
    Sure , i will post ,actually you need to use webview inside the fragment to achieve that
    I will write a post which is not for facebook kind but generic to any web app

    Stay tuned for updates by subscribing and also share with your friends

  • Anonymous

    can u plz tel how to make navigation drawer with checkbox and textview

  • To add checkbox to the items of listview you can refer this post

  • Anonymous

    Can u tel me pls how to put an MusicPlayer inside the Navigation Drawer?I want Navigation Drawer be like a SlidingDrawer, don.t want to have a menu(listview) inside…if you know what i mean..:D

  • Anonymous

    I realize what i was doing wrong.i need to pun android:layout_gravity="start" in the relativelayout who takes place of ListView.Thanks anyway,and gj with this tutorial:D

  • which library i needs to integrate………..?..but i dont want to integrate actionbar sharelock……

  • @Dheeraj
    follow this steps
    1) In Eclipse right-click over the project, then choose Android Tools > Add Support Library
    2) Accept License and then click Install

  • man u are great !
    thx for the code !

  • itz a great tutorial..
    but im trying to create the navigation drawer at the bottom..
    how to do it???
    please do guide me…

  • i am getting error in holo theme on menifest file when i click to add support library nothing happen…. i m using latest sdk when still error……………….

  • how can give margin from left to button in action bar from which menu appears as it is not completely visible..

  • Exellent tutorial…. very easy to understand. Thanks and keep sharing your Knowledge

  • @Dheeraj Verma
    you need to add support library for your eclipse , make sure it is added successfully or you can check this link

  • @Izaz Hassan
    i think its not possible to set margin within the action bar , i will try to check and let u

  • @Mansoor Ahmad Samar
    Thank you 🙂
    Please share with your friends and get in touch with my little blog through email , facebook …

  • sir i am subscribe user but unable to get download this slider code

  • @Nilesh Rambhad
    I have updated the database now you can try , and let me know 🙂

  • i am subscribed user but unable to get download this slider code

  • This comment has been removed by the author.

  • my mail address is ,but I'm not able to download your code.It show me,sorry no email id found

  • @Rohan Rathore

    I have updated the database now you can download , let me know if any issue

  • please could you update ur code .. how to fetch the data from the sqlite in the form of listview , custom view, and grid view….please i am waiting for ur reply bro….

  • @Mohammed
    Use SimpleCursorAdapter to get data from database , you can check this
    any issue let me know

  • I'm not able to download your code, would you be able to update your database please!
    Thank you 🙂

  • @zakarie
    I have updated the database recently ,
    and please do verification confirmation which is sent to your mail id
    Thank you 🙂

  • Hello Pavan,

    Please add me to database….

  • @suvarna deo

    The database is updated and yes you are in database , now you are able to download all the resource of tutorialsbuzz

  • Please do subscribe to my blog , its only one time subscription and every resource of this blog is available once you subscribe

    Thank you 🙂

  • Hello Pavan,

    Please, can you accept me in your subscribe list ? I need to download the source code, but I need to be updated in your database.

    Thanks in advance,

    Vinícius Mendes de Souza.

  • @Vinícius Mendes
    Yes you can download the code now

  • Hi Pavan,

    Can you help me using this for activities instead of fragments. I've already done it, the only problem is I can't achieve the slide effect. you may download it here:

  • Hello Pavan,

    Kindly add me to your subscriber database..

  • hw cn i display a map on clicking the map oprtion from the navigation drawer ?

  • how to add it to right side

  • Thank you for this tutorial.

    Also small mistake I noticed when copy pasting.

    'case :' => one ':' to many, it should be 'case'

  • @Stephan
    Thanks for Suggestion ,
    I have updated

  • hi, am having trouble adding a viewflipper animation that changes screen with every swipe to one of my was previously working but not after i added a navigation is the piece of code with error..

    if (lastX > currentX) {
    if (viewFlipper.getDisplayedChild() == 1)
    // set the required Animation type to ViewFlipper
    // The Next screen will come in form Right and current Screen
    // will go OUT from Left
    viewFlipper.setInAnimation(this, R.anim.in_from_right);
    viewFlipper.setOutAnimation(this, R.anim.out_to_left);

    Error is: The method setInAnimation(Context, int) in the type ViewAnimator is not applicable for the arguments (FR_Fragment, int)

    Kindly assist..

  • HI, I subscribed but cant get access tot he code

  • You have used Theme.Holo.Light which is not supported in SDK Version 8. Once I changed the Theme to android:Theme.Light application is showing error 06-16 07:33:42.734: E/AndroidRuntime(866): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.pavan.slidingmenu/com.pavan.slidingmenu.MainActivity}: java.lang.NullPointerException
    06-16 07:33:42.734: E/AndroidRuntime(866): at

  • @way2webworld
    Minimum is 8 and target is 17 , it lies within this
    update your sdk

  • Have subscribed and verified by email, but can't download it still says 'sorry no email id found'

  • Hi … Please, can you accept me in your subscribe list. I need to download the source code.

  • Kindly add me to your subscriber database.

  • Hello Pavan,

    Please, can you accept me in your subscribe list ?

    Thanks in advance,

    Alain Camacho

  • Can you please add me to your subscirber database.

  • PN

    I got error in above code like activity_main,slider_list,titles,icon can not be resolved or is not a field

  • I am confused, what is referring to, the string?

  • PN

    can you please help me to put content inside.
    suppose i click on one navigation icon then i can see all the content about if I click on contact then all information about contact I can view.
    Please help me to do.

  • @PN
    When you click of each item of slide menu a fragment associated with that menu item will be opened , you can create a fragment which shows contact info and associate that fragment with item of slide menu

  • PN

    Thanks for your reply
    can you please send me one example suppose I want to add google map inside my contact(navigation icon) so where I should do coding for it.

  • PN

    This comment has been removed by the author.

  • @PN
    Sure i will post google maps tutorial in my future blog post

  • PN


  • PN

    I am still confused in how to add content inside the navigation icon.
    If It possible to you please send small example
    Thanks in advance

  • This sample is not working in Froyo and Honeycomb versions..

  • @Moviezadda
    Navigation Drawer Runs on Android 1.6 (API level 4) and up ,
    you need to include support library (

  • how to get the same navigator drawer on right top corner

  • How if want add button in the layout main activity?

  • hi your code is working good, but i want an custom layout like your example above not only listview on it but have an image… add me also, thanks!

  • Hi,
    This is indeed a great tutorial. But there is a bit problem when using drawer layout on the activity other than root activity i.e. you can't see the image which is used to slide the menu.
    for e.g. if suppose you have sequence of activities: A–>B , then you can't see the slider on the top left corner of Activity B .

  • How to show navigation button in all screens

  • I already subscribed but unable to get code……

  • @Shobin Jindal
    Database Updated you can download the code

  • The database is updated you can download

    For new Subscribers it's only one time subscription , after that you can download the full resource of tutorialsbuzz

    please new subscriber co-operate , it takes 9-10hrs to update for new subscription .

  • Hi Pavan, can u add me as subscribers, I need to download the source code for refer, thanks =)


    Database Updated you can download the code

  • Hi Pavan, I tried to download source code using my Email, but it shows "sorry no email id found", is there any steps I missed out? thanks

  • Hello , I'd like to know how to add a search bar to this tutorial !!
    I am very thankful for this great project 😉

  • i am not able to download this code….

  • @Vishal
    DB is updated you can download

  • good job man .. but i want if i clicked in on facebook in the sliding menu it well open facebook page or site or any webview ? how can i do that please ?

  • @Osama Abd
    Use Android WebView , I have already written about this here

  • @Pavan, I am not able to download the code, can you help me please?

  • PLEASE how can i change the background color of the HEADER (the top navigation bar where you have the google icon, title.. where you click to open the left side menu)? IT IS ALWAYS THIS GRAY background.. HOW TO change it to a specific color such as #56F609 ?

  • Hi PAVAN Your blog is very nice,very easy to understand and nice way of explanation.
    I Hope u can make more and more good tutorials like this.
    Please Tell me About Navigation Drawer with Tabs by using Fragment Class ,like youtube and Google+

  • Hi PAVAN Your blog is very nice,very easy to understand and nice way of explanation.
    I Hope u can make more and more good tutorials like this.
    Please Tell me About Navigation Drawer with Tabs by using Fragment Class ,like youtube and Google+

  • @Desan Benz
    Here it is sliding menu with webview

  • sorry no email id found

  • @Ashvin
    db is updated you can download , let me know any issue

  • Thanks for your help, is perfect!!! 🙂

  • Thanks for your help

  • Hi PAVAN
    Please Tell me About Navigation Drawer with Tabs (or) tab host by using Fragment Class ,like you tube Sports page

  • Hey !! Thanx so much for this tutorial , i tried using the way that you have shown but i am getting some runtime error !! i'll paste my error log below !!

    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.auberginesolutions.slidermenu/com.auberginesolutions.slidermenu.MainActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
    at android.os.Handler.dispatchMessage(
    at android.os.Looper.loop(
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(
    at dalvik.system.NativeStart.main(Native Method)
    Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
    at com.auberginesolutions.slidermenu.MainActivity.onCreate(
                at android.os.Handler.dispatchMessage(
                at android.os.Looper.loop(
                at java.lang.reflect.Method.invokeNative(Native Method)
                at java.lang.reflect.Method.invoke(
                at dalvik.system.NativeStart.main(Native Method)

  • hello,

    It's perfect but i would like have much more annotation if you can do and resend me after that will perfect 🙂


  • i tried this code in android studio but getting error of getActionBar() throws null pointer exception .. any one help me..

  • On line no FragmentManager fragmentManager = getFragmentManager();
    Type mismatch: cannot convert from to

    show this type error please help me

  • @Aprurba Mondol
    Make sure to import


    Instead of


  • How to change the image icon of android that is displayed on the top?

  • How to change the icon of default android with our own?

  • Hi — I am having the same issue. Any ideas?

  • Instead of using getActionBar() use getSupportActionBar().

  • If i want to make an apprelated to notice board of my college how should i handle its dbase?

  • If i want to make an apprelated to notice board of my college how should i handle its dbase?

  • Or replace "getFragmentManager()" with "getSupportFragmentManager()"

  • Or replace "getFragmentManager()" with "getSupportFragmentManager()";