Navigation View-Material Design Support Library Tutorial

Navigation View-Material Design Support Library Tutorial

Google I/O 2015 has brought a whole new set of tools for Android Developers which are meant to make our lives easier. I´d like to devote a set of articles to talk about the incredibly useful Design Support Library.

For Material Design tutorial check this link.

Navigation View

In this article, I’ll start talking about the Navigation View. Since Material Design was released, we were given a standard definition on how a Navigation Drawer must look and feel. Truth is that implementing those guidelines was rather time consuming. But now, with the navigation view, the implementation is much easier.

Navigation View represents a standard navigation menu for application. The menu contents can be populated by a menu resource file. NavigationView is typically placed inside a DrawerLayout.

We had done Navigation Drawer in earlier articles but this is too easy and too awesome.

Navigation View Xml structure:


  1. Material Design Toolbar.
  2. Fragment Implementation.
  3. Pass data between Activity.
  4. Pass data to Fragments.


In this tutorial, we are going to learn how to implement Navigation View with default and custom way.


1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is

2. Open build.gradle and include this libraries show below:

3. Open res ⇒ values and create a new xml file naming colors.xml and add the following colors to it.   

4. Open strings.xml located under res=>values folder and add following strings.

5. Create a xml for toolbar naming toolbar.xml.

6. Since we are going to learn default and custom navigation view, so we need to create two xml files for this:

  • default_navigation_view.xml
  • custom_navigation_view.xml
7. In custom_navigation_view.xml we are using drawable navigation_menu_selector i.e. custom selector, so now create a new xml file under drawable resource naming navigation_menu_selector.xml and add the following code:
8. For menu items  for Navigation View we need to create a new menu under menu directory naming navigation_menu.xml and add the following menus:
For menu icons you can download form Icons8 site and size should be 24px.

9. Now for Header View of Navigation View create new layout xml file naming header_view.xml and add your header UI in these xml.

10. Now create activity_main.xml that contains two button for starting default and custom navigation view activity.

11. Now create a java class naming and add the following code. In this class we are just starting NavigationView_Activity class by passing boolean data type.

12. Now mainly create and add the following code. In this code there is nothing to do with navigation view because we already set menu items in xml layout. So here we are just going to implement navigation view menu item click listener.

For using header view for changing text or images you can refer to setUpHeaderView() in this class.

13. We are using Dummy_Fragment in above step so we need to create a xml file naming dummy_fragment.xml.

14. For xml dummy_fragment create a java file naming and add the following code.

15. Don’t forget to declare your NavigationView_Activity inside AndroidManifest.xml.

16. Some important codes of NavigationView:

  • For accessing header view :
  • For checking menu item manually:

– for api level 23+

– for api level below 23

** where ‘0’ is the index of the menu item.

  • Getting MenuItem from the navigation view  menus.
17. Finally, all done – now develop an awesome app using navigation view.

Thanks. :)

Download Source Code


About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.


option menus are not enable how can i display them and put operations on it.


hey Nice tutorial
But how to add another fragment in Navigation view

    Hi Abhijit,

    Create a new fragment like Dummy Fragment and replace that fragment on navigation item click.


      Hello, sir just said like you I have created 2 more fragments but how to include in navigation view, can you give some example to understand.

    Hi Abhijit,

    Use the below code and call the below code on item click event of navigation view:


    //Find fragment by tag
    Fragment fr = fragmentManager.findFragmentByTag(item.getTitle().toString());

    Fragment yourFragment = new FragmentName();
    Bundle b = new Bundle();

    //If fragment is null replace fragment
    if (fr == null) {
    b.putString(“data”, item.getTitle().toString());
    dummyFragment.setArguments(b);//Set Arguments
    yourFragment, item.getTitle().toString())


Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)