How to Create Navigation Drawer Using Android Design Support Library?

Question

In google developer blog post . I read about new way to create navigation drawer using new dependency called

compile 'com.android.support:design:22.2.0'

but I didn’t found exact way to create navigation drawer using this new dependency.

In build.gradle , I have added dependency

compile 'com.android.support:design:22.2.0'
compile 'com.android.support:appcompat-v7:22.0.0'

in layout file added following code (based on google blog post)

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

    <!-- your content layout -->

    <android.support.design.widget.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

Aslo I tried to extend class using ActionBarActivity but its deprecated?

Ref:http://android-developers.blogspot.in/2015/05/android-design-support-library.html

Any help appreciated .Thank you

score 5 · Answer 1 · answered Aug 05 '15 at 06:41

Hi try following steps

Add Android design support library dependency

compile 'com.android.support:design:22.2.1'

Create a header for the navigation drawer

<?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="150dp"
    android:background="@drawable/header"
    android:padding="16dp"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Nirav Kalola\nnkDroid"
        />
    </LinearLayout>

Create a menu for navigation drawer items

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="nkdroid.tutorial.navigationview.MainActivity">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_action_home"
        android:title="Home"/>
    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_action_info"
        android:title="About Us"/>
    <item
        android:id="@+id/navigation_subheader"
        android:title="Tutorials">
        <menu>
            <item
                android:id="@+id/navigation_sub_item_1"
                android:icon="@drawable/ic_image_looks_one"
                android:title="Android Tutorials"/>
            <item
                android:id="@+id/navigation_sub_item_2"
                android:icon="@drawable/ic_image_looks_two"
                android:title="IOS Tutorials"/>
        </menu>
    </item>
</group>
</menu>

Create Navigation View with header and items

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
android:fitsSystemWindows="true">

<!--Main content-->
<LinearLayout
    android:orientation="vertical"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/app_bar"/>
</LinearLayout>

<!--Navigation Drawer-->
<android.support.design.widget.NavigationView
    android:id="@+id/main_drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"

    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>

Implementing Navigation View

import android.content.res.Configuration;
import android.os.Bundle;
import android.os.PersistableBundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements    NavigationView.OnNavigationItemSelectedListener{

private Toolbar toolbar;
private NavigationView mDrawer;
private DrawerLayout mDrawerLayout;
private  ActionBarDrawerToggle drawerToggle;
private int mSelectedId;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    setToolbar();
    initView();

    drawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
    mDrawerLayout.setDrawerListener(drawerToggle);
    drawerToggle.syncState();
    //default it set first item as selected
    mSelectedId=savedInstanceState ==null ? R.id.navigation_item_1: savedInstanceState.getInt("SELECTED_ID");
    itemSelection(mSelectedId);

}

private void setToolbar() {
    toolbar= (Toolbar) findViewById(R.id.toolbar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);
    }
}

private void initView() {
    mDrawer= (NavigationView) findViewById(R.id.main_drawer);
    mDrawer.setNavigationItemSelectedListener(this);
    mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
}

private void itemSelection(int mSelectedId) {

    switch(mSelectedId){

        case R.id.navigation_item_1:
            mDrawerLayout.closeDrawer(GravityCompat.START);
            break;

        case R.id.navigation_item_2:
            mDrawerLayout.closeDrawer(GravityCompat.START);
            break;

        case R.id.navigation_sub_item_1:
            mDrawerLayout.closeDrawer(GravityCompat.START);
            break;

        case R.id.navigation_sub_item_2:
            mDrawerLayout.closeDrawer(GravityCompat.START);
            break;

    }

}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    drawerToggle.onConfigurationChanged(newConfig);
}

@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
    menuItem.setChecked(true);
    mSelectedId=menuItem.getItemId();
    itemSelection(mSelectedId);
    return true;
}

@Override
public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {
    super.onSaveInstanceState(outState, outPersistentState);
    //save selected item so it will remains same even after orientation change
    outState.putInt("SELECTED_ID",mSelectedId);
}

}

you can directly download source code from my blog

Dhaval Parmar · Answer 2 · 2015-06-02T07:02:56.527

enter image description here

hello @user3739665 i am also trying to lean support library, but i don't think there is proper way(because no sample available right now). so here is my tried code, just for demonstration how to use that lib.

i change that layout to like below added main fragment, you can also add toolbar.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">

<!-- your content layout -->
<!--<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />-->
<include layout="@layout/about_fragment"></include>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_draw"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer" />

i have create drawer.xml for menu and drawer_header.xml for user detail just like show in blog

my activity code

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

Toolbar toolbar;
View root;
NavigationView nav_draw;
DrawerLayout drawer_layout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.activity_main);
    root = getLayoutInflater().inflate(R.layout.activity_main, null);
    setContentView(root);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    final ActionBar ab = getSupportActionBar();
    ab.setHomeAsUpIndicator(R.drawable.ic_menu);
    ab.setDisplayHomeAsUpEnabled(true);

    drawer_layout = (DrawerLayout)findViewById(R.id.drawer_layout);
    nav_draw = (NavigationView) findViewById(R.id.nav_draw);
    nav_draw.setNavigationItemSelectedListener(this);

   /* getSupportFragmentManager().beginTransaction()
            .replace(R.id.container, new AboutPagerFragment())
            .commit();*/

}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            drawer_layout.openDrawer(GravityCompat.START);
            return true;
    }
    return super.onOptionsItemSelected(item);
}


@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
    if (menuItem.getItemId() == R.id.navigation_item_1) {
        Snackbar
                .make(root, "First item Selected", Snackbar.LENGTH_LONG)
                        //.setAction(R.string.snackbar_action, myOnClickListener)
                .show();
    }
    menuItem.setChecked(true);
    drawer_layout.closeDrawers();

    return false;
}

/*@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;
}*/

}

add this in you build.gradle

dependencies {
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:support-v4:22.2.0'
}

drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:checked="true"
            android:title="@string/navigation_item_1">

        </item>
        <item
            android:id="@+id/navigation_item_2"
            android:title="@string/navigation_item_2" />

        <item
            android:id="@+id/navigation_subheader"
            android:title="@string/navigation_subheader">
            <menu>
                <item
                    android:id="@+id/navigation_sub_item_1"
                    android:title="@string/navigation_sub_item_1" />
                <item
                    android:id="@+id/navigation_sub_item_2"
                    android:title="@string/navigation_sub_item_2" />
            </menu>
        </item>
    </group>
</menu>

drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="130dip">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/textView" />
</LinearLayout>

EDIT

added navigation item open,close, enable items selection

can you post drawer.xml for menu and drawer_header.xml – scott Jun 02 '15 at 05:34 — scott, Jun 02 '15 at 05:34
Thank you @Dhawal Sodha Parmar – scott Jun 02 '15 at 05:37 — scott, Jun 02 '15 at 05:37

score 1 · Answer 3 · answered Jun 02 '15 at 08:24

The "java part" can look like this:

Set your activity as a listener

navView.setNavigationItemSelectedListener(this);

And than handle events the same way you handle menu interaction

@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
    int id = menuItem.getItemId();

    menuItem.setChecked(true);
    drawerLayout.closeDrawers();

    if (id == R.id.some_item_1) {


    } else if (id == R.id.some_item_2) {


    } else {
        throw new IllegalStateException("Unsupported menu item");
    }

    return true;
}

Check this github project for all examples of using design library.

score 0 · Answer 4 · answered Jan 16 '16 at 09:08

Tutorial: Navigation View Design Support Library

 <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.Toolbar
                ...
            />

        </RelativeLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawer"/>
    </android.support.v4.widget.DrawerLayout>

score 0 · Answer 5 · answered May 01 '16 at 10:06

activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

app_bar_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.azim.innovation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

content_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.azim.innovation.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

nav_header_main

<?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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />

</LinearLayout>

activity_main_drawer

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

</menu>

colors

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

dimens

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="nav_header_vertical_spacing">16dp</dimen>
    <dimen name="nav_header_height">160dp</dimen>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

MainActivity

package com.azim.innovation;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    private DrawerLayout mDrawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        if (fab != null)
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                            .setAction("Action", null).show();
                }
            });

        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        mDrawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        if (navigationView != null) {
            navigationView.setNavigationItemSelectedListener(this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mDrawer.isDrawerOpen(GravityCompat.START)) {
            mDrawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        mDrawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

dependencies

compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'

styles

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

styles-v21

<resources>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

score -1 · Answer 6 · answered Jun 02 '15 at 03:30

It's not clear exactly what your issue is (in what way did it not work?), but perhaps you missed the fact that you muse actually define the 'drawer_header' layout and the 'drawer' menu?

If that's not the problem, please explain in more detail exactly what you're having a problem with.

How to Create Navigation Drawer Using Android Design Support Library?

6 Answers6

Linked

Related