Android 5.0 Material Design Style Navigation Drawer for Kitkat

Android 5.0 material design style navigation drawer for KitKat

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/

Android Material Design on KitKat (and lower) devices

Currently the Android-L contains the Material Theme which works only on Android-L release.

You can build a Material Style without this Theme.
For example:

you can use a custom ActionBar (it is a customView) with a solid color, without shadow and with the navdrawer icon insted of standard icon app.
You can build a subheader bar with a LinearLayout below the actionBar with the same color.
You can build a Floating Action Button with a floating circle (and a shadow in png)
and so on...

We don't know what will be available for older releases. May be something as the new class Toolbar will be available in support library (and it will semplify the actionbar).
I suggest you waiting a month.

Material design navigation drawer not sliding out

I did not understand DrawerLayout, in part due to jpardogo's answer.

I needed to set the proper main content frame in my activity's XML file, so I made android.support.v4.widget.DrawerLayout the root element of the file, and put my activity's LinearLayout above the navigation drawer fragment element. Here is the proper, working code:

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

<!-- Main layout -->
<LinearLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="MergeRootFrame"
    android:fitsSystemWindows="true" >

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

    <it.neokree.materialtabs.MaterialTabHost
        android:id="@+id/materialTabHost"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:textColor="#FFFFFF"
        app:primaryColor="#33B5E5"
        app:accentColor="#FFFFFF" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<!-- Nav drawer -->
<fragment
    android:id="@+id/nav_drawer"
    android:name="com.wsandhu.conjugation.DrawerFragment"
    android:layout_width="@dimen/drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="left|start" />

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

It would help to compare this to the XML file in the original post. Hope this helps.

Android 5 Hamburger doen't open the drawer

You are not using the DrawerLayout as the root layout of the activity. You are almost there but you see how you use the RelativeLayout as the root (or at least that is what I infer from the posted xml - the RelativeLayout does not look like it has a closing tag so maybe you just missed it)?

The NavigationDrawer opens on the tap of the "hamburger" (or icon) only when it is the root so that Android knows that the DrawerLayout is encompassing everything. My guess is the toolbar you are including is interfering with the layout.

How to implement DrawerArrowToggle from Android appcompat v7 21 library

First, you should know now the android.support.v4.app.ActionBarDrawerToggle is deprecated.

You must replace that with android.support.v7.app.ActionBarDrawerToggle.

Here is my example and I use the new Toolbar to replace the ActionBar.

MainActivity.java

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
        this,  mDrawerLayout, mToolbar,
        R.string.navigation_drawer_open, R.string.navigation_drawer_close
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    mDrawerToggle.syncState();
}

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

You can read the documents on AndroidDocument#DrawerArrowToggle_spinBars

This attribute is the key to implement the menu-to-arrow animation.

public static int DrawerArrowToggle_spinBars

Whether bars should rotate or not during transition
Must be a boolean value, either "true" or "false".

So, you set this: <item name="spinBars">true</item>.

Then the animation can be presented.

Hope this can help you.

Android 5.0 Material Design Style Navigation Drawer for Kitkat