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