Navigation View using Design Support Library - Tutorial

July 25, 2015 - PRLog -- You can See full tutorial and download the source code from AndroidGifts Website ( http://www.androidgifts.com/ )

Google announced Material Design Support Library (http://android-developers.blogspot.com/2015/05/android-design-support-library.html) 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.

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

1. Header 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.

2. Menu

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

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.

4. 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

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.

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.