DrawerLayout Example
Contents
Introduction
Although Android Studio can generate an Activity that uses a DrawerLayout, it also adds a lot of boilerplate Java and XML files that do not make it easy to understand. This is a simple DrawerLayout example that uses 1 XML layout file and 1 Java Activity file. This example changes the text in a TextView whenever a drawer item is tapped.
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">
<RelativeLayout 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: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="Simple DrawerLayout example." />
</RelativeLayout>
<!-- The navigation drawer -->
<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="#CCCCCC"/>
</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">DrawerLayoutExample</string>
<string-array name="menuitems">
<item>Menu Item 0</item>
<item>Menu Item 1</item>
<item>Menu Item 2</item>
</string-array>
</resources>
Activity
Our MainActivity is responsible for setting up the DrawerLayout and ListView behaviour.
package org.windrealm.drawerlayoutexample;
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);
// 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 Studio project and source files for this example can be downloaded here.