Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Impleneting a Navigation Drawer in Android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.29k
    Comment on it

    Navigation drawer :It can used as an app's main navigation option on the left edge of the screen. it it hidden all the time and revealed on the click of the app icon or swipe gesture from the left of the screen. Navigation drawer is used when your app structure need more than three top level views, cross navigation from lower levels.and deep navigation branches.

    In this tutorial you will learn how to implement the navigation drawer in the app. You can see lot of popular applications like Facebook, Youtube, Google + already introduced navigation drawer menu in their applications. Here are some quick tips to add navigation drawer to your application.

    First Create a java file data for navigation drawer item: sample code:

    package info.androidhive.slidingmenu.model;
    public class NavDrawerItem {
        private String title;
        private int icon;
        private String count = "0";
        // boolean to set visiblity of the counter
        private boolean isCounterVisible = false;
        public NavDrawerItem(){}
        public NavDrawerItem(String title, int icon){
            this.title = title;
            this.icon = icon;
        public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count){
            this.title = title;
            this.icon = icon;
            this.isCounterVisible = isCounterVisible;
            this.count = count;
        public String getTitle(){
            return this.title;
        public int getIcon(){
            return this.icon;
        public String getCount(){
            return this.count;
        public boolean getCounterVisibility(){
            return this.isCounterVisible;
        public void setTitle(String title){
            this.title = title;
        public void setIcon(int icon){
            this.icon = icon;
        public void setCount(String count){
            this.count = count;
        public void setCounterVisibility(boolean isCounterVisible){
            this.isCounterVisible = isCounterVisible;

    Then create the adapter for the listview in the main activity::
    package info.androidhive.slidingmenu.adapter;
    import info.androidhive.slidingmenu.R;
    import info.androidhive.slidingmenu.model.NavDrawerItem;
    import java.util.ArrayList;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    public class NavDrawerListAdapter extends BaseAdapter {
        private Context context;
        private ArrayList navDrawerItems;
        public NavDrawerListAdapter(Context context, ArrayList navDrawerItems){
            this.context = context;
            this.navDrawerItems = navDrawerItems;
        public int getCount() {
            return navDrawerItems.size();
        public Object getItem(int position) {      
            return navDrawerItems.get(position);
        public long getItemId(int position) {
            return position;
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                LayoutInflater mInflater = (LayoutInflater)
                convertView = mInflater.inflate(R.layout.drawer_list_item, null);
            ImageView imgIcon = (ImageView) convertView.findViewById(;
            TextView txtTitle = (TextView) convertView.findViewById(;
            TextView txtCount = (TextView) convertView.findViewById(;
            // displaying count
            // check whether it set visible or not
                // hide the counter view
            return convertView;


    main activity:
    public class MainActivity extends Activity {
        private DrawerLayout mDrawerLayout;
        private ListView mDrawerList;
        private ActionBarDrawerToggle mDrawerToggle;

    // nav drawer title
    private CharSequence mDrawerTitle;
    // used to store app title
    private CharSequence mTitle;
    // slide menu items
    private String[] navMenuTitles;
    private TypedArray navMenuIcons;
    private ArrayList<navdraweritem> navDrawerItems;
    private NavDrawerListAdapter adapter;
    protected void onCreate(Bundle savedInstanceState) {
        mTitle = mDrawerTitle = getTitle();
        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav&#95;drawer&#95;items);
        // nav drawer icons from resources
        navMenuIcons = getResources()
        mDrawerLayout = (DrawerLayout) findViewById(;layout);
        mDrawerList = (ListView) findViewById(;slidermenu);
        navDrawerItems = new ArrayList<navdraweritem>();
        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
        // What's hot, We  will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));
        // Recycle the typed array
        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
        // enabling action bar app icon and behaving it as toggle button
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic&#95;drawer, //nav menu toggle icon
      ;name, // nav drawer open - description for accessibility
      ;name // nav drawer close - description for accessibility
            public void onDrawerClosed(View view) {
                // calling onPrepareOptionsMenu() to show action bar icons
            public void onDrawerOpened(View drawerView) {
                // calling onPrepareOptionsMenu() to hide action bar icons
        if (savedInstanceState == null) {
            // on first time display view for first nav item
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(, menu);
        return true;
    public boolean onOptionsItemSelected(MenuItem item) {
        // toggle nav drawer on selecting action bar app icon/title
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        // Handle action bar actions click
        switch (item.getItemId()) {
            return true;
            return super.onOptionsItemSelected(item);
     * Called when invalidateOptionsMenu() is triggered
    public boolean onPrepareOptionsMenu(Menu menu) {
        // if nav drawer is opened, hide the action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        return super.onPrepareOptionsMenu(menu);
    public void setTitle(CharSequence title) {
        mTitle = title;
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
    protected void onPostCreate(Bundle savedInstanceState) {
        // Sync the toggle state after onRestoreInstanceState has occurred.
    public void onConfigurationChanged(Configuration newConfig) {
        // Pass any configuration change to the drawer toggls

    the code reference from

    Source code also provided in zip file attached to the blog.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: