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.

< xmlns:android=""
    android:layout_height="match_parent" >

    <!-- The main content view -->

        android:layout_height="match_parent" />
    <!-- The navigation drawer -->

        android:dividerHeight="0dp" />


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.

// 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(;

mDrawerList = (ListView) findViewById(;

// 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

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.

   // Setting item click listener for the listview mDrawerList
		mDrawerList.setOnItemClickListener(new OnItemClickListener() {

			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));

				// 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(, rFragment);

				// Committing the transaction

				// Closing the drawer


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.

// 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) {

		/** Called when a drawer is opened */
		public void onDrawerOpened(View drawerView) {


// Setting DrawerToggle on DrawerLayout

4. Download Complete Source



5. Working Demo

Navigation Drawer Android Example

6. Reference


A blogger, bit of a tech freak and a software developer. He is working around smart phone arena with technologies like android, blackberry, PhoneGap and Sencha Touch.

  • googleplus
  • facebook
  • twitter

Share this post:

  • suraj

    i wish you have presented in more easier manner without copying from

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

Fork me on GitHub