Tutorial Double Navigation Drawer Android (Left and Right)

Hello everyone, today i gonna show you a good tutorial about how to creating double navigation drawer on left and right side.

In usual, you must be develop and application using one navigation drawer on left side, right?  But sometimes your application or your client requires double menu on left and right side. You can implement the right menu using dialog similar like navigation drawer, but it maybe not good for the future of your apps. Just a suggestion, on that case, you should use a navigation drawer to handle the menu on the right side.

Double navigation drawer

In this tutorial i will show you how to create double navigation drawer. I think this tutorial isn't hard if you have been understand about how to create left navigation drawer.

Crate the left navigation drawer from Android Studio

Think if the your application requires a right navigatio drawer after you create the left navigation drawer, so i assume you are have been create the left navigation drawer.

But a will guide you how to create the navigation drawer from Android Studio, here it is :

Open you android studio android and name your project as DoubleNavigationDrawer :

Give your project name

After name the project, click button next.

Choose minumu SDK Version

In this case i choose the fault minumun SDK, that is API 16 for Android Jelly Bean. Klik button Next.

Choose Navigation Drawer Activity

Then choose Navigation Drawer Activity as your first class. This will create the left navigation drawer (without right navigation drawer), after that give your first xml dan class file name, take a look the below image

Give the class and xml file name

Give name for your first class and xml file. In this case, just click button next.

Untuk this steps, you have succeed create the left navigation drawer. Just run the project for make sure. The next step is create the right navigation drawer.

Create the right navigation drawer

To create the right navigation drawer you have to create another menu and also there is one layout you have to modify.

Create new menu for the right navigation's items

Create a new file for the right navigation's items in res/menu. Name the new file as activity_navigation_drawer_right. Here the code :

	<?xml version="1.0" encoding="utf-8"?>
	<menu xmlns:android="http://schemas.android.com/apk/res/android">
	<group android:checkableBehavior="single">
	<item
	android:id="@+id/nav_camera_right"
	android:icon="@drawable/ic_menu_camera"
	android:title="Import" />
	<item
	android:id="@+id/nav_gallery_right"
	android:icon="@drawable/ic_menu_gallery"
	android:title="Gallery" />
	<item
	android:id="@+id/nav_slideshow_right"
	android:icon="@drawable/ic_menu_slideshow"
	android:title="Slideshow" />
	<item
	android:id="@+id/nav_manage_right"
	android:icon="@drawable/ic_menu_manage"
	android:title="Tools" />
	</group>
	<item android:title="Communicate">
	<menu>
	<item
	android:id="@+id/nav_share_right"
	android:icon="@drawable/ic_menu_share"
	android:title="Share" />
	<item
	android:id="@+id/nav_send_right"
	android:icon="@drawable/ic_menu_send"
	android:title="Send" />
	</menu>
	</item>
	</menu>

view raw activity_main_drawer_right.xml hosted with ❤ by GitHub

The code above will appears as items of right navigation.

After you create the right navigation's items, now modify your activity_main.xml ( or the xml file where you hosting you NavigationView).

You have to create the another NavigationView to host the right navigation's items. and change its gravity to END. Just take a look the following codes :

	<?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"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/drawer_layout"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:fitsSystemWindows="true"
	tools:openDrawer="start">
	<include
	layout="@layout/app_bar_main"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />
	<android.support.design.widget.NavigationView
	android:id="@+id/nav_view"
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_gravity="start"
	android:fitsSystemWindows="false"
	app:headerLayout="@layout/nav_header_main"
	app:menu="@menu/activity_main_drawer" />
	<android.support.design.widget.NavigationView
	android:id="@+id/nav_view_right"
	android:layout_width="wrap_content"
	android:layout_height="match_parent"
	android:layout_gravity="end"
	android:fitsSystemWindows="false"
	app:menu="@menu/activity_main_drawer_right" />
	</android.support.v4.widget.DrawerLayout>

view raw activity_main.xml hosted with ❤ by GitHub

Ok all that should be set in the xml file has been set. Now time to modify your java class.

Modify your main_menu (res/menu)

Modify your main_menu.xml (menu that hosted in page where the navigation drawer will appears). Other word this menu will displaying the right navigation drawer. Here the code :

	<?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">
	<item
	android:id="@+id/action_settings"
	android:orderInCategory="100"
	android:title="Right"
	app:showAsAction="ifRoom" />
	</menu>

view raw menu.xml hosted with ❤ by GitHub

Modify the java class

Find your class where you hosting your DrawerLayout or your NavigationView. In this case i host them in MainActivity.java.

Create new method for displaying the right navigation. In my case I named it as displayRightNavigation(). Do like the following code :

	private void displayRightNavigation(){
	final NavigationView navigationViewRight = (NavigationView) findViewById(R.id.nav_view_right);
	navigationViewRight.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
	@Override
	public boolean onNavigationItemSelected(@NonNull MenuItem item) {
	// Handle navigation view item clicks here.
	int id = item.getItemId();
	if (id == R.id.nav_camera_right) {
	// Handle the camera action
	} else if (id == R.id.nav_gallery_right) {
	} else if (id == R.id.nav_slideshow_right) {
	} else if (id == R.id.nav_manage_right) {
	} else if (id == R.id.nav_share_right) {
	} else if (id == R.id.nav_send_right) {
	}
	Toast.makeText(MainActivity.this, "Handle from navigation right", Toast.LENGTH_SHORT).show();
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	drawer.closeDrawer(GravityCompat.END);
	return true;
	}
	});
	}

view raw NavigationRight.java hosted with ❤ by GitHub

Call the method inside onCreate() method.

And your onBackPressed() method, modify like following code :

	@Override
	public void onBackPressed() {
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	if (drawer.isDrawerOpen(GravityCompat.START)) {
	drawer.closeDrawer(GravityCompat.START);
	} else if(drawer.isDrawerOpen(GravityCompat.END)){
	drawer.closeDrawer(GravityCompat.END);
	}else {
	super.onBackPressed();
	}
	}

view raw onBackPressed.java hosted with ❤ by GitHub

Once again, modify your onOptionItemSelecte(MenuItem item) look like the follows :

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	int id = item.getItemId();
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	if (id == R.id.action_settings) {
	drawer.openDrawer(GravityCompat.END);
	}
	return super.onOptionsItemSelected(item);
	}

view raw onOpstionItemSelected.java hosted with ❤ by GitHub

Full Code Of Java Class

	package com.putuguna.doublenavdrawer;
	import android.os.Bundle;
	import android.support.annotation.NonNull;
	import android.support.design.widget.FloatingActionButton;
	import android.support.design.widget.Snackbar;
	import android.view.View;
	import android.support.design.widget.NavigationView;
	import android.support.v4.view.GravityCompat;
	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.Menu;
	import android.view.MenuItem;
	import android.widget.Toast;
	public class MainActivity extends AppCompatActivity
	implements NavigationView.OnNavigationItemSelectedListener {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
	setSupportActionBar(toolbar);
	FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
	fab.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
	.setAction("Action", null).show();
	}
	});
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
	this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
	// drawer.setDrawerListener(toggle);
	toggle.syncState();
	NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
	navigationView.setNavigationItemSelectedListener(this);
	//display the right navigation drawer
	displayRightNavigation();
	}
	@Override
	public void onBackPressed() {
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	if (drawer.isDrawerOpen(GravityCompat.START)) {
	drawer.closeDrawer(GravityCompat.START);
	} else if(drawer.isDrawerOpen(GravityCompat.END)){
	drawer.closeDrawer(GravityCompat.END);
	}else {
	super.onBackPressed();
	}
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	// Inflate the menu; this adds items to the action bar if it is present.
	getMenuInflater().inflate(R.menu.main, menu);
	return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
	int id = item.getItemId();
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	if (id == R.id.action_settings) {
	drawer.openDrawer(GravityCompat.END);
	}
	return super.onOptionsItemSelected(item);
	}
	@SuppressWarnings("StatementWithEmptyBody")
	@Override
	public boolean onNavigationItemSelected(MenuItem item) {
	// Handle navigation view item clicks here.
	int id = item.getItemId();
	if (id == R.id.nav_camera) {
	// Handle the camera action
	} else if (id == R.id.nav_gallery) {
	} else if (id == R.id.nav_slideshow) {
	} else if (id == R.id.nav_manage) {
	} else if (id == R.id.nav_share) {
	} else if (id == R.id.nav_send) {
	}
	Toast.makeText(MainActivity.this, "Handle from navigation right", Toast.LENGTH_SHORT).show();
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	drawer.closeDrawer(GravityCompat.START);
	return true;
	}
	/**
	* this method used for displaying the right navigation drawer
	*/
	private void displayRightNavigation(){
	final NavigationView navigationViewRight = (NavigationView) findViewById(R.id.nav_view_right);
	navigationViewRight.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
	@Override
	public boolean onNavigationItemSelected(@NonNull MenuItem item) {
	// Handle navigation view item clicks here.
	int id = item.getItemId();
	if (id == R.id.nav_camera_right) {
	// Handle the camera action
	} else if (id == R.id.nav_gallery_right) {
	} else if (id == R.id.nav_slideshow_right) {
	} else if (id == R.id.nav_manage_right) {
	} else if (id == R.id.nav_share_right) {
	} else if (id == R.id.nav_send_right) {
	}
	Toast.makeText(MainActivity.this, "Handle from navigation right", Toast.LENGTH_SHORT).show();
	DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	drawer.closeDrawer(GravityCompat.END);
	return true;
	}
	});
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

That's all about the tutorial. Run your project. Hope it works well, feel free to ask me by post your comment.

Download the project here : LINK GITHUB