Android 5.0 material design style navigation drawer for KitKat

Question

I see that Android introduced new navigation drawer icons, drawer icon and back arrow icon. How can we use that in Kitkat supported apps. See Google's latest version of Newsstand app, which has the latest navigation drawer icons and animations. How can we implement that?

I have tried setting the minSDK to 19 and complileSDK to 21 but it's using the old style icons. Is that self implemented?

Answer 1

You need to use the new Toolbar in the appcompat v21 and the new ActionBarDrawerToggle that is in this library as well.

Add the gradle dependency to your gradle file:

compile 'com.android.support:appcompat-v7:21.0.0'

Your activity_main.xml layout would look something like that:

<!--I use android:fitsSystemWindows because I am changing the color of the statusbar as well-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true">

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main layout -->
        <FrameLayout
            android:id="@+id/main_fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- Nav drawer -->
        <fragment
            android:id="@+id/fragment_drawer"
            android:name="com.example.packagename.DrawerFragment"
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="left|start" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

Your Toolbar layout would look something like that:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"/>

Your activity must extend from:

ActionBarActivity

When you find your views (drawer and toolbar) in the activity the set the toolbar as the support action bar and set the setDrawerListener:

setSupportActionBar(mToolbar);
mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name);
mDrawerLayout.setDrawerListener(mDrawerToggle);

After that you just need to take care of the menu items and drawerToogle state:

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = new MenuInflater(this);
    inflater.inflate(R.menu.menu_main,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

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

@Override
public void onBackPressed() {
    if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){
        mDrawerLayout.closeDrawers();
        return;
    }
    super.onBackPressed();
}

The implementation is the same as It was before the Toolbar and you receive the arrow animation for free. No headaches. For more information follow:

• The documentation.

• The ChrisBanes post

• The official android blog post.

If you want to display the drawer over the Toolbar and under the status bar, please refer to this question.

EDIT: Use NavigationView from the support design library. Tutorial to learn how to use in here: http://antonioleiva.com/navigation-view/

Answer 2

The answer is no longer useful. Leaving it here for only historic purpose as the time of posting Android did not have the implementation :)

---

There are plenty of libraries now that can achieve this.

Choice 1 - https://github.com/neokree/MaterialNavigationDrawer

Others

• https://github.com/HeinrichReimer/material-drawer
• https://github.com/kanytu/android-material-drawer-template
• https://github.com/balysv/material-menu
• https://github.com/ikimuhendis/LDrawer
• https://github.com/Zlate87/material-navigation-drawer-example

Answer 3

If you want the real navigation drawer with material design style (defined here)
I have implemented a custom library that do exactly that.
You can find it here

Answer 4

Supporting top comment along with the new generated main_content's layout. I simply override the included content layout with DrawerLayout. Keep in mind that your drawerlayout must have this layout_behavior: appbar_scrolling_view_behavior

top container's layout https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/activity_recycler.xml#L17

included content layout https://github.com/juanmendez/jm_android_dev/blob/master/01.fragments/06.fragments_with_rx/app/src/main/res/layout/content_recycler.xml#L9