Navigation Drawer Android Example

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.

1. 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.

2. 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.

3. 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.

3.1. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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.

3.2. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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);

3.3. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
   // Setting item click listener for the listview mDrawerList
		mDrawerList.setOnItemClickListener(new OnItemClickListener() {
 
			@Override
			public void onItemClick(AdapterView<?> 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);
 
			}
		});

3.4. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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);

4. Download Complete Source

Download Complete Source Code from GitHub

5. Working Demo

Navigation Drawer Android Example

6. Reference

http://developer.android.com

About Nilanchala

A blogger, bit of a tech freak and a software developer. Follow him on Twitter, or like our official Facebook page or Google Plus.

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