Android Navigation Drawer on both sides

This is yet another post on Navigation Drawer pattern recently introduced in Google I/O 2013.

This pattern is certainly not new, and has been around for quite some time. Sliding Menu has been my favourite implementation so far. It supports left and right mode, with many other configurable options like size of the slide menu, movement behind it, etc. However, the navigation drawer provided by android compat library differs in the presentation of the concept.

Navigation Drawer has chosen to keep Action Bar as well as the main view intact, and appears as an overlay on top of the view. It works really smooth and looks great too. The other advantage here is that Google is adopting this approach on all its flagship products and hence would be instantly recognisable. One drawback however, is that it is currently not supported on gingerbread and lower devices. Though, it should soon be available along with ActionBarCompat that was announced during the I/O.

On to the point now.. The implementation of Navigation Drawer is fairly straight-forward and documented very nicely here. Here I’d mention an approach using which you could use navigation drawer on both left and right side in the same view. This is useful for following reasons:

1. You want to use the left side drawer for Navigation purpose and right side drawer for things like ‘Filter’, ‘Notifications’ etc.

2. You’d like a similar feel for overlays that appear on the app. Using it on both sides, gives a very smooth flow and retains the same behaviour (peeking, smooth sliding and edge touch).

On to the implementation:

This would be an extension to the application provided as example in the documentation section. So, first get the example app running and then try this method.

Add another ListView for the right side drawer, and instead of “start” use the layout_gravity as “end”. So your final layout file would look like following


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

<ListView
 android:id="@+id/left_drawer"
 android:layout_width="400dp"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

<ListView
 android:id="@+id/right_drawer"
 android:layout_width="400dp"
 android:layout_height="match_parent"
 android:layout_gravity="end"
 android:choiceMode="singleChoice"
 android:divider="@android:color/transparent"
 android:dividerHeight="0dp"
 android:background="#111"/>

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

In the activity, get a handle to both the list views. (By the way, they could be any other views as well..). Now whenever you need to open the right side menu, just call the openDrawer method on the drawer layout, providing gravity as END.


mDrawerLayout.openDrawer(Gravity.END);

That’s it, now you could open the navigation drawer on both sides.

Now, you’d like to close one drawer on opening the other drawer.. Use the closeDrawer method at appropriate location to close the drawer.


mDrawerLayout.closeDrawer(Gravity.END);

That’s pretty much it. The drawers close and open in a very smooth manner and provide a pleasant experience to the user.

Happy android hacking..

Advertisements

13 thoughts on “Android Navigation Drawer on both sides

  1. Thanks for your post, it was very helpful.. I’m wondering how I could add the menu button on the right side, like the one that implemented on Facebook, that opens you the chat?. To have the same behaviour as the “Up” Button on the left side of the Naivgation Drawer?

    1. If you’re using action bar, you could just add a menu to it, will appear on the right. With a custom layout, you could just use an image view/button on the right. On tap of either, you can launch the drawer layout on the right.
      Hope this helps.

  2. Hi Satya, great article! Do you know by any chance how to have the drawerToggle to only respond to one of the navigation drawers? Thanks in advance!

      1. You need to override the onDrawerSlide method of ActionBarDrawerToggle and set the slideOffset to 0 if the drawer is right drawer

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset)
        {
        if(drawerView!=null && drawerView == rightDrawerListView){
        super.onDrawerSlide(drawerView, 0);
        }else{
        super.onDrawerSlide(drawerView, slideOffset);
        }
        }

        This worked for me similar to Google+.

      2. You need to override the onDrawerSlide method of ActionBarDrawerToggle and set the **slideOffset to 0** if the drawer is right drawer

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset)
        {
        if(drawerView!=null && drawerView == rightDrawerListView){
        super.onDrawerSlide(drawerView, 0);
        }else{
        super.onDrawerSlide(drawerView, slideOffset);
        }
        }

        This worked for me similar to Google+.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s