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

Answer 1

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