Start a Project

Meet the navigation view

NavigationView makes it very easy to make a good looking material design Navigation drawer. This NavigationView is used as the replacement of existing ListView, ExpandableListView and other that were used to create a navigation menu.

Here is the Material Design Support Library that provide an all new Widget, called as NavigationView .

 compile ‘com.android.support:design:22.2.0

The advantage of using NavigationView over traditional approach is the ease in which menu can be created.

There are 2 ways to implement a NavigationView, we will see both the ways.

  1. Design time, by preparing menu file with the items
  2. Run time, by adding items into the Navigation view programatically

 We are creating NavigationView at Design time.

All we need to do is:

  1. Create drawer layout containg NavigationView.
  2. Create menu that is used to display NavigationMenu.
  3. Add Header View for the Navigation View. We will  find out what is header view in NavigationView in this post later.
  4. Finally, Initialize Views in our Activity and setNavigationItemSelectedListener  to handle click event on Navigaiton MenuItem.

Let us begin creating NavigationView for our application

i. Create layout for the Activity.

NavigationView is added as a child in the DrawerLayout where we want to display it.

activity_main.xml

ii. Creating Menu that is used as a menu to be displayed in NavigationMenu

NavigationMenu is just a simple menu that can be added in the view through XML  or dynamically at the run time.

We have added customer_menu.xml as a menu that is displayed in the NavigationView by using app:menu property of NavigationView.

app:menu=”@menu/customer_menu”

customer_menu.xml

iii. Adding Header View for the Navigation View.

Another cool thing about NavigationView is support for the HeaderView. We can pass any custom header for our HeaderView of NavigationView.

app:headerLayout=”@layout/navigation_header_view”

navigation_header_view.xml

for Circle Image Library (Add the dependency mentioned below)

compile ‘de.hdodenhof:circleimageview:1.3.0’

iv. Time to intialize all our views in the activity where we want to display the NavigationView.

Stay tuned for more on Material Design Library.
Exit mobile version