Implementing Android mini navigation drawer

The Gmail app for Android tablets on Lollipop and above introduces a new navigation drawer called the mini navigation drawer. This variant of the navigation drawer allows the menu icons to be visible when the drawer is in the collapsed state. The mini navigation drawer is also specified in Google’s material design guidelines.

Unfortunately, there are no built in Android libraries to support this type of navigation drawer. The good news is we can use a layout called SlidingPaneLayout to implement this feature.

Create a layout resource file and set SlidingPaneLayout as your parent view. SlidingPaneLayout requires two child views: a master view and a detail view. The master view will contain a list of all our menu options and the detail view will contain the content.

The master view is contained inside a fragment. When creating multi pane layouts, it is good practice to separate your panes in fragments. This keeps the code modular and each pane is contained in its own layout file. Add the master fragment class to your project.

Add the master fragment layout to your layout resources folder.

The master fragment contains a list view and uses an enumeration of menu options to populate the list.

The master fragment also contains a custom array adapter that displays the list of menu options. The custom array adapter inflates a row layout for each menu option.

Add the row layout.

Run your project and you should see something like this. When you swipe your finger right, the master layout will appear.

To show the menu icons when the drawer is in the collapsed state, we simply add a margin left to the detail view. This shifts the detail view to the right revealing a portion of the master layout that is hidden underneath the detail view when the SlidingPaneLayout is in the collapsed state.

Run your project again and this time you should see the menu icons on the left of the screen.

And there you have it! The mini navigation drawer is perfect for making menu options easily accessible to the user. If you want to try out the mini navigation drawer you can download the sample project!