Simple Navigational Drawer Layout in Android

Hello Friends,

Today we are going to learn how to create Simple Navigational Drawer Layout in Android application.

Development Level : Intermediate

The Navigational Drawer is part of the suport library v4.

Navigational Drawer looks like below and of course we can modify or create its custom layout as per our requirement.

What is Navigation Drawer and how we can use it ?

The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options.

Displaying the navigation drawer

The user can bring the navigation drawer onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar.

As the navigation drawer expands, it overlays the content but not the action bar. When the drawer is fully extended, the action bar adjusts its content by replacing the current action bar title with the app name and removing all actions that are contextual to the view underneath the navigation drawer. The overflow menu with the standard action items for Settings and Help remains visible.

For more detailed article on Navigational Drawer please visit this Official Android Developer Article :

http://developer.android.com/design/patterns/navigation-drawer.html

Ok, Lets start with our application development:

Here we are going to create one simple drawer menu with simple layout which contain Menu title as color name. When we click on any color it will change the background color of our main layout screen.

First, Creating new android application with following detail showed in screenshot:

Click next and complete your new application creation wizard.

We required drawer icon for our action bar to handle drawer. To download drawer icon click below link:

http://developer.android.com/downloads/design/Android_Design_Icons_20130926.zip

It contains Navigation_Drawer_Indicator  directory.

Copy all the directory from holo_light and paste in our project's res directory.

Now we are ready to create our first drawer menu.

Create a Drawer Layout

To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

For Example in our application :

Open activity_main.xml and write following UI code for drawer layout :

<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/frame_container"   
    android:layout_width="match_parent"   
    android:layout_height="match_parent" />   
   <ListView   
    android:id="@+id/drawer_list"   
    android:layout_width="240dp" 
    android:background="#fff"  
    android:layout_height="match_parent"   
    android:layout_gravity="start" />   
  </android.support.v4.widget.DrawerLayout>   

This layout contain DrawerLayout View group:
with one FrameLayout which is our main (primary) layout of different fragments and second one is ListView that is our drawer list view.

This layout demonstrates some important layout characteristics:

• The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.
• The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden.
• The drawer view (the ListView) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).
• The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

We are ready with our drawer layout now we have to provide list to that drawer. Now we create DrawerLayout object and ListView object to fill data to it.

For that Open your MainActivity.java file and declare objects as below:

 ListView mDrawerList = null;  
 DrawerLayout mDrawerLayout = null;  
 ActionBarDrawerToggle mDrawerToggle = null;  

We create one method init() for Initialize the Drawer List:

private void init() {  
      // Initialize Listview  
      mDrawerList = (ListView) findViewById(R.id.drawer_list);  
      // Initialize drawer layout  
      mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
      // creating color string array for our drawer listview  
      String[] data_list = new String[] { "Red", "Oragne", "Blue", "Purple",  
                "Black", "Pink" };  
      // creating adatper for listview  
      ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,  
                android.R.layout.simple_list_item_1, data_list);  
      // providing adapter to listview  
      mDrawerList.setAdapter(adapter);  
 }  

After creating this method we calling it in onCreate method and executing our program.
After successful execution following output will appear.

This is work only if you touch screen left to right. Now we add drawer toggle by clicking on application icon.

For that we create one new method actionbarToggleHandler as below:

 private void actionbarToggleHandler() {  
      getActionBar().setHomeButtonEnabled(true);  
      getActionBar().setDisplayHomeAsUpEnabled(true);  
      mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,  
                R.drawable.ic_drawer, R.string.drawer_open,  
                R.string.drawer_close) {  
           @Override  
           public void onDrawerClosed(View drawerView) {  
                getActionBar().setTitle(mTitle);  
           }  
           @Override  
           public void onDrawerOpened(View drawerView) {  
                getActionBar().setTitle(mDrawerTitle);  
           }  
      };  
      mDrawerLayout.setDrawerListener(mDrawerToggle);  
 } 

This will change the UI of action bar home icon but we are not able to open our drawer with action bar home menu. To enable click event on app icon we have override two methods :

onOptionsItemSelected
Pass the event to ActionBarDrawerToggle, if it returns true, then it has handled the app icon touch event

onPostCreate

Sync the toggle state after onRestoreInstanceState has occurred.

Output Before override method and after override method:

Before : 

After :

We are ready with our simple layout. Now what next ??

Now we provide click event to each list item and change the color of background as item click.

For that we have to provide on Item click listener to ListView.

So, We create one class which implements OnItemClickListener as below:

 class DrawerItemClickListener implements OnItemClickListener {  
      @Override  
      public void onItemClick(AdapterView adapter, View view, int position, long id) {  
      }  
 }  

And than providing click listener to listview in init method:

private void init() {  
      // Initialize Listview  
      mDrawerList = (ListView) findViewById(R.id.drawer_list);  
      // Initialize drawer layout  
      mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
      // creating color string array for our drawer listview  
      String[] data_list = new String[] { "Red", "Oragne", "Blue", "Purple",  
                "Black", "Pink" };  
      // creating adatper for listview  
      ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,  
                android.R.layout.simple_list_item_1, data_list);  
      // providing adapter to listview  
      mDrawerList.setAdapter(adapter);  
      mDrawerList.setOnItemClickListener(new DrawerItemClickListener());  
      // Initializing title  
      mTitle = getResources().getString(R.string.app_name);  
      mDrawerTitle = getResources().getString(R.string.drawer_open);  
      actionbarToggleHandler();  
 }  

And providing background color change code to our listener  but before adding code please make our data_list string array global so we can access it from our listener:

 class DrawerItemClickListener implements OnItemClickListener {  
      @Override  
      public void onItemClick(AdapterView adapter, View view, int position,  
           long id) {  
           FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_container);  
           frameLayout.setBackgroundColor(Color  
                     .parseColor(data_list[position]));  
      }  
 }  

After adding click event application will run as below output :

Here the drawer is not automatically close when we click on the item. For that we have to close it manually when item selected:

for that just add below code in Itemclick listener:

mDrawerLayout.closeDrawers();

Demo for application :

Download demo application

Hope you like it.

Thank You.