Android Navigation drawer with actionbarsherlock

We the developers used to call this thing slide0ut menu, fly-in menu or any other name. Last week it’s been made official by google on the ocassion of their annual developer event Google I/O and named them android navigation drawer.  This thing is widely popular when facebook introduced it in android and iOS apps a while ago. And there has been some google developed apps in android like google plus, and youtube as well. Here are the screenshots.

All Navigation Drawers. From left to right: youtube, Music and Facebook

In the last week of google  announced a new navigation pattern called Android navigation drawer. Along with guideline and sample which requires latest version of android support library v13. Here is how you will implement in your application.

To start working with this, you first need to update to latest android support library, which is v13. If you are using maven, It should be updated via pom.xml. As I am new to maven, I have decided to use traditional replace approach, i.e. delete the old, replace the new. :).

Layout

1 . Ok, once you have Successfully added latest support library, start editing your layout first. Here your root element of your layout xml must be

android.support.v4.widget.DrawerLayout

2 . Here you need to add android name space, an id and width and height parameter. After adding necessary parameters your code should look like below.

<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" >
</android.support.v4.widget.DrawerLayout>

3 . We are prepared to have our drawer layout, now it’s time to have a framelayout, and a list view . The list view will work as slide out items’ list, and framelayout will be kind of placeholder for your actual layout. Which eventually will be attached via fragments.

Below is the code to add them in the layout.

<FrameLayout
 android:id="@+id/content_frame"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 <!-- The navigation drawer -->
<ListView
 android:id="@+id/left_drawer"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:background="#111"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp" />

4 . Thus your final layout will look something like this.

<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" >
<FrameLayout
 android:id="@+id/content_frame"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 <!-- The navigation drawer -->
<ListView
 android:id="@+id/left_drawer"
 android:layout_width="240dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:background="#111"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

Here, we are prepared with layouts. Now it’s time to handle the layout and events in java class

Java

1. Define drawerlayout objects in onCreate method, it’s better to write a separate method for readability.

        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        
        adapter = new DrawerAdapter(this, R.array.drawerArray);        
        drawerList = (ListView) findViewById(R.id.left_drawer);        
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawer,R.drawable.ic_drawer, R.string.open_drawer,R.string.close_drawer) {
            @Override
            public void onDrawerOpened(View drawerView) {
                // TODO Auto-generated method stub
                super.onDrawerOpened(drawerView);
            }
        };

2.  Note here: our drawer is actually a listview, that allows us to write custom or predefined adapters. That gives us more flexibility and creativity to define and layout our drawer. I have made a custom adapter out of BaseAdapter to draw custom list which defines different colors and adds tags to each list item.

        drawerList.setAdapter(adapter);

3.  To Listen to each item click, we usually setOnItemClick listener on list, that’s exactly we need to do here.

 drawerList.setOnItemClickListener(this);

4.  The below line is to listen to open and close events on drawer itself.

 drawer.setDrawerListener(actionBarDrawerToggle);

5.  At this stage we have defined the layout of drawer and populated it with desired data. Now we need to listen to each click of the drawer. And we have already implemented OnItemClickListener, which asks us to override onItemClick method. On this stage we need to define and handle transactions of fragments. If you are not familiar with fragments, it’s the right time to study fragments api. This is the place where our implementations are going to differ. Here is the placeholder example for it.

    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        // TODO Auto-generated method stub
        openFragment(position);
    }

    private void openFragment(int position) {
        FragmentManager manager = getSupportFragmentManager();
        switch (position) {
        case 0:
            FragmentOne firstFragment = new FragmentOne();
            manager.beginTransaction()
                    .replace(R.id.content_frame, firstFragment).commit();
            break;
        case 1:
            FragmentTwo otherFragment = new FragmentTwo();
            manager.beginTransaction()
                    .replace(R.id.content_frame, otherFragment).commit();
            break;
        case 2:
            AppPrefsFragment prefsFragment = new AppPrefsFragment();
            manager.beginTransaction()
                    .replace(R.id.content_frame, prefsFragment).commit();
            break;

        default:
            break;
        }
        drawer.closeDrawer(drawerList);

    }

And viola!! We have our navigation drawer ready.

Notes

1. Works really well with actionbar sherlock. Infact the java part of the code above is the same code which works with actionbarsherlock. Except one thing. With ABS we can not set drawer open or close on icon click

2. As per android guidelines actionbar will always be present whether drawer is opened or not. So we have to be careful while putting action items while drawer opened or closed

3. This works well with single activity, many fragments approach. However we are free to open activities, but to provide consistency either we have to stick with fragments, or provide drawerlayout everywhere.

4. The layout elements from xml files seems to be compulsory for me (Any corrections are welcome)

5. Again, as the drawer is a list, we can do anything with that, As shown in screenshot multilayered draweritems can be possible. Adapter is our magic hat here.

Related articles

• Design Docs Update: The Navigation Drawer Is Now Officially A Standard (androidpolice.com) [They were first to predict this feature will come in google I/O.