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/