Home Contact Me Tutorials

DrawerLayout with Toolbar

Contents

Introduction

This example builds on the basic DrawerLayout example. By default the drawer will appear below the action bar. To make it appear above the action bar, we can use a Toolbar. To use the Toolbar we need to add a dependency to Android Design Support Library:

compile 'com.android.support:design:22.2.0'

// Replace the default action bar with a Toolbar so the navigation drawer appears above it
Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(toolbar);

main_toolbar is the ID of a Toolbar defined in our main layout file.

You can see the difference between the old DrawerLayout and the one with a Toolbar in the following pictures.

Layout Source Listing

activity_main.xml

<?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">

    <!-- Holds the Toolbar and a nested LinearLayout-->
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- This Toolbar will be used as our action bar using setSupportActionBar() -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

        <!-- This LinearLayout will be displayed below the Toolbar and contain our "main" views -->
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin">
            <TextView android:id="@+id/messageTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DrawerLayout with Toolbar." />
        </LinearLayout>
    </LinearLayout>

    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:entries="@array/menuitems"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#EEEEEE"/>

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

The drawer is a ListView that slides in when the user taps the top-left hamburger button or swipes from the left. It is populated from the a string array.

strings.xml

<resources>
    <string name="app_name">DrawerLayout with Toolbar</string>
    <string-array name="menuitems">
        <item>Menu Item 0</item>
        <item>Menu Item 1</item>
        <item>Menu Item 2</item>
    </string-array>
</resources>

Theming

The theme for our MainActivity has been modified to use a new theme named AppTheme.NoActionBar.

<activity
            android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

</resources>

values-v21/styles.xml

<resources>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>
</resources>

Activity

Our MainActivity is responsible for setting up the DrawerLayout and ListView behaviour.

package org.windrealm.drawerlayouttoolbar;

import android.content.res.Configuration;
import android.os.Bundle;
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.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    ActionBarDrawerToggle mDrawerToggle;
    DrawerLayout mDrawer;
    TextView messageTextView;
    ListView mDrawerListView;

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

        // Get references to the TextView and DrawerLayout
        messageTextView = (TextView) findViewById(R.id.messageTextView);
        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        // Replace the default action bar with a Toolbar so the navigation drawer appears above it
        Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
        setSupportActionBar(toolbar);

        // These lines are needed to display the top-left hamburger button
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // Make the hamburger button work
        mDrawerToggle = new ActionBarDrawerToggle(this,mDrawer,R.string.app_name,R.string.app_name){
            @Override
            public void onDrawerClosed(View drawerView) {
            }

            @Override
            public void onDrawerOpened(View drawerView) {
            }
        };
        mDrawer.setDrawerListener(mDrawerToggle);
        mDrawerToggle.syncState();

        // Change the TextView message when ListView item is clicked
        mDrawerListView = (ListView) findViewById(R.id.left_drawer);
        mDrawerListView.setOnItemClickListener(new ListView.OnItemClickListener() {
           @Override
           public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
               messageTextView.setText("Menu Item at position " + position + " clicked.");;
               mDrawer.closeDrawer(GravityCompat.START);
           }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle your other action bar items...
        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

}

Downloads

The Android APK: drawerlayouttoolbar.apk

The Android Studio project: DrawerLayoutToolbar.zip