Android Sliding Menu using Navigation Drawer

You might have noticed that lot of android applications introduced a sliding panel menu to navigate between major modules of the application. Previously this kind of UI was done using some third party libraries where a list view and some swiping gestures used to achieve this. But now android itself officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer.

Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the action bar.

In this tutorial we are going to learn how to use navigation drawer to add a sliding menu to your application.

DOWNLOAD CODE

Example Applications

You can see lot of popular applications like Facebook, Youtube, Google + already introduced navigation drawer menu in their applications. Following are the navigation drawer menus of multiple apps.

In order to demonstrate navigation drawer, I am taking an example of Google+ navigation drawer and explained the process to achieve the same. But before starting the project I have downloaded required icons and using photoshop I have made each icon into different dimensions for xxhdpi (144×144 px),xhdpi (96×96 px), hdpi (72×72 px) and mdpi (48×48 px) drawbles.

Also I have downloaded navigation drawer toggle icon and included in drawable folders. You can get all the images in the source code of this tutorial. We need another image to replace the action bar up icon to toggle navigation drawer. Save following images and later add them to your project.

ic_drawer.png

  

Let’s start by creating a new project..

Starting new Project

1. Create a new project in Eclipse from File ⇒ New ⇒ Android Application Project. I had left my main activity name as MainActivity.java and gave the package name as info.androidhive.slidingmenu.

2. I prepared required string variables for List View items and icon names in strings.xml. Open yourstrings.xml located under res ⇒ values and add the following code.

strings.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <string name="app_name">Slider Menu</string>     <string name="action_settings">Settings</string>     <string name="hello_world">Hello world!</string>     <string name="drawer_open">Slider Menu Opened</string>     <string name="drawer_close">Slider Menu Closed</string>           <!-- Nav Drawer Menu Items -->     <string-array name="nav_drawer_items">         <item >Home</item>         <item >Find People</item>         <item >Photos</item>         <item >Communities</item>         <item >Pages</item>         <item >What\'s Hot</item>     </string-array>           <!-- Nav Drawer List Item Icons -->     <!-- Keep them in order as the titles are in -->     <array name="nav_drawer_icons">         <item>@drawable/ic_home</item>         <item>@drawable/ic_people</item>         <item>@drawable/ic_photos</item>         <item>@drawable/ic_communities</item>         <item>@drawable/ic_pages</item>         <item>@drawable/ic_whats_hot</item>     </array>           <!-- Content Description -->     <string name="desc_list_item_icon">Item Icon</string> </resources> 3. Android introduced a newer UI element called DrawerLayout for Navigation Drawer. Open your layout file (activity_main.xml) for main activity and type the following code. Here FrameLayout is used to replace the main content using Fragments and it should be always the first child of the layout for z-index purpose. activity_main.xml <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 to display Fragments -->     <FrameLayout         android:id="@+id/frame_container"         android:layout_width="match_parent"         android:layout_height="match_parent" />     <!-- Listview to display slider menu -->     <ListView         android:id="@+id/list_slidermenu"         android:layout_width="240dp"         android:layout_height="match_parent"         android:layout_gravity="start"         android:choiceMode="singleChoice"         android:divider="@color/list_divider"         android:dividerHeight="1dp"                android:listSelector="@drawable/list_selector"         android:background="@color/list_background"/> </android.support.v4.widget.DrawerLayout>