LearnHow to Add a Navigation Drawer in Android

   
Avatar

Ben Jakuben
writes on February 2, 2015

Android now includes a component that makes it very easy to add a navigation drawer to an app that the user can slide in from the side. I first remember seeing this in the Facebook app in iOS, and I thought it was a pretty nifty mobile design pattern (though others some people strongly disagree). I will assume you are here because you think it is good for your app, though!

In Android this component is called the navigation drawer. The Android design guidelines have a nice section on when and how we should use the navigation drawer in an app. One of my favorite uses if for power-user features that might be confusing or overwhelming for infrequent users of the app, but that are nice to have easily accessible in a menu that can be pulled in from the side.

Android Studio now includes a project template for an app that includes a navigation drawer:

Navigation Drawer Activity Template from Android Studio

It is built on Fragments, which is a useful model to have, especially if you want a common navigation drawer across multiple screens. It might be a little more than needed for a simple app, so below I will walk through how to add a navigation drawer to an existing app from scratch. If your needs go beyond what we cover here, there is a lot of good information on the Android Developer site about how to create a Navigation Drawer.

Also check out: What is Android Development?

Open or Create a Project

If you care to follow along, clone or download my super simple starter app from GitHub: OS List. (The finished source is available at the end of this article.) All you need is an Activity, though. This app will target Android 4.0 and above, but the support library that brings us the Navigation Drawer makes this available on even older versions.

Your project may already contain the required dependency to use the Android support library, but if not, add the following line to the dependencies section in the build.gradle file for your app module:

compile 'com.android.support:appcompat-v7:21.0.3'

(You will probably want to use the latest version of the library.)

Update the Layout

The first thing we need to do is modify the layout for our Activity. We simply need to provide a regular layout for the Activity plus a separate layout for the navigation drawer, but both layouts are contained inside the same container: DrawerLayout.

In OS List, we have a simple RelativeLayout with a TextView and ImageView. To add a navigation drawer, we add a new root element of type android.support.v4.widget.DrawLayout.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.widget.DrawerLayout>

Then we add a ListView for the side drawer view:

<ListView
    android:id="@+id/navList"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="left|start"
    android:background="#ffeeeeee"/>

The ListView (or whatever View we use as the side navigation drawer), should be no more than 320dp wide, so that it does not cover the entire Activity when it is out.

You can view the entire layout file here in the completed project on GitHub.

Set the List and Adapter in the Activity

Now that we have a ListView to work with, let’s set it in the Activity. In this example we will use a simple String array as our data set for the list, and an ArrayAdapter to adapt the data. (For more information about using lists and adapters, check out Android Lists and Adapters in the Treehouse library.)

First, let’s add two member variables to our Activity:

private ListView mDrawerList;
private ArrayAdapter<String> mAdapter;

Then we can set the ListView in onCreate():

mDrawerList = (ListView)findViewById(R.id.navList);

To add items and configure the list, let’s create a helper method that we can call inside onCreate():

private void addDrawerItems() {
    String[] osArray = { "Android", "iOS", "Windows", "OS X", "Linux" };
    mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, osArray);
    mDrawerList.setAdapter(mAdapter);
}

At this point we have a working navigation drawer! Hooray!

Navigation drawer swipe

We can perform an action when each item in the side navigation list is tapped just like we would for a regular ListView. Let’s set an OnItemClickListener and simply make a Toast about each item in the list:

mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(MainActivity.this, "Time for an upgrade!", Toast.LENGTH_SHORT).show();
    }
});

This is the minimum basic code we need for a navigation drawer, but there is much more we can do!

Add a Toggle Switch in the Action Bar

Opinions may vary on this, but I personally prefer a hamburger menu or some kind of icon in the Action Bar that lets me know the navigation drawer is there. We can use the default icon provided by Android with a few more changes in our Activity. We can show it by adding two lines in our onCreate() method (though it won’t do anything yet):

 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 getSupportActionBar().setHomeButtonEnabled(true);

To get this to work correctly, we need to configure something called an ActionBarDrawerToggle.

Let’s start with a few new member variable for this new object. We need one for the toggle, one for the DrawerLayout we added to our layout, and a String that we will use to update the title in the Action Bar:

private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private String mActivityTitle;

Before we forget, let’s set mDrawerLayout and mActivityTitle in onCreate():

mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mActivityTitle = getTitle().toString();

Using a toggle requires two String resources, so let’s add those in strings.xml in the res/values directory before we proceed:

<string name="drawer_open">Open navigation drawer</string>
<string name="drawer_close">Close navigation drawer</string>

Okay! Now we can add a new helper method that we will call from onCreate() after the drawer items have been set up:

private void setupDrawer() {
}

Here is where we will initialize mDrawerToggle. Autocomplete is really helpful here; or just copy and paste from below. We want to create a new ActionBarDrawerToggle instance that uses the context, mDrawerLayout, and those two new string resources we added, and then we need to implement two methods: onDrawerOpened() and onDrawerClosed():

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
        R.string.drawer_open, R.string.drawer_close) {

    /** Called when a drawer has settled in a completely open state. */
    public void onDrawerOpened(View drawerView) {
    }

    /** Called when a drawer has settled in a completely closed state. */
    public void onDrawerClosed(View view) {
    }
};

When the drawer is opened, we can set a new title for the Action Bar (if we want). We also want to invalidate the options menu in case it needs to be recreated with different options for when the navigation drawer is open:

public void onDrawerOpened(View drawerView) {
    super.onDrawerOpened(drawerView);
    getSupportActionBar().setTitle("Navigation!");
    invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}

And then when it is closed we will do the opposite. Revert the title (which we stored in mActivityTitle) and again invalidate the options menu:

public void onDrawerClosed(View view) {
    super.onDrawerClosed(view);
    getSupportActionBar().setTitle(mActivityTitle);
    invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}

At this point our toggle still won’t work. We need to add two more lines to enable the drawer indicator (the lovely hamburger menu) and then attach this new toggle object to our drawer layout. Add these two lines in setupDrawer() after mDrawerToggle is set:

mDrawerToggle.setDrawerIndicatorEnabled(true);
mDrawerLayout.setDrawerListener(mDrawerToggle);

Finally, we need to activate this in the onOptionsItemSelected() method. Add this block of code anywhere in the method:

if (mDrawerToggle.onOptionsItemSelected(item)) {
    return true;
}

Navigation drawer button

To see the whole file check out MainActivity.java in the completed project on GitHub.

Keep Everything in Sync

Notice in the animated gif above that the icon isn’t quite in sync with the drawer. We need to call one more method in the onPostCreate() lifecycle method of our Activity. Inside onPostCreate(), call mDrawerToggle.syncState() to sync the indicator to match the current state of the navigation drawer:

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

The other scenario we need to plan for to keep things in sync is when the configuration of the Activity changes, like, for example, going from portrait to landscape or showing the soft keyboard on the screen. We do this in the Activity’s onConfigurationChanged() method, which you may need to add:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

Android side navigation drawer

Related Reading: Scheduling Time-Sensitive Tasks in Android with the AlarmManager

Next Steps

At this point we have a complete, working example of a navigation drawer that can be swiped in from the side or accessed via a button in the Action Bar. There is a lot more we can customize depending on our needs, of course, but this is a powerful tool that is now very easy to use thanks to the components added to the Android support library.

Look for courses, workshops, and other tips like this in the Android section of the Treehouse library, and check out the 7-day free trial. Happy coding!


Learn in-demand programming skills and become a certified Android Developer with the Treehouse Techdegree Program. Learn more and enroll today.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

51 Responses to “How to Add a Navigation Drawer in Android”

  1. Thank you for this nice tutorial, even if it seems to be a little bit older. This helped me finally achieve to add a navigation drawer menu with a hamburger icon. And best thing is, it works extremely smooth! Great job. Looking forward for more.

  2. Ayoderich on April 29, 2017 at 2:33 pm said:

    Job well done, thanks guys for making learning easier.

  3. I am new to android and this post helps me to improve. Thanks for the informative post.

  4. Vo Quang Phu on February 9, 2017 at 9:39 pm said:

    Great thanks to a great tutorial. Just one small comment here that it seems latest version of Android Studio (which I’m using) complaints about setDrawerListener() method to be deprecated. It seems that changing to addDrawerListener() takes that off, just for future reference.

  5. Great example, how do I startactivti to a second main_activity2 and keep the bar at the top

  6. Another great guide from the Great Ben Jakuben.
    Because of Ben Jakuben and Ben Deitch I code Android freely!
    The B&B of Treehouse !

  7. Mark Luna on August 23, 2016 at 9:55 pm said:

    Good tutorial, everything was going fine until I realized my button never changes to a hamburger icon. It’s always an arrow. Everything works but I can’t get the arrow to change to a hamburger menu. I followed everything exactly as shown.

  8. Hi,
    I have a Activity SignIn layout in my app. also, I have a “content_signin” layout.
    when I place “android.support.v4.widget.DrawerLayout” codes after “” app shows the drawer but I can’t use my signIn page textboxes/buttons “It blocks them even when the drawer is closed”, however the drawer works perfect. 2- when I placed it before “” the signIn page works perfect but the drawer side menu doesn’t show up (I can see the drawer sign on top).
    so, any Idea where to place the drawer layout codes?
    Thank you

  9. Hi Ben!
    This is a greet Tutorial for adding Navigation Drawer. I was trying many examples before but non of them works on my app except this one. i’m appreciate your help. I currently have a sign In page in my app with text boxes and buttons but when I added your drawer to that page the other buttons don’t work anymore. but the navigation drawer works perfect.
    I’m new to Android.. what might be the problem? it looks like something block my signIn page. I added drawer onCreate as you said and I initialized and took care of my signIn Text boxes onStart() event.
    public void onStart() {
    super.onStart();
    mSendButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {

    onClickSignIn();
    }
    });

    }

    Thanks

  10. Thomas on June 4, 2016 at 5:26 am said:

    When I click on an item it does not call the setOnItemClickListener method, what might be the problem?

  11. Yoda82 on April 3, 2016 at 5:18 pm said:

    Love This Tutorial, It actually explains stuff.

    now I did have a problem. getSupportActionBar() Does not work! It says it’s undefined and I don’t see it explained anywhere, is that another method we create or something the android system has?

    That’s the only thing that isn’t functioning, but Other than that, Awesome Tutorial!

    • AndroidNewBie on July 31, 2016 at 11:50 am said:

      I agree, this was an awesome tutorial(works as of July 31, 2016). I am new to android development and don’t really enjoy reading through documentation but this one was clear enough(if you have basic knowledge about android development).

      Regarding your getSupportActionBar method not being recognized. Make sure the following are true:

      1. Activity must extend AppCompatActivity
      2. Build.gradle for your app must have a dependency
      compile ‘com.android.support:appcompat-v7:23.4.0’
      3. If you get an error message that it might produce a null pointer exception then do this

      if( getSupportActionBar !=null ) {
      getSupportActionBar.setTitle(“”); // or whatever you want to use
      }

      Hope this helps
      Good luck!

  12. Waseem Akram on February 26, 2016 at 6:03 am said:

    Hi,
    This article is really helpful,

    I want to knw how can i add fragments on top of the main activities content layout.??

  13. Thanks , its really very helpful.

  14. Hi,

    This article is really helpful for me , i am new on Android app development.

  15. mohammad shahbaz on February 4, 2016 at 5:36 am said:

    I want a search bar as the first item of my navigation drawer.How can i do that?

    In this example at place of android i want a search bar
    how can i use a saerchview at that place.

  16. Firas Jabr on January 31, 2016 at 3:15 pm said:

    Thank you sor for this great tutorial,I used all the tips you gave us in this tutorial.I just want to ask how to make the drawer navlist and the toggle on the right side not left.Please if you can help me.

    Regards

  17. Nice one.
    Will plz tell me how to add icon to navigation drawer???

  18. Very nice. Is anybody know how to add TextView (anything) to the main_activity and after calling a fragment the TextView disapear?

  19. priyanka on January 5, 2016 at 2:47 am said:

    void adddrawerItems();
    {
    String[] osArray = { “Android”, “iOS”, “Windows”, “OS X”, “Linux” };
    mAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, osArray);
    mDrawerList.setAdapter(mAdapter);
    }
    i get error that
    expression expected

  20. best tutorial i have found for starting with navigation drawer. Awesome work

  21. Nice tutorial….very helpful….I have a small doubt. Is it possible to transfer data from one fragment to other in Navigationdrawer?

  22. Mostafa Anter on October 20, 2015 at 3:52 pm said:

    thanx for this tutorial but i’want know if i can replace Listnav with activity Layout

    as any simple activity

  23. vikram sharma on October 9, 2015 at 1:53 am said:

    heelo sir,
    i’m in problem that i want to when i click DrawerView then open listof item and hide action bar

  24. i have given intent event inside the onitemclick of setonitemclicklistener, but its not working, why?

  25. Trishu Dey on October 1, 2015 at 12:20 am said:

    Thanks for the tutorial !
    But the navigation drawer does not register the clicks unless you specify these two lines :
    mDrawerList.bringToFront();
    mDrawerLayout.requestLayout();

  26. nice tutorial but how to add submenu? can you give me sample code.. thanks..

  27. Aalap Patel on August 18, 2015 at 2:22 pm said:

    Hello Ben, this was a great tutorial. I wanted to ask that if I have 7 screens in my app and in every page I want to use this navigation bar with the same data in it, how should I proceed? I need all the activities as navigation drawer, but do i need to initialise navlist and list view in each and every Java class???

  28. Basant Rai on August 14, 2015 at 6:16 am said:

    Hi Ben ! !
    Your tutorial is really nice and i want say thank for this tutorial.
    and i have question that how to add a activity in these items like in “android”,”ios” and “windows”.
    when i tap on a item i see “time for an upgrade!” but i want to open an activity when i tap on these items
    please share your coding.

    • Glad you found it useful! You can open a new Activity the same way as any other time: by using an Intent and startActivity. Here’s a quick example that you can plug in where I have the code to display “Time for an upgrade!”:

      Intent intent = new Intent(this, NewActivityName.class);
      startActivity(intent);

      • Basant Rai on August 17, 2015 at 10:46 pm said:

        hey Ben !!
        It’s show error when i add “Intent intent = new Intent(this, NewActivityName.class);
        startActivity(intent);” replace with Tost (Toast.makeText(MainActivity.this, “Time for an upgrade!”, Toast.LENGTH_SHORT).show();)
        that error is “remove match intent”
        so how can i improve this error
        help me please.

        • Basant Rai on September 7, 2015 at 10:40 am said:

          Hey Ben!
          when i use codes
          “Intent intent = new Intent(MainActivity.this, NewActivityName.class);
          startActivity(intent);”
          to open an new Activity on item click of listview, its open in separate window but i want to
          open it in same windows on place of Batdroid image,
          how can i do it ?.
          help me please !!!!!!

  29. Flávio Filho on August 13, 2015 at 7:42 am said:

    Hi Ben,

    I’ve been trough your tutorial, and it works fine.
    Now I want to know how to use the drawer itens to navigate between fragments.
    I find a kind of difficult to use the examples created by Android Studio, besides having other problems generating the app with gradle, that frequently can’t create the resources class “R”.

    Regards,

    Flávio

  30. Aye Aye Mon on August 11, 2015 at 8:41 pm said:

    Initial startup app download link is not found. Please help!

  31. Fernando Castillo on February 13, 2015 at 8:23 am said:

    Android have provided an useful and flexible interface for its users. Moreover the codes given here provides excellent results. Thanks for keeping us updated.

  32. Kristi guerrero on February 13, 2015 at 7:55 am said:

    Wow!!! An innovative method to ease up the navigation in Android. Cool thing.!!

  33. François on February 12, 2015 at 6:10 pm said:

    How to use something like this :

    private void addDrawerItems() {
    String[] osArray = { “Android”, “iOS”, “Windows”, “OS X”, “Linux” };
    mAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, osArray);
    mDrawerList.setAdapter(mAdapter);
    }

    But having something like : ” R.string.AndroidText ” instead of “Android”

    And also have different link for each things like one separate for android, another one for iOS.

    Thanks for your answer.

  34. Hello, I am new to Android Development so it is really a helpful article for me. Thanks for sharing.

  35. I really like the hamburger to arrow animation and how it is connected to the draw position but notice most apps cover it (even Google’s) when you slide the navigation draw out. It seems odd to cover the button. Is it possibly part material design language?

  36. Android is most widely used mobile OS now a days. Thanks for sharing useful article regarding this.

  37. Justin Spencer on February 3, 2015 at 8:04 am said:

    This is a great information that you have shared with us. Thanks a lot. Hope to see more in future.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop