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.

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

We are creating NavigationView at Design time.

All we need to do is:

Create drawer layout containg NavigationView.
Create menu that is used to display NavigationMenu.
Add Header View for the Navigation View. We will find out what is header view in NavigationView in this post later.
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

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

//Content Pane as the first child of the DrawerLayout
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

     <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

      <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    </LinearLayout>

// Navigation View as the second child of the DrawerLayout
    <android.support.design.widget.NavigationView
      android:id="@+id/navigation_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      app:menu="@menu/customer_menu"
      app:headerLayout="@layout/navigation_header_view" />
</android.support.v4.widget.DrawerLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

//Content Pane as the first child of the DrawerLayout

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?actionBarSize"

android:background="?attr/colorPrimary"

android:elevation="4dp"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<FrameLayout

android:id="@+id/fragment"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

// Navigation View as the second child of the DrawerLayout

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:menu="@menu/customer_menu"

app:headerLayout="@layout/navigation_header_view" />

</android.support.v4.widget.DrawerLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/customer_menu"
        android:checkableBehavior="single">
        <item
            android:id="@+id/home"
            android:icon="@drawable/ic_home"
            android:title="@string/home" />
        <item
            android:id="@+id/dashboard"
            android:icon="@drawable/ic_dash26"
            android:title="@string/dashboard_action_title" />
        <item
            android:id="@+id/mywishlist"
            android:icon="@drawable/ic_wishlist26"
            android:title="@string/mywishlist_action_title" />
        <item
            android:id="@+id/myorders"
            android:icon="@drawable/ic_order"
            android:title="@string/myorder_action_title" />
        <item
            android:id="@+id/myproreview"
            android:icon="@drawable/ic_star"
            android:title="@string/myproreview_action_title" />
        <item
            android:id="@+id/accountinfo"
            android:icon="@drawable/ic_acc_info"
            android:title="@string/accountinfo_action_title" />
        <item
            android:id="@+id/addrbook"
            android:icon="@drawable/ic_book26"
            android:title="@string/addrbook_action_title" />
        <item
            android:id="@+id/mydownloads"
            android:icon="@drawable/ic_down26"
            android:title="@string/mydownloads_action_title" />
    </group>
</menu>

<?xml version="1.0" encoding="utf-8"?>

<group

android:id="@+id/customer_menu"

android:checkableBehavior="single">

<item

android:id="@+id/home"

android:icon="@drawable/ic_home"

android:title="@string/home" />

<item

android:id="@+id/dashboard"

android:icon="@drawable/ic_dash26"

android:title="@string/dashboard_action_title" />

<item

android:id="@+id/mywishlist"

android:icon="@drawable/ic_wishlist26"

android:title="@string/mywishlist_action_title" />

<item

android:id="@+id/myorders"

android:icon="@drawable/ic_order"

android:title="@string/myorder_action_title" />

<item

android:id="@+id/myproreview"

android:icon="@drawable/ic_star"

android:title="@string/myproreview_action_title" />

<item

android:id="@+id/accountinfo"

android:icon="@drawable/ic_acc_info"

android:title="@string/accountinfo_action_title" />

<item

android:id="@+id/addrbook"

android:icon="@drawable/ic_book26"

android:title="@string/addrbook_action_title" />

<item

android:id="@+id/mydownloads"

android:icon="@drawable/ic_down26"

android:title="@string/mydownloads_action_title" />

</group>

</menu>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp"
    android:background="@drawable/banner_navigation_header_view">

    <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="76dp"
        android:layout_height="76dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="24dp"
        android:src="@drawable/profile_picture"
        app:border_color="#FF000000" />

    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/email"
        android:layout_toRightOf="@id/profile_image"
        android:onClick="changeNavigationMenu"
        android:padding="4dp"
        android:text="John Doe"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/username"
        android:layout_alignParentBottom="true"
        android:layout_alignStart="@+id/username"
        android:layout_marginBottom="8dp"
        android:gravity="left"
        android:padding="4dp"
        android:text="test@webkul.com"
        android:textColor="#fff"
        android:textSize="14sp" />
  
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="190dp"

android:background="@drawable/banner_navigation_header_view">

<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/profile_image"

android:layout_width="76dp"

android:layout_height="76dp"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_marginBottom="8dp"

android:layout_marginLeft="24dp"

android:layout_marginStart="24dp"

android:src="@drawable/profile_picture"

app:border_color="#FF000000" />

<TextView

android:id="@+id/username"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_above="@+id/email"

android:layout_toRightOf="@id/profile_image"

android:onClick="changeNavigationMenu"

android:padding="4dp"

android:text="John Doe"

android:textColor="#FFF"

android:textSize="14sp"

android:textStyle="bold" />

<TextView

android:id="@+id/email"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/username"

android:layout_alignParentBottom="true"

android:layout_alignStart="@+id/username"

android:layout_marginBottom="8dp"

android:gravity="left"

android:padding="4dp"

android:text="[email protected]"

android:textColor="#fff"

android:textSize="14sp" />

</RelativeLayout>

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.

   mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
   navigationView = (NavigationView) findViewById(R.id.navigation_view);
   navigationMenu = navigationView.getMenu();
   navigationView.setNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

 private NavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = 
     new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
            if (menuItem.getItemId() == R.id.home) {
                Toast.makeText(getApplicationContext(), "home", Toast.LENGTH_SHORT).show();
            }
            if (menuItem.getItemId() == R.id.dashboard) {
                Toast.makeText(getApplicationContext(), "dashboard", Toast.LENGTH_SHORT).show();
            } else if (menuItem.getItemId() == R.id.mywishlist) {
                Toast.makeText(getApplicationContext(), "mywishlist", Toast.LENGTH_SHORT).show();
            } else if (menuItem.getItemId() == R.id.myorders) {
                Toast.makeText(getApplicationContext(), "myorders", Toast.LENGTH_SHORT).show();

            } else if (menuItem.getItemId() == R.id.myproreview) {
               
  Toast.makeText(getApplicationContext(), "myordmyproreviewers", Toast.LENGTH_SHORT).show();
            } else if (menuItem.getItemId() == R.id.accountinfo) {

               Toast.makeText(getApplicationContext(), "accountinfo", Toast.LENGTH_SHORT).show();

            } else if (menuItem.getItemId() == R.id.addrbook) {
                Toast.makeText(getApplicationContext(), "addrbook", Toast.LENGTH_SHORT).show();

            } else if (menuItem.getItemId() == R.id.mydownloads) {
               Toast.makeText(getApplicationContext(), "mydownloads", Toast.LENGTH_SHORT).show();
            } 
            return true;
        }
    };

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

navigationView = (NavigationView) findViewById(R.id.navigation_view);

navigationMenu = navigationView.getMenu();

navigationView.setNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

private NavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener =

new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

mDrawerLayout.closeDrawer(GravityCompat.START);

if (menuItem.getItemId() == R.id.home) {

Toast.makeText(getApplicationContext(), "home", Toast.LENGTH_SHORT).show();

}

if (menuItem.getItemId() == R.id.dashboard) {

Toast.makeText(getApplicationContext(), "dashboard", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.mywishlist) {

Toast.makeText(getApplicationContext(), "mywishlist", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.myorders) {

Toast.makeText(getApplicationContext(), "myorders", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.myproreview) {

Toast.makeText(getApplicationContext(), "myordmyproreviewers", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.accountinfo) {

Toast.makeText(getApplicationContext(), "accountinfo", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.addrbook) {

Toast.makeText(getApplicationContext(), "addrbook", Toast.LENGTH_SHORT).show();

} else if (menuItem.getItemId() == R.id.mydownloads) {

Toast.makeText(getApplicationContext(), "mydownloads", Toast.LENGTH_SHORT).show();

}

return true;

}

};

Stay tuned for more on Material Design Library.

Shubham Agarwal 14 December 2016

. . .

Meet the navigation view

Let us begin creating NavigationView for our application

Leave a Comment Cancel Reply

Message Sent!