---
title: "Navigation Drawer Implementation in Android"  
description: "Hi Everyone, Here we are going to learn how to implement a very popular UI pattern called navigation drawer list in andriod"  
author: "Anonymous User"  
published: 2015-02-04  
updated: 2019-12-17  
canonical: https://www.mindstick.com/articles/1567/navigation-drawer-implementation-in-android  
category: "android"  
tags: ["android styles", "android activity", "android layout", "android edittext", "android listview"]  
reading_time: 11 minutes  

---

# Navigation Drawer Implementation in Android

Previously we have implemented [search functionality](https://www.mindstick.com/forum/158701/how-can-implement-client-side-data-filtering-or-search-functionality-using-jquery) in listview : Simple Search [implementation](https://answers.mindstick.com/qa/44913/who-is-the-minister-of-statistics-and-programme-implementation) in android\

In this article, we are going to implement a simple [Navigation](https://www.mindstick.com/blog/62/different-navigation-in-asp-dot-net) drawer List view.

The navigation drawer is a UI [design pattern](https://www.mindstick.com/forum/34032/factory-method-design-pattern-using-c-sharp) that provides a set of menu items when the user swipes from the left edge of the [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) to the right.

In Android, a navigation drawer is available via the Android Support library from revision 13.

We can see navigation drawers on YouTube, Google, and Facebook, etc. It is a very popular way to show menu navigation nowadays.

Pre-Requisites:

- Ellipse SDK
- Android SDK
- ADT plugin

Or [Android Studio](https://www.mindstick.com/blog/10942/android-studio-vs-eclipse) and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “MindStickDrawer”.

##### Implementation objective:

To show the list of [companies](https://yourviews.mindstick.com/view/86898/tech-layoffs-us-companies-with-job-cuts) with their icons in the Navigation Drawer list view. When an item is selected then the company’s icon and name will be displayed on the screen.

##### Set String Resources

First of all set values for string resources in strings.xml

```
<?xml version="1.0" encoding="utf-8"?><resources>
    <string name="app_name">MindStickDrawer</string>    <string name="hello_world">Hello world!</string>    <string name="action_settings">Settings</string>    <string name="drawer_open">Open Navigation drawer</string>    <string name="drawer_close">Close Navigation drawer</string>
</resources> 
```

##### Creating GUIs

Now, we need to add views in our view groups, i.e. add widgets to our GUI.

We need

- A Drawer Layout (main GUI) consists of a Frame Layout (it will be shown when the user select an item from the navigation list and List view (it will show the items in list view for navigation)
- A Fragment GUI which will be set to the Frame Layout. (It consists of a [Text view](https://www.mindstick.com/forum/33384/detail-text-view-of-cell-not-showing) and an image view)
- One more Layout for holding an item in the navigation list. (It also consists of an icon and text view)

For this, navigate to res/Layout/activity_main.xml from package explorer in Eclipse. Open activity_main.xml

Add the following code into it:

```
<android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/drawer_layout"  
    <FrameLayout        android:id="@+id/content_frame"        android:layout_width="match_parent"        android:layout_height="match_parent" /> 
    <!-- The navigation drawer -->    <ListView android:id="@+id/drawer_list"        android:layout_width="240dp"        android:layout_height="wrap_content"        android:layout_gravity="start"        android:choiceMode="singleChoice"        android:divider="@android:color/transparent"        android:dividerHeight="0dp"        android:background="#111"
        />
</android.support.v4.widget.DrawerLayout> 
```

Next, navigate to res/Layout/fragment_layout.xml from package explorer in Eclipse.

Open fragment_layout.xml

```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"> 
    <ImageView
        android:id="@+id/tv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/> 
    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="40sp" /> 
 
</LinearLayout> 
```

Next, navigate to res/Layout/drawer_list_item.xml from package explorer in Eclipse.

Open drawer_list_item.xml

```
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">
    <ImageView        android:id="@+id/icon"        android:layout_width="40dp"        android:layout_height="40dp"        android:layout_alignParentLeft="true"        android:src="@drawable/ic_launcher"/>
    <TextView        android:id="@+id/text1"        android:layout_width="fill_parent"        android:layout_height="50dp"        android:textAppearance="?android:attr/textAppearanceListItemSmall"        android:paddingLeft="16dp"        android:paddingRight="16dp"        android:textColor="#fff"        android:background="?android:attr/activatedBackgroundIndicator"        android:minHeight="?android:attr/listPreferredItemHeightSmall"        />
</LinearLayout>
```

Creating a Fragment:

Fragment will be shown on the screen when an item in the navigation drawer is selected. Now navigate to the src folder and create a new fragment “CompanyFragment” and extend Fragments to it.

Add this code in it:

```
package com.example.msclient010.mindstickdrawer; import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView; 
public class CompanyFragment extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {
        // Retrieving the currently selected title  and icon        String mTitle = getArguments().getString("mTitle");        int mIcon = getArguments().getInt("imageId");        //creating view correspond to the fragment        View v = inflater.inflate(R.layout.fragment_layout, container, false);
        //getting reference to the text view and imageView of the fragment        TextView tv = (TextView) v.findViewById(R.id.tv_content);        ImageView icon = (ImageView) v.findViewById(R.id.tv_icon); 
        //set currently selected company name and icon in the fragment        tv.setText(mTitle);        icon.setImageResource(mIcon);
        return v;
    }
} 
```

Creating a Custom List adapter

To show our company’s icon and name in a customized list view we need to create a custom adapter which will set an icon and company name in each row item of our list

Navigate to the src folder and create a new java class called “CustomListAdapter” and extend ArrayAdapter to it. Add this code in it

```
package com.example.msclient010.mindstickdrawer;import android.app.Activity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView; import java.util.List; 
 
public class CustomListAdapter extends ArrayAdapter { 
    //create a context, a string list for name and Integer List for icon resources    private final Activity _context;    private List<String> _text;    private List<Integer> _icon; 
    //create a constructor for adapter and initialize the context and other resources    public CustomListAdapter(Activity context, List<String> text, List<Integer> icon) {
        super(context, R.layout.drawer_list_item, text);        _context = context;        _icon = icon;        _text = text;
    } 
    @Override    public View getView(int position, View convertView, ViewGroup parent) {
        //Inflate the view for ListView item for each row of drawer list        LayoutInflater inflater = _context.getLayoutInflater();        View rowView = inflater.inflate(R.layout.drawer_list_item, null, true);        //getting reference to the text view and imageView        TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
        //Set values for text and image        txtTitle.setText(_text.get(position));        imageView.setImageResource(_icon.get(position));        //return the row view to the adapter
        return rowView;
    }
}
```

Main Activity Implementation:

Now here we need to integrate all our views and classes to behave as a fully functionally app.

Navigate to MainActivity in the src folder from package explorer. Open MainActivity and this code in it:

```
package com.example.msclient010.mindstickdrawer;import android.app.FragmentManager;import android.app.FragmentTransaction;import android.os.Bundle;import android.support.v4.app.ActionBarDrawerToggle;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarActivity;import android.view.Menu;import android.view.MenuItem;import android.view.View;
import android.widget.AdapterView;import android.widget.ListView;import java.util.ArrayList;import java.util.List; 
public class MainActivity extends ActionBarActivity {
    // Within which the activity is enclosed    DrawerLayout mDrawerLayout;    // Listview representing navigation drawer    ListView mDrawerList;    // ActionBarDrawerToggle indicates the presence of Navigation Drawer in the action bar    ActionBarDrawerToggle mDrawerToggle;    //List item contents ---- list of company names and icon    List<String> compList;    List<Integer> icons;    // title and icon of the action bar    String mTitle = "";    int imageId = 0; 
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
        mTitle = (String) getTitle();
        //add company names        compList = new ArrayList<String>();        compList.add("MindStick");        compList.add("Oracle");        compList.add("Microsoft");        compList.add("Apple");        compList.add("Amazon");        //add icons for corresponding companies        icons = new ArrayList<Integer>();        icons.add(R.drawable.mindstick);        icons.add(R.drawable.oracle);        icons.add(R.drawable.microsoft);        icons.add(R.drawable.apple);        icons.add(R.drawable.amazon); 
        // Getting reference to DrawerLayout        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        mDrawerList = (ListView) findViewById(R.id.drawer_list);
        // getting reference to the ActionBarDrawerToggle        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,                R.drawable.google, R.string.drawer_open,                R.string.drawer_close) {
            /** Called when drawer is closed */            public void onDrawerClosed(View view) {                getSupportActionBar().setTitle(mTitle);                invalidateOptionsMenu();
            }
            /** Called when a drawer is opened */            public void onDrawerOpened(View drawerView) {                getSupportActionBar().setTitle("Select a Company");                invalidateOptionsMenu();
            }
        }; 
        // Setting drawer toggle to drawer Layout        mDrawerLayout.setDrawerListener(mDrawerToggle);
        // Creating an ArrayAdapter to add items to the list view mDrawerList        CustomListAdapter adapter = new CustomListAdapter(this, compList, icons);        // Setting the adapter on mDrawerList        mDrawerList.setAdapter(adapter);
        // enable home button        getSupportActionBar().setHomeButtonEnabled(true);
        // enable up navigation
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // Setting item click listener for the listview mDrawerList        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override            public void onItemClick(AdapterView<?> parent, View view,     int position, long id) {
                // Currently selected company                mTitle = compList.get(position);                //get the image id from the image name                imageId = icons.get(position);
                //setting the comapny item to action bar icon                getSupportActionBar().setIcon(imageId);
                // Creating a fragment object                CompanyFragment cFragment = new CompanyFragment();
                // create a bundle object                Bundle data = new Bundle();                // Setting the title and image of the currently selected item of mDrawerList                data.putString("mTitle", mTitle);                data.putInt("imageId", imageId);                cFragment.setArguments(data);                // Getting reference to fragment manager                FragmentManager fragmentManager = getFragmentManager();
               // creating a fragment transaction                FragmentTransaction ft = fragmentManager.beginTransaction();                // adding a fragment to the fragment transaction                ft.replace(R.id.content_frame, cFragment);
                // commit the transaction                ft.commit();                // Closing the drawer                mDrawerLayout.closeDrawer(mDrawerList);            }
        });
    }
    @Override    protected void onPostCreate(Bundle savedInstanceState) {        super.onPostCreate(savedInstanceState);        mDrawerToggle.syncState();    } 
    /**     * Handling the touch event of app icon     */    @Override    public boolean onOptionsItemSelected(MenuItem item) {        if (mDrawerToggle.onOptionsItemSelected(item)) {            return true;        }
        return super.onOptionsItemSelected(item);
    }
    /**     * Called whenever we call invalidateOptionsMenu()     */    @Override    public boolean onPrepareOptionsMenu(Menu menu) {        // If the drawer is open, hide action items related to the content view        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);        return super.onPrepareOptionsMenu(menu);
    } 
    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.menu_main, menu);        return true;    }
} 
```

Now here all the implementation is completed and it’s time to see what we have implemented

##### Running the Navigation App:

Just hit on “Run” button and our app will be launched and the drawer will be displayed:

![Navigation Drawer Implementation in Android](https://www.mindstick.com/mindstickarticle/1c914751-00c3-4dee-9b0f-21f91b95f3eb/images/8cd201b8-bc8d-4abf-8694-b007f78d18ea.png)

Click on the drawer icon and the list of companies will be appeared:

![Navigation Drawer Implementation in Android](https://www.mindstick.com/mindstickarticle/1c914751-00c3-4dee-9b0f-21f91b95f3eb/images/6bab51c0-5af7-4c4e-acab-271da3f8739d.png)

Click on the Company name and the selected company name and icon will be appeared at the screen:

![Navigation Drawer Implementation in Android](https://www.mindstick.com/mindstickarticle/1c914751-00c3-4dee-9b0f-21f91b95f3eb/images/fca62ca2-6956-4505-a93d-719c3575e6c4.png)

Next, we see how to implement contextual menus: Contextual Menu Implementation in Android

Thanks for reading this post.

Happy Coding!! J

---

Original Source: https://www.mindstick.com/articles/1567/navigation-drawer-implementation-in-android

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.