Creating A Material Design Navigation Drawer

For those of you who haven’t upgraded to Android Studio 1.4 yet, you may not have realized there is a new Navigation Drawer template in the New Project menu. While templates are great, they don’t always give you the full story. Modifying the Navigation View can be tricky if you don’t know where to look, and you may not understand why certain things are written as they are. This post is going to walk you through the process of creating your own Navigation View, and discussing some of the differences between this and the previous model. Here is a quick look at what we’ll be building:

Android Essence

The XML

The first thing that’s changed is that we no longer need a fragment object to build our Navigation Drawer in the XML. We can use a NavigationView, which according to docs:

Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.

The NavigationView should still belong inside a DrawerLayout, as we did previously. There are two attributes that may be new to you: headerLayout and menu. These attributes represent the green portion of the image above, and the menu below it, respectively. We’ll look at each of those in more depth next.

The headerLayout

The header layout is rather simple; It’s just a LinearLayout. However, it does have a few attributes to keep it up to spec. These include, but are not limited to:

  • 16dp padding
  • 160dp height
  • 16dp padding above the ImageView
  • 16dp padding between the top TextView¬†and the ImageView

The XML looks like this:

The background to the view is a gradient that was left out for simplicity.

The menu

There are two cool ways we can handle menus inside the NavigationDrawer. The first is to add a <group> tag that includes menu items and their icons. This is to handle the first four items from import to tools:

The second option is to use <item> with a menu inside. That is how we get the label ‘Communicate’ at the bottom of the Navigation View and separate these items from the rest.

The MainActivity

A personal favorite about the new NavigationView is, as I mentioned earlier, the lack of need for a fragment class. The XML above is all we need to build our NavigationView, and we can interact with it as necessary inside our Activity. All we need to do is implement OnNavigationItemSelectedListener:

This interface only requires one implementation to handle the navigation item that was selected:

The last thing you need to do is set the interface on your NavigationView inside onCreate():

That’s it! You’ve now successfully created a Material Design NavigationView! As you go on to build your own and customize them, make sure to check with the design guidelines for proper specifications.

Additional Notes

Because items in the navigation header belong to the NavigationView, this also means they belong to the Activity. Therefore, nothing fancy is required to access these elements, you can do it right inside the activity by calling findViewById(R.id.imageView). This is the ImageView item inside nav_header_main.xml.

No code was added to Github for this post as all code was sampled using the template from AndroidStudio 1.4.

Share this post...
Share on Reddit0Share on Google+3Tweet about this on TwitterShare on LinkedIn0Share on Facebook0

6 Comments


  1. Can you elaborate on how the new template can be used across multiple activities?


    1. To use it across multiple activities, you could move the NavigationView XML item into its own file, and use the tag inside each necessary activity layout. One issue you might have with this (I haven’t experimented with it yet) is that each time you create a new activity it may remove the menu selection, if an item is selected. As an alternative, you can use one activity with the NavigationView, and use fragments to display different data depending on the menu item clicked. This is typically what I do.


    1. That appears to be my mistake. I looked back at the template, the id for the ImageView is in nav_header_main.xml and is just @+id/imageView. I will correct the typo.


  2. Hi,

    It is informative but can you make a tutorial for this navigation drawer and post here. It will be of great help!!!

Leave a Reply