Navigation Drawer – Part 2

In the previous article we got a basic navigation drawer working. In this article of this series, we’ll begin hooking it up to the ActionBar.

There are a number of things that we need to do to correctly connect the navigation drawer up to the ActionBar:

1. Connect the Home/Up button open and close the navigation drawer.
2. Change the ActionBar title when the drawer is open.
3. Hide any content-specific options menu items when the drawer is open.

To connect up the Home/Up button, we need to toggle the drawer state when it is clicked, and we also need to change the “Up” caret which appears next to the app icon in the ActionBar to indicate that the behaviour of the button has changed. Those nice folks at Google have actually provided a standard drawable resource which we can use, and this can be downloaded from here and copied in to your res/drawable-*dpi folder(s).

Any developers familiar with Android are probably already thinking about adding handlers in to onOptionsItemSelected() to handle the showing and hiding of the drawer when the Home/Up button is pressed, but actually we don’t have to.One of the new classes introduced with these new features is ActionBarDrawerToggle. This is an implementation of the DrawerListener interface that we used previously, but it hooks up the Home/Up button for us, and also manages the changing of the “Up” indicator to the Navigation Drawer indicator as well.

To use this we need to create an instance of ActionBarDrawerToggle, and then set it as the DrawerListener of the DrawerLayout. For now this will break out navigation item selection, but we’ll restore that in due course.

@Override
protected void onCreate(Bundle savedInstanceState)
{
	.
	.
	.
	drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
	drawerToggle = new ActionBarDrawerToggle(this, drawer,
			R.drawable.ic_drawer, 
			R.string.open, R.string.close);
	drawer.setDrawerListener(drawerToggle);
	getActionBar().setDisplayHomeAsUpEnabled(true);
	getActionBar().setHomeButtonEnabled(true);
	updateContent();

The 5 arguments to the ActionBarDrawerToggle constructor are:

1. The Context that the ActionBarToggle is created within.
2. The DrawerLayout that the ActionBarToggle will control.
3. The drawable to use to replace the standard “Up” indication.
4. A string resource to describe the “open drawer” action for accessibility purposes.
5. A string resource to describe the “close drawer” action for accessibility purposes.

We must also make the necessary setDisplayHomeAsUpEnabled() and setHomeButtonEnabled() calls on the ActionBar to get it to enable the Up/Home button, and display the mode indicator.

We’ve also moved the logic to display the selected Fragment in to its own method:

private int selection = 0;
private int oldSelection = -1;
private void updateContent()
{
	getActionBar().setTitle(names[selection]);
	if (selection != oldSelection)
	{
		FragmentTransaction tx = getSupportFragmentManager()
			.beginTransaction();
		tx.replace(R.id.main,
			Fragment.instantiate(MainActivity.this, 
				classes[selection]));
		tx.commit();
		oldSelection = selection;
	}
}

We also need to do some handling of the Up/Home button press in onOptionsItemSelected, but our ActionBarDrawerToggle handles all the hard work for us:

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
	if(drawerToggle.onOptionsItemSelected(item))
	{
		return true;
	}
	return super.onOptionsItemSelected(item);
}

If you run this, you’ll see that the Up/Home button now correctly shows and hides the navigation drawer, but the “Up” indication is still showing. That’s because there is another step required to hook things up. In our onPostCreate() method we need to call syncState() on the ActionBarDrawerToggle object:

@Override
protected void onPostCreate(Bundle savedInstanceState)
{
	super.onPostCreate(savedInstanceState);
	drawerToggle.syncState();
}

The reason for this is that final initialisation of the drawer state needs to be performed after the activity state has been restored. That way, if an orientation change occurs while the drawer is visible, the correct drawer state is restored following the orientation change. The change of the mode indicator also occurs here, and it is a fortunate side effect that we get a visual indication that things aren’t quite right if we omit this important step.

If we run this we can see that we now see the correct indication, and the Up/Home button now toggles the drawer state:

In the concluding article in this series we’ll look at changing the ActionBar title, and hiding any content-specific menus.

The source code for this article is available here.

© 2013 – 2014, Mark Allison. All rights reserved.

Copyright © 2013 Styling Android. All Rights Reserved.
Information about how to reuse or republish this work may be available at http://blog.stylingandroid.com/license-information.