ZOFTINO.COM android and web dev tutorials

Menu with Navigation View in Android

NavigationView widget is a part of design library and it follows material design guidelines. NavigationView component is mainly used with DrawerLayout to provide navigation drawer menu that follows material design.

NavigationView layout is divided into two parts. You need to define these two layout files separately. One layout is for header, which provides title, image.., and second one is for navigation items. Navigation items can be defined in menu xml file.

Activity layout needs to be defined with DrawerLayout as root element. Within the drawer layout element, first define child element for content, this can include app bar and content. Then define NavigationView element. Make sure that layout_gravity is set to start, to position navigation view from the beginning of the drawer layout.

To handle navigation click events to show content based on selection, to close drawer and to do any other actions, you need to implement NavigationView.OnNavigationItemSelectedListener and provide behavior for onNavigationItemSelected method. You can set navigation item selected listener to navigation view by calling setNavigationItemSelectedListener method and passing instance of the listener.

To close navigation view programmatically, you need to get reference of drawer layout object and call close drawer method passing navigation view object.

Navigation View Output

android navigation view example

Navigation View Code

Activity layout xml

 <!--?xml version="1.0" encoding="utf-8"?-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_nav"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.navigationdrawer.NavigationViewDrawerActivity">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/cont_layout"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp"></android.support.v7.widget.Toolbar>

            <ListView
                android:id="@+id/cont_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></ListView>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header"
            app:menu="@menu/navigation_view_menu"> </android.support.design.widget.NavigationView>

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

Navigation view header layout xml

 <!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_head"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="@color/colorNavDraw">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/head_txt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:textColor="@android:color/holo_orange_dark"
    android:textSize="50dp"
    android:text="ZOFTINO"></TextView>
 </LinearLayout>
 

Navigation view menu xml

 <!--?xml version="1.0" encoding="utf-8"?-->
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
    <item android:id="@+id/mfashion"  android:title="@string/mens_fashion"></item>
    <item android:id="@+id/wfashion"  android:title="@string/womens_fashion"></item>
    <item android:id="@+id/electronics"  android:title="@string/electronics">
        <menu>
            <item
                android:id="@+id/mobiles"
                android:icon="@drawable/phone"
                android:title="@string/mobiles"></item>
            <item
                android:id="@+id/tablets"
                android:icon="@drawable/tablet"
                android:title="@string/tablets"></item>
        </menu>
    </item>
    <item android:id="@+id/appliance"  android:title="Appliances"></item>
    <item android:id="@+id/auto"  android:title="Auto"></item>
    <item android:id="@+id/accessories"  android:title="Accessories"></item>
    <item android:id="@+id/travel"  android:title="Travel"></item>
    </group>
</menu>
 

Activity

 package com.zoftino.navigationdrawer;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class NavigationViewDrawerActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private NavigationView nv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view_drawer);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);

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

        nv = (NavigationView)findViewById(R.id.navigation);
        nv.setNavigationItemSelectedListener(navSelectListener);
    }

    private NavigationView.OnNavigationItemSelectedListener navSelectListener = new NavigationView.OnNavigationItemSelectedListener(){

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            showContent((String)item.getTitle());
            item.setChecked(true);
            mDrawerLayout.closeDrawer(nv);
            return true;
        }
    };

    private void showContent(String itemTitle){
        ListView lv = (ListView) findViewById(R.id.cont_list);
        lv.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_activated_1, CouponStoreData.storeCoupons.get(itemTitle)));
    }

}
 

How to open navigation view on touching app bar icon

In the above navigation view example, we have seen how to implement navigation view that can be opened on swiping left to right. But there is no way users know that there is a hidden navigation menu in your app. To make it obvious for user, it is a good practice to integrate navigation view with app bar.

Support library provides ActionBarDrawerToggle class that allows you to just do that. It even allows you to listen to drawer close and open events and do some action on those events.

App bar home button can be used to open navigation view on clicking it. In onOptionsItemSelected method, gets called on clicking an action on app bar, you need to just call onOptionsItemSelected method of ActionBarDrawerToggle, as shown in below example, to show navigation view.

android navigation view app bar example

Activity layout xml

 <!--?xml version="1.0" encoding="utf-8"?-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:id="@+id/activity_nav"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.navigationdrawer.NavigationViewDrawerActivity">

    <android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp"></android.support.v7.widget.Toolbar>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/cont_layout"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <ListView
                android:id="@+id/cont_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></ListView>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/header"
            app:menu="@menu/navigation_view_menu"></android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
 

Activity

 package com.zoftino.navigationdrawer;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class NavigationViewActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private NavigationView nv;
    ActionBarDrawerToggle actionBarDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view_appbar);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);
        myToolbar.setNavigationIcon(R.drawable.ic_drawer);

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

        nv = (NavigationView)findViewById(R.id.navigation);
        nv.setNavigationItemSelectedListener(navSelectListener);

        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,
                mDrawerLayout,
                myToolbar,
                R.string.drawer_open,
                R.string.drawer_close){
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
            }
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
        };
        mDrawerLayout.addDrawerListener(actionBarDrawerToggle);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    private NavigationView.OnNavigationItemSelectedListener navSelectListener = new NavigationView.OnNavigationItemSelectedListener(){

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            showContent((String)item.getTitle());
            item.setChecked(true);
            mDrawerLayout.closeDrawer(nv);
            return true;
        }
    };

    private void showContent(String itemTitle){
        ListView lv = (ListView) findViewById(R.id.cont_list);
        lv.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_activated_1, CouponStoreData.storeCoupons.get(itemTitle)));
    }
}