In a previous post I explained how to create a navigation bar for your Android app. I’m going to build on top of that example a drawer where we can put other options for the user.

Android provides a Drawer Layout that was specifically created for this purpose. Since we are going to be adding the drawer to my previous example lets first look at how the original looks:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="40dip"
    android:orientation="horizontal">
    <ImageButton
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_add_black_24dp"
    style="@style/NavButton" />
    <ImageButton
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_people_black_24dp"
    style="@style/NavButton" />
    <ImageButton
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_menu_black_24dp"
    style="@style/NavButton" />
  </LinearLayout>
  <LinearLayout android:layout_height="1dip"
    android:layout_width="match_parent"
    android:background="#000">
  </LinearLayout>
</LinearLayout>

And after adding the drawer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dip"
        android:orientation="horizontal">
      <ImageButton
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:src="@drawable/ic_add_black_24dp"
        style="@style/NavButton" />
      <ImageButton
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:src="@drawable/ic_people_black_24dp"
        style="@style/NavButton" />
      <ImageButton
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:src="@drawable/ic_menu_black_24dp"
        style="@style/NavButton" />
    </LinearLayout>
    <LinearLayout
        android:layout_height="1dip"
        android:layout_width="match_parent"
        android:background="#000">
    </LinearLayout>
  </LinearLayout>
  <LinearLayout
      android:id="@+id/drawer"
      android:layout_width="300dp"
      android:layout_height="match_parent"
      android:layout_gravity="right"
      android:background="#fff"
      android:clickable="true"
      android:importantForAccessibility="no"
      android:orientation="vertical">
    <TextView
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:text="hello" />
  </LinearLayout>
</android.support.v4.widget.DrawerLayout>

A few important things: In line 2 you can see that we are wrapping everything inside a android.support.v4.widget.DrawerLayout. This takes care of most of the magic. We have two LinearLayouts inside the drawer; One starting at line 7 and the other at line 41. Line 43 specifies how wide the drawer will be when opened. Line 45 makes the drawer appear from the right as opposed to from the left. Line 47 prevents click events on top of the drawer to leak to the view behind.

Now we have a drawer in our app, but the only way to open it is by swiping from the right edge of the screen to the left:

drawer

What we want is to make it appear also when the navigation button is clicked:

menu-button

To do this we just need to call openDrawer in the DrawerLayout. Something like this would suffice:

1
2
DrawerLayout drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
drawerLayout.openDrawer(findViewById(R.id.drawer));

Now, lets add a real item to our drawer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
...
  <LinearLayout
     android:id="@+id/drawer"
     android:layout_width="300dp"
     android:layout_height="match_parent"
     android:layout_gravity="right"
     android:background="#fff"
     android:clickable="true"
     android:importantForAccessibility="no"
     android:orientation="vertical">
    <LinearLayout
       android:id="@+id/revoke_access_button"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:clickable="true"
       android:gravity="center_vertical"
       android:background="?attr/selectableItemBackground"
       android:orientation="horizontal">
      <ImageView
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:layout_margin="10dip"
         android:src="@drawable/ic_power_settings_new_black_24dp" />
      <TextView
         android:layout_weight="1"
         android:text="Sign out"
         android:layout_width="wrap_content"
         android:textSize="26sp"
         android:paddingLeft="5dip"
         android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout style="@style/Separator" />
  </LinearLayout>
...

Lines 15 and 17 above are important to make this item clickable and have a ripple effect. The end result will be something like this:

sign-out-button

From here it should be easy to customize the drawer to make it do whatever you desire.

[ android  java  mobile  programming  projects  ]
Android development with Docker android mobile projects
Installable web apps mobile programming
Android development with Docker android mobile
Create a navigation menu for your Android app mobile android java programming projects
Using the Gradle wrapper on your Android project android mobile