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