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.
<!--?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>
<!--?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>
<!--?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>
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)));
}
}
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.
<!--?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>
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)));
}
}