Home / UI / Material Design / Navigation View using Design Support Library – Tutorial
Navigation View using Design Support Library - Tutorial

Navigation View using Design Support Library – Tutorial

Google announced Material Design Support Library in their Google IO 2015 Few days back. In this tutorial we are going to build Navigation Drawer using one of the component of the material design library and that’s Navigation View, Navigation View using Design Support Library makes it very easy to make a good looking material design Navigation drawer, it was taking a lot of steps to do that before Android Design Support Library which made it really simple to build Navigation drawer.

Here is the Navigation View using Design Support Library final product:

Navigation View using Design Support Library

Quick Overview:

Navigation View has two main components which you can easily implement, these components are:

1Header View

This represents the top part of the navigation drawer, which holds the profile picture, name and email etc. You need to define this in a separate layout file as we will implement in the tutorial.

2Menu

This is the menu you want to show below your header, this is defined just like you define menu for your overflow menu.

So the Navigation View is a container for the HeaderView and Menu which you are going to use in your NavigationDrawer. So first we are going to build this Navigation View with its two main components.

Navigation View using Design Support Library – Tutorial

1. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Blank Activity and proceed.

2. We need to add Material Design Support Library so we can use it, so open build.gradle file and add the following code:

3. Let’s add some styles, Open colors.xml under res ⇒ values and add below color resources. If you don’t find colors.xml, create a new file with the name.

Also Open styles.xml under res ⇒ values and add below color resources, that will customize the app so it will look like the screenshot above.

4. Now lets build the first component of the Navigation View which is the drawer header, under  res ⇒ layout create a new layout file call it drawer_header.xml then add the following code to it:

5. Implement the second part of the Navigation View which is the menu that holds some labels and icons, go to res ⇒ menu then create a new menu file called menu_drawer.xml and add the following code:

Note: You can get the icons used in Navigation View menu form Google Icons, and it’s packaged with the source code.

6. Now we need to gather parts, lets create a Navigation View and add it’s two parts (header, menu) into it. All this work is done inside main_activity.xml.

Before we add the Navigation View we need to setup the main layout, so we need a DrawerLayout and set it as the root view of the activity and it will has two main children, one is the content of the activity so you can add Text, Buttons, etc… and the other child is the Navigation View.

There are three main attributes you can see in Navigation View object:

gravity: which makes the Navigation View slide form left or right, if you set it to “start” that means that it will slide from left.

app:headerLayout: which need a path to the layout of the header we just created drawer_header.xml.

app:menu: which  need a path to the layout of the menu file we just created menu_header.xml.

So the final code of the main_activity.xml will look like this:

7. Now the Java part, lets go to MainActivity.java and make use of the xml files we made. Steps will be as follows:

  • Instantiate an obejct from Toolbar. Make sure you import the right version of it (support.v7.widget.Toolbar)
  • Instantiate an obejct from DrawerLayout and NavigationView then make a reference for their xml objects.
  • Instantiate an obejct from ActionBarDrawerToggle which will wrap and connect all parts together (DrawerLayout, NavigationView, ToolBar)
  • Our MainActivity should implement NavigationView.OnNavigationItemSelectedListener, in this method we will implement our actions when any of the menu items is clicked.
  • We save the selected menu item in saved instance state, so the app is smart enough to remember that last choice of the user.
  • Finally, We override onBackPressed method so that if the Navigation Drawer was opened and user pressed the back key the app will not close, but the Navigation Drawer will be closed.
10. Run the project and test it. You should able see the Navigation View using Design Support Library and it will look like this:

Navigation View using Design Support Library

Download Source Code

 

Summary
Article Title
Navigation View using Design Support Library - Tutorial
Description
Build Navigation View using Design Support Library was easy to build Navigation drawer using Navigation View introduces in Androi Design Support Library
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

featured_image

Material Design Icons with Android Studio Plugin Drawable Importer – Library #1

In this tutorial we are having Material Design Icons with Android Studio Drawable Importer Plugin which …

8 comments

  1. Nice article. I have a few questions still.

    In the styles.xml file why having some names prefixed with the android: value, and not others ?

    Isn’t the statement: app:menu: which need a path to the layout of the menu file we just created menu_header.xml.
    in fact not supposed to be: app:menu: which need a path to the layout of the menu file we just created menu_drawer.xml.

    Reading the statement: gravity: which makes the Navigation View slide form left or right, if you set it to “start” that means that it will slide from left.
    how to make it start from the right ?

    In the code statement: R.menu.menu_main isn’t the menu_main supposed to be simply main as in R.menu.main ?

    Why having two methods onOptionsItemSelected() and onNavigationItemSelected() ? Isn’t the onNavigationItemSelected method the one we are interested in ? Are we having two sorts of selection at play here ? One selection from the navigation drawer and another one from a menu drawer ? I thought the article was about a navigation drawer only…

    Thanks !

  2. #android_gifts

    Hi Stephane, Thanks for your feedback, that’s really appreciated !

    1. In styles.xml some has names prefixed with android: , to support all versions of android not only lollipop. because android:colorPrimaryDark not supported in pre-lollipop versions !

    2. I don’t know what actually you mean but as we said the Navigation View consists of two parts the header (app:headerLayout) and the menu (app:menu) so we created two separate files for each of them and attached it in NavigationView widget in main_activity.xml

    3. To make it start from right change gravity from “start” to “end”.

    4. You can rename the menu file as you like, in my case the default was menu_main, you can click right on this file -> refactor -> rename.

    5. Yes we aren’t interested in onOptionsItemSelected() in this tutorial but this method is implemented by default in the activity to handle menu actions like settings button or whatever, NOT the navigation drawer actions

    To handle navigation drawer actions we use method onNavigationItemSelected.

    Let me know if you have any other questions or feedback about the website, you can follow us on facebook we will launch our page very soon https://www.facebook.com/AndroidGifts , Thanks !

  3. May I ask where you got this 22.2.0 version of the dependency ?

    The latest sdk download doesn’t seem to have it.

    • #android_gifts

      I’m using android studio, just write the two lines above in build.gradle and if you don’t have this version it will ask to update and SDK for this version.

  4. I was only pointing a typo 🙂 It needs to read menu_drawer.xml

    which need a path to the layout of the menu file we just created menu_drawer.xml.

  5. As a newbie, I now see a navigation drawer can be based on a fragment. I wonder when to use a fragment and if it would make sense to have one here in this example.

    • #android_gifts

      You can use fragments in navigation view as we as activities, but for sorry in this example we are interested in the navigation view itself and its parts, maybe next tutorial will have an example for fragment, you can tell us about any tutorials you need and we will afford that soon !

      Thanks

Leave a Reply