Navigation Drawer Android Example

Share on Google+845Tweet about this on Twitter189Share on Facebook573Share on LinkedIn1

The navigation drawer is a panel that displays the app’s main navigation commands on the left side of the screen. It is not visible by default, and can be shown while user swipes right or while clicking on the open menu icon in the ActionBar. This example describes How to implement a navigation drawer using  Support Library the DrawerLayout API.

Navigation Drawer Design

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. For example, if you look at the older version of Facebook app, the dashboard screen was only the way to play around with the app. Lets say, if you are inside messages, you wont be able to get into the friends list, unless you come back to dashboard.

Older Version of Facebook App

The latest version of Facebook App is using the Navigation Drawer.

When to Use the 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.

More information on design guidelines follow here.

Creating a Navigation Drawer

This lesson describes step by step tutorial to Implement a navigation drawer using the DrawerLayout APIs available in the Support Library.

Create a Drawer Layout

To create a navigation drawer, first declare your user interface with a DrawerLayout object as the root view of your layout.

Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer. In this example, our layout uses a DrawerLayout with two child views. One FrameLayout to contain the 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 -->

    <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 drawer view specifies its width in dp 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.

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.

// Within which the entire activity is enclosed
private DrawerLayout mDrawerLayout;

// ListView represents Navigation Drawer
private ListView mDrawerList;

// 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 the listview mDrawerList
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getBaseContext(), 
		R.layout.drawer_list_item, getResources().getStringArray(R.array.menus));

// Setting the adapter on mDrawerList
mDrawerList.setAdapter(adapter);

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 for the listview mDrawerList
mDrawerList.setOnItemClickListener(new OnItemClickListener() {
    
    @Override
    public void onItemClick(AdapterView&lt;?&gt; parent, View view,
    int position, long id) {
        
        // Getting an array of rivers
        String[] menuItems = getResources().getStringArray(R.array.menus);
        
        // Currently selected river
        mTitle = menuItems[position];
        
        // Creating a fragment object
        WebViewFragment rFragment = new WebViewFragment();
        
        // Passing selected item information to fragment
        Bundle data = new Bundle();
        data.putInt("position", position);
        data.putString("url", getUrl(position));
        rFragment.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.replace(R.id.content_frame, rFragment);
        
        // Committing the transaction
        ft.commit();
        
        // Closing the drawer
        mDrawerLayout.closeDrawer(mDrawerList);
        
    }
});

Listen for 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) {
        getActionBar().setTitle(mTitle);
        invalidateOptionsMenu();
    }
    
    /** Called when a drawer is opened */
    public void onDrawerOpened(View drawerView) {
        getActionBar().setTitle("JAVATECHIG.COM");
        invalidateOptionsMenu();
    }
    
};

// Setting DrawerToggle on DrawerLayout
mDrawerLayout.setDrawerListener(mDrawerToggle);

Download Complete Source

Download Source Code on Github

Working Demo

Navigation Drawer Android Example

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. Follow him on Twitter or Google plus.

-- Advertisement --
  • 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 ?