You can implement a navigation drawer with either an action bar or a toolbar. It’s also possible to implement a navigation drawer without using either of them. We are going to implement an Android navigation drawer by following the Android material design guidelines. A material design and toolbar were added in the Android 21 API (Android 5.0 lollypop).

First we will set up our project to support a toolbar ( A.K.A ” action bar”) and a material design theme. Then we are going to add a navigation drawer to it. Our application is going to support older versions of Android as well. Make sure the compile dependency of the appcompat library is present in  the build.gradle file of Android studio.

Step #1: Choose a material design theme

Next you need to specify that you are not going to use the old action bar. Go to the styles.xml file and add the following code:

Theme.AppCompat.Light.NoActionBar is provided in the appcompact support library. It helps to provide new features in old versions of Android. Here we are getting the material design features of  the API 21. You can learn more about it here: material design in Android.

Step #2: Add a Toolbar

We will add an action bar like feature by using a toolbar. Android has introduced a new widget for a toolbar. You can get more details about Android toolbars by checking out that tutorial. Add the following lines of code inside your main activity file:

Toolbar in Android

A toolbar is similar to other view elements. You can provide it an ID, add colors to it, and define it’s dimensions as well.

How to remove extra space (margin) from a toolbar.

When you add a toolbar to your Android application, by default there is an extra space on the left and the right sides.You need to use app:contentInsetEnd=”0dp”  and app:contentInsetStart=”0dp” to clear the margins.

Step #3: Set up a navigation drawer

We use DrawerLayout to add a navigation drawer to our Android xml file. Below you can find the complete code of our main activity xml file. If you are new to a navigation drawer, then make sure you follow it’s tutorial as well.


Step 4: Coding the main activity file

Our navigation drawer contains a listview on the left hand side and a toolbar which fits the full width of the screen. Lets get started with the main activity of the navigation drawer example. To implement a navigation drawer with a toolbar, you need to extend your activity from the ActionBarActivity.

How do you use a toolbar as an action bar?

  1. The setSupportActionBar(toolbar) method helps to add toolbar as an action element. It behaves very similar to the action bar.
  2. We use the code below to enable the icon at the left side of the toolbar. By clicking this icon, the listview will slide from the left hand side of the screen. It is possible with the help of using a navigation drawer with the toolbar.
  3. We use ActionBarDrawerToggle to tie a navigation drawer and a toolbar. We pass the reference of drawerlayout and the toolbar to the ActionBarDrawerToggle’s constructor.

The complete code of for a navigation drawer using a toolbar example is given below.

Screenshot of Android navigation drawer using a material design

android toolbar

When you click on the button, a sliding menu will appear from the left side.


This is the basic example of developing an application with a navigation drawer. You can add more features to it. You can learn how to populate a listview with an array adapter or any other data source.