Navigation Drawer Android Example

* Last reviewed on: Mar 27, 2015

1. Introduction

Android navigation drawer is a one of the most common used design pattern that displays the app’s main navigation links on the left side of the screen. It is not visible by default, and shown when swiped from left to right or by clicking the navigation menu icon from ActionBar.

The following example explains, how to implement a navigation drawer using  Android Support Library DrawerLayout API.

2. When to Use Navigation Drawer

Navigation drawer is an overlay panel, that is replaced with the legacy application dashboard screen or menu. Now we don’t need to create a dedicated activity for showing all application options. You can simply it further by just using navigation drawer.

Before you decide to use a navigation drawer in your app, you should understand the use cases and design principles defined in the Navigation Drawer design guide. It is not an general replacement for top-level menu navigation.

Follow official Android on design guidelines follow for more information.

3. Navigation Drawer Example

The following section of this tutorial, describes step by step approach to Implement a navigation drawer using the DrawerLayout APIs available in the Android Support Library. Some of the steps includes

  • Create drawer layout
  • Initialize navigation drawer layout
  • Handle navigation drawer click
  • Update content based on selection

Navigation Drawer Android Example

4. Creating a Drawer Layout

For creating a navigation drawer, first we need to declare the drawer layout in your main activity  where you want to show the navigation drawer. Add android.support.v4.widget.DrawerLayout as root view of activity layout.

A DrawerLayout can have the layout for list to be shown inside navigation drawer and layout for main content view. In this example, the DrawerLayout contains two child views; one FrameLayout for main content, and a ListView for the navigation drawer. The FrameLayout is used to hold the child view’s populated by a Fragment at runtime.

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

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- The navigation drawer list-->
    <ListView
        android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

Key Notes:

  • The main content view is used as first child in the DrawerLayout. The XML order implies z-ordering and the drawer must be on top of the content.
  • The main content view is set to match the parent view’s width and height, because it represents the entire UI when the navigation drawer is hidden.
  • The width of drawer view is specified in dp (density independent pixels) units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

5. Initialize the Drawer List

Now, first initialize the navigation drawer’s list of items. As here the navigation drawer consists a ListView, so the list can be populated by an Adapter.

items = getResources().getStringArray(R.array.menus);

/* Getting reference to the DrawerLayout */
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.drawer_list);

/* Creating an ArrayAdapter to add items to mDrawerList */
ArrayAdapter adapter = new ArrayAdapter(this,
        R.layout.drawer_list_item, items);

/* Setting the adapter to mDrawerList */
mDrawerList.setAdapter(adapter);

6. Handle Navigation Click Events

When the user selects an item in the drawer’s list, the system calls onItemClick() on the OnItemClickListener given to setOnItemClickListener(). In this example, selecting each item in the list inserts a different Fragment into the main content view FrameLayout.

// Setting item click listener to mDrawerList
mDrawerList.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        selectedPosition = position;
        //Replace fragment content
        updateFragment();
        mDrawerLayout.closeDrawer(mDrawerList);
     }
});

Notice that in the above example we are using updateFragment() method that takes responsibility to update the content based on navigation drawer menu click. For the sake of simplicity, example loads the same WebView  with different url. Add the following method to your activity.

public void updateFragment() {
    FragmentManager fragmentManager = getFragmentManager();
    WebViewFragment rFragment = new WebViewFragment();

    // Passing selected item information to fragment
    Bundle data = new Bundle();
    data.putString("title", items[selectedPosition]);
    data.putString("url", getUrl());
    rFragment.setArguments(data);

    //Replace fragment
    FragmentTransaction ft = fragmentManager.beginTransaction();
    ft.replace(R.id.content_frame, rFragment);
    ft.commit();
}

7. Handle Drawer Open and Close Events

We can also listen to the drawer open and close event. To listen for drawer open and close events, we can extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implements DrawerLayout.DrawerListener.

/* Getting reference to the ActionBarDrawerToggle */
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
    /* Called when drawer is closed */
    public void onDrawerClosed(View view) {
         //Put your code here
    }

  /* Called when a drawer is opened */
  public void onDrawerOpened(View drawerView) {
     //Put your code here
  }
};
/* Setting DrawerToggle on DrawerLayout */
mDrawerLayout.setDrawerListener(mDrawerToggle);

8. Download Complete Source

Download Source Code on Github

MainActivity.java

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
    private String mTitle = "Navigation Drawer";
    private String[] items;
    private int selectedPosition;

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getActionBar().setTitle(mTitle);

        items = getResources().getStringArray(R.array.menus);
        // Getting reference to the DrawerLayout 
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.drawer_list);

        /* Creating an ArrayAdapter to add items to mDrawerList */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.drawer_list_item, items);
        mDrawerList.setAdapter(adapter);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /* Called when drawer is closed */
            public void onDrawerClosed(View view) {
                //Put your code here
            }

            /* Called when a drawer is opened */
            public void onDrawerOpened(View drawerView) {
                //Put your code here
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // Enabling Home button
        getActionBar().setHomeButtonEnabled(true);
        getActionBar().setDisplayHomeAsUpEnabled(true);

        // Setting item click listener for the listview mDrawerList
        mDrawerList.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                selectedPosition = position;

                /* Replace fragment content */
                updateFragment();

               /* Closing the drawer */
                mDrawerLayout.closeDrawer(mDrawerList);
            }
        });

        /* Setting default fragment */
        selectedPosition = 0;
        updateFragment();
    }

    public void updateFragment() {
        /* Getting reference to the FragmentManager */
        FragmentManager fragmentManager = getFragmentManager();

        /* Creating fragment instance */
        WebViewFragment rFragment = new WebViewFragment();

        /* Passing selected item information to fragment */
        Bundle data = new Bundle();
        data.putString("title", items[selectedPosition]);
        data.putString("url", getUrl());
        rFragment.setArguments(data);

        /* Replace fragment */
        FragmentTransaction ft = fragmentManager.beginTransaction();
        ft.replace(R.id.content_frame, rFragment);
        ft.commit();
    }

    protected String getUrl() {
        StringBuffer url = new StringBuffer("http://javatechig.com");
        if (selectedPosition > 0) {
            url.append("/topics/" + items[selectedPosition].toLowerCase());
        }
        return url.toString();
    }

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

A blogger, speaker, author, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies.

  • hamed

    how change slide menu right to left (from right side open & close too) ??plz help me

    i change gravity of ListView from “start” to “right” and it open & close from right silde … how change ActionBar to right to left too(Titles & icons of items & menu icon set in right side of ActionBar) ??

  • Mr_Bologna

    Same here, downloaded app code sample but menu won’t show on click and it couldn’t even load webpage. Using Android Studio 1.2.1.1

    • http://javatechig.com/ JavaTechig

      Will look into it soon.

  • Nilanchala Panigrahy

    You must set a WebViewClient instance. Checkout my WebView tutorial explains the same.

  • http://javatechig.com/ JavaTechig

    Checkout latest code. Have updated the example code

  • Nilanchala Panigrahy

    did you add the code from the above featured comments. Will check soon and update the code.

    • RK-Muscles God

      yes sir , maybe i have not putted it on right place , can you please copy paste here your whole MainActivity.java code .

      • Nilanchala Panigrahy

        Updated code. have a check

  • http://javatechig.com/ JavaTechig

    You must read about fragment lifecycle and basics to get started with fragments.

    http://developer.android.com/guide/components/fragments.html

  • http://javatechig.com/ JavaTechig

    It is easier with fragments. I don’t know why you want to do with activities. All fragments has similar life cycles as activities.

    As fragments are recommended by Android, you must take a while to convert all your activities to fragments. Trust me it is not a big time task

    • zhansaya

      i really apreciate your reply, thank you)
      i decided to use activities because i couldn’t use map with markers in fragment…

  • Sujith Kamath

    Hello please can u help me!! here u did loading fragments in same page ryt can u please tel me how to load activities to same layout like fragments with code example

    • http://javatechig.com/ JavaTechig

      An activity cannot be added inside another activity. It can be one top of other like card stack.

      You should use fragment for such requirements.

      • Sujith Kamath

        Can you send me code to retrieve mysql data base content and display it as list view??

      • Sujith Kamath

        where to put code to be implemented in fragment any methods for it like onCreate() for activities…??

        • Nilanchala Panigrahy

          you can use onCreateView() method to initialize your ui.

          Write your other logic inside onActivityCreated() method.

          • Sujith Kamath

            in my navigation drawer when i load one fragment other fragment will overlap the present what to do..please
            help

          • Nilanchala Panigrahy

            use add() instead of replace() while adding fragment using fragment transaction .

  • http://javatechig.com/ JavaTechig

    Add the following code on your onCreate to load fragment by default

    // Creating a fragment object
    WebViewFragment fragment = new WebViewFragment();

    // Passing selected item information to fragment
    Bundle data = new Bundle();
    data.putString(“url”, getUrl(position));
    fragment.setArguments(data);

    // Getting reference to the FragmentManager
    FragmentManager fragmentManager = getFragmentManager();

    // Creating a fragment transaction
    FragmentTransaction ft = fragmentManager.beginTransaction();

    // Adding a fragment to the fragment transaction
    ft.add(R.id.content_frame, fragment);

    • Edgar

      This doesn’t seem to work for me

    • Edgar

      It worked thanks, you did not include the last line for committing transaction

      // Committing the transaction
      ft.commit();

      Thanks alot your tutorial really saved me

      • http://javatechig.com/ JavaTechig

        Oh. my bad. thanks for pointing it out

  • http://javatechig.com/ JavaTechig

    Currently the example is developed for 4.0 and above

  • http://www.androprogrammer.com/ Wasim Memon

    hey how can i slide main layout toward the right (as per linkdin style). ?

  • Misha Lashkov

    Hi, thanks for the awesome code, one question though, when starting the application it will show a blank page, could you modify the code so it will start with case 0 (home)?
    Thank you!

    • http://javatechig.com/ javatechig

      Thanks for your suggestions. We will do the required changes.

  • Sanjayjith M

    I created one application and I used navigation drawer to navigate from one fragment to another. In that, if I navigate from one fragment to another and if again comeback to the same fragment. Its not getting resume. Its simply showing Unfortunately the app was closed. Can you tell me how to use onresume method properly in fragment???

    • http://javatechig.com/ javatechig

      can you paste the error message here ?

  • osama akb

    i’m beginner in eclipse and i downloaded the source code , i want to open it but i dont know how to open it

    • http://javatechig.com/ javatechig

      Just start eclipse. In your workspace click File-> Import -> Existing android code into workspace.

  • osama akb

    good job dude . but i want to make navigation drawer that let me like . for example if i clicked on android it open a webview (url)

  • javatechig

    how to get this

    • http://javatechig.com/ javatechig

      Checkout this lib..
      https://github.com/jfeinstein10/SlidingMenu

      By default in android Navigation menu, you cannot move the action bar while menu is open. But you can achieve with the above github code.

      • javatechig

        what i do for getting
        that exact screen shot in android

  • javatechig

    How to get this will u pls heip me pls send the code for this

  • Bruno

    I love you!

  • http://javatechig.com/ javatechig

    This is no more a android design pattern. Suggest to go with default android guidelines.

  • Thibautfrance

    Hello, great job, i have one question, how to add ico for each menu side by side .
    Answer please thanks

  • http://javatechig.com/ javatechig

    It is just an example of navigation drawer. You can fix such bugs

  • Jermaine Thomas

    Hey, lovely sample app. My only problem is each of the items in the menu opens the url in the browser (outside of the app) can you please advise.

    • http://javatechig.com/ javatechig

      which app or device are you testing on?

      • Jermaine Thomas

        Hey, testing on os 4.2.2 but i saw the problem, there was no webclient view initiated. So i added the line below just before webView.loadUrl(url); in the WebViewFragment.java file

        webView.setWebViewClient(new WebViewClient());

  • beegor.blogspot.com

    It will work if you include support jar : http://developer.android.com/tools/support-library/index.html

    • http://javatechig.com/ javatechig

      Thanks for your reply.

  • http://www.coziie.com Coziie

    First ever Android sample I downloaded from web worked!! I’m new to Java and never had a success in running a demo app downloaded from web. Your’s is the first working sample of Android i found online. Thank you very much.

    • http://javatechig.com/ javatechig

      Thanks for reading.

  • Harsh

    This is by far the best tutorial.

  • Jorell Rutledge

    How would you add icons to the navigation drawer? Also, how would you enable the webview to go back? Any help would be amazing.

    • thibautfrance

      YEs javatechig, it would be perfect :)

  • http://www.adriancoman.ro Adrian Coman

    This requires API level 11, so it’s available for Android 3.0+ if i’m not mistaken.

    • http://javatechig.com/ javatechig

      Yes, the above example works 3.0+

  • suraj

    i wish you have presented in more easier manner without copying from developer.android.com..

  • Bastien

    nice example. But there is an issue. If my fragment is doing too much of background work the navigation closing is causing a delay. Any workaround on this ?

    • http://javatechig.com/ JavaTechig

      Yes, do the fragment transaction on onDrawerClosed()

If you like this site please help us clicking on any of these buttons!