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:

Prerequisite:

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

Example

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

VIDEO DEMO

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

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 MainActivity.java and add the following code. In this class we are just starting NavigationView_Activity class by passing boolean data type.

12. Now mainly create NavigationMenu_Activity.java 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 Dummy_Fragment.java 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 – >

COMMENTS (4)
Reply

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

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)