Free Android app covering all aspects of addiction, including prevention and treatment

Drawer Navigation

  • Written by  Clive

Using Navigation Drawers in your apps

Drawer Navigation drawer icon

The Navigation Drawer is a panel where you can put your navigation options. The panel is hidden off-screen and displays when the user swipes it onto the screen.

You can also use the app icon as a button to open and close the drawer.

Drawer Navigation drawer diagram

The Navigation Drawer slides in from the side of the screen and partially hides the main screen

Our tutorial will show you how to use Navigation Drawers in your apps.

The tutorial app: a summary

We display a list of famous people’s names in a drawer, well maybe not so famous!

The user can open the drawer by swiping it on to the screen. They can also click on the app button to open and close the drawer. The drawer partially covers the screen.

The open draw displays a list of names. Selecting a name displays a memorable quote by that person, well maybe not so memorable!

Once an item has been selected, the drawer closes. We use a fragment to show the selected item in the activity.

Here are a couple of screenshots:

Drawer Navigation screenshot1

Open the drawer by pressing the app icon or touch the screen on the left and slide to the right

Drawer Navigation screenshot2

The open drawer partially covers the screen. Close the drawer by pressing the app icon or touch and slide to the left. It also closes when an item is selected

Drawer Navigation screenshot3

The selected name is displayed in the action bar while their quote appears on the screen

Drawer Navigation screenActionbar1

The arrow on the left indicates that there is a drawer that can be opened. The overflow menu and action item are displayed in the action bar

Drawer Navigation screenActionbar2

The arrow on the left is smaller, indicating that the drawer is open. The app’s name appears in the action bar while the action item does not. The overflow menu button is still there

Drawer Navigation screenActionbar3

An item has been selected from the list in the drawer. The drawer closes and the arrow icon is now full size. The app name has also been replaced by the selected name and the action item and overflow menu are now both in the action bar

Note that the look of the drawer and Action Bar depends on the theme. We're using the Theme.AppCompat theme.

The Activity

All the work is done in the activity.

We want our app to work on Froyo devices (API Level 8) and above so we use the Support Library. Make sure that you import the Support Library classes.

Our activity extends the ActionBarActivity class, allowing us to use the Action Bar on earlier devices.

The List

We initialise the list in the activity’s onCreate() method:

Drawer Navigation initialise Drawer List

Initialise the list in onCreate. We also set up the adapter and on-click listener here

Note the following:

  • mListItemsArray – we’re using a string array that we have defined in the res/values/strings.xml file
  • mDrawerLayout – this is the layout that we’ll use for our drawer
  • mDrawerListView – this is the list view that will contain our list in the drawer
  • setAdapter – we set the adapter that we’ll use to supply the list to the list view
  • ArrayAdapter – the array adapter gets the data out of an array and passes it to the list view. Our array adapter has three parameters:
    • The context
    • The ID of the layout that we’ll use to display each of the list items in the list
    • The array containing the list items
  • setOnItemClickListener – interface callback that listens for and handles the list item selections

The layout file

Here’s the code for the activity’s layout file, res/layout/activity_main.xml:

Drawer Navigation activity Layout

Our activity’s layout where we use a FrameLayout as the container for the fragment

Note the following:

  • DrawerLayout – the top-level container for window content. It allows us to slide in the interactive drawer from off-screen
  • FrameLayout – this is our primary content view. It’s where we’ll display our fragment. It must be the first child of the DrawerLayout and its width and height must match the parent’s width and height
  • ListView – the drawer view. This is where we put our list
  • android:layout_gravity=”start” – used for right-to-left languages. The drawer will appear on the left
  • android:layout_width – this is the width of the drawer. Use a fixed width. Make it narrower than the screen so that the user can see part of the screen below
  • choiceMode – we’re only allowing a single list item to be selected at a time
  • android:divider – this is the area between the list items

The Toggle

We want the user to be able to use the app icon to open and close the drawer.

Drawer Navigation drawer toggle

Pressing the frowning face app icon in the Action Bar opens and closes the drawer

To make this happen, we need to include this code:

Drawer Navigation drawer toggle

Setting up the app icon to act as a toggle button to open and close the Navigation Drawer

Note the following:

  • setHomeButtonEnabled – we enable the app icon so that it appears in the Action Bar
  • setDisplayHomeAsUpEnabled – we enable the app icon to navigate one level up when pressed. We can monitor this in the onOptionsItemSeleted() method
  • ActionBarDrawerToggle – allows us to use the app icon to interact with the drawer. It also allows us to make changes to the Action Bar and the menu items displayed in it. It receives 5 parameters:
    • The hosting activity
    • The drawer layout
    • The image that we display in the Action Bar to indicate whether the drawer is open or closed
    • A string describing that the drawer is open (for accessibility purposes)
    • A string describing that the drawer is closed (for accessibility purposes)
  • onDrawerClosed – called when the drawer is closed. We change the title to display in the Action Bar to that of the selected list item
  • onDrawerOpened –called when the drawer is open. We change the title to display in the Action Bar to that of the app
  • supportInvalidateOptionsMenu – this invalidates the options menu and ensures that onPrepareOptionsMenu() is called.  This will rebuild the menu to reflect any changes
  • setDrawerListener – we set the listener that will listen for when the drawer is opened and closed

Hook into the Activity’s onPostCreate() & onConfigurationChanged() methods

We’re using the Action Bar drawer toggle, so we must call:

  • syncState – call it in the activity’s onPostCreate() method when the activity is being restored. It synchronises the state of the drawer indicator and the drawer it’s linked to
  • onConfigurationChanged – call it in the activity’s onConfigurationChanged() method. We use it to pass any configuration changes on to the drawer toggle

Drawer Navigation drawer onPostCreate

Use the activity’s onPostCreate() and onConfigurationChanged() methods to synchronise and update the toggle after device configuration changes

The Options Menu

We have an options menu.

One menu item is displayed in the overflow menu and another in the Action Bar as an Action item.

onCreateOptionsMenu()

onCreateOptionsMenu is called once to create the menu by inflating our menu file (res/menu/main.xml).

Here’s the code:

Drawer Navigation drawer menuItems

Use your custom namespace to show Action items in the Action Bar

Note the following:

  • we have two menu items. The first will only be shown in the overflow menu. The second will always be shown in the Action Bar as an Action item
  • my_drawer_tutorial_app – we use our custom namespace here because we’re using the Support Library classes

Check out Using Android’s Action Bar for more on using the Support Library and the Action Bar.

onPrepareOptionsMenu()

onPrepareOptionsMenu  is called to prepare the menu before it’s displayed. We make suitable changes here before the menu is displayed.

Calling supportInvalidateOptionsMenu in onDrawerOpened and onDrawerClosed ensures that onPrepareOptionsMenu() is called to rebuild the menu before it’s displayed.

Drawer Navigation drawer onPrepareOptionsMenu()

onPrepareOptionsMenu rebuilds the menu before it is displayed

Note the following:

  • isDrawerOpen – checks if the drawer is in the open state. It returns a boolean value which we assign to drawerOpen
  • setVisible – we don’t want to show the Action item in the Action Bar if the drawer is open. We use the opposite value of drawerOpen to show or hide the Action item

onOptionsItemSelected()

onOptionsItemSelected  is called when a menu item has been selected.

As we’ve enabled the app icon to be used as a Home button, we can listen for when it’s clicked here.

We’re using the Action Bar Drawer Toggle so we call the ActionBarDrawerToggle’s onOptionsItemSelected() method:

Drawer Navigation drawer toggle Item Selected

Return true if the app icon has been pressed

Note the following:

  • onOptionsItemSelected - if it returns true, it means the app icon in the action bar had been pressed and everything has been taken care of. We can leave without any further processing
  • if it returns false, it means one of the menu items has been selected so we can use the switch statement to process this selection. It’s either the Action menu item or the overflow menu item that has been selected. In either case, we display an appropriate Toast message

Listening for when the user selects an item in the drawer’s list

When the user selects an item in the drawer’s list, our DrawerItemClickListener’s onItemClick() method is executed. It calls the selectItem() method, passing it the position in the list of the selected item.

Selecting an item

Here’s the code for the selectItem() method:

Drawer Navigation selectItem

We create a new fragment when a drawer list item is selected

Note the following:

  • position – the position of the selected item in the drawer’s list
  • fragment – we create a new fragment that we’ll display in the activity
  • args – we pass the position value as an argument in a Bundle to the fragment. It’s used when creating the fragment to display the correct quote
  • getSupportFragmentManager – we’re using the Support Library so use it’s equivalent of getFragmentManager to get an instance of the fragment manager
  • replace – we replace whatever’s currently displaying in the container with this new fragment. We pass two parameters:
    • the container in which to put the fragment. This is the FrameLayout in the activity_main.xml file
    • our new fragment
  • setItemChecked – sets the checked state of the selected drawer’s list item to true
  • setTitle – we change the title to display in the Action Bar to that of the selected name
  • closeDrawer – we’re finished, so we can close the drawer

The Fragment

Each time the user selects an item in the drawer; a new fragment is created and displayed in the activity.

Here’s the code for that fragment:

Drawer Navigation fragment

We create the fragment’s User Interface in onCreateView()

Note the following:

  • arrayIndex – this is the position of the selected item in the drawer’s list. It was passed as a construction argument to the fragment
  • textViewQuote – this is the text view where we’ll display the quote text. It’s in the res/layout/fragment_quotes.xml file
  • quote – we get the quote string out of the array. We use the selected item’s position value as the array index
  • quoter - we get the quoter string out of the array. We use the selected item’s position value as the array index
  • both arrays can be found in the res/values/strings.xml file
  • setText – we set the quote text to display in the main screen
  • setTitle – we set the quoter text to display in the Action Bar

Need to brush up on fragments? Check out Dynamic layouts using fragments.

Please note that this tutorial aims to show you the basics of using a Navigation Drawer. You should also consider Android’s design principles when using Navigation Drawers.

I hope that you have found this tutorial helpful.

If you're interested in brushing up on Fragments, why not have a look at Dynamic layouts using Fragments.

And if you need more info on ArrayAdapters and lists, have a look at our Android ListView tutorial.

This tutorial was created using Android Studio. You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.