Skip to content Skip to sidebar Skip to footer

Navigation Drawer (menudrawer) Android 5 (lollipop) Style

I'm using menudrawer library in my project (this one: https://github.com/SimonVT/android-menudrawer). I'm updating my app to be compatible with API21 (Android 5 Lollipop) and Mate

Solution 1:

OK. I spent few hours with new API and I think that the best for me will be rewriting my drawer from lib to native DrawerLayout.

But maybe this will be useful for someone with similar problem. I've created test project with DrawerLayout (Android Studio -> New Project with menudrawer).

And then I saw the same problem. Wrong icon. If you want to see fancy animation and good icon for Android 5.0 make sure you are using:

import android.support.**v7**.app.ActionBarDrawerToggle;

Take note on v7. By default Fragment class has v4 import and then you won't see good icon.

Another thing. After changing to v7 you need to fix ActionBarDrawerToggle function to new constructor. And that's it. You'll see new drawer icon.

Solution 2:

First, make sure you update to latest SDK. Create new Project in Android Studio, then add appcompat-v7.21.0.+ and appcompat-v4.21.0.+ libraries in your buid.gradle as gradle dependency.

compile'com.android.support:appcompat-v7:21.0.2'compile'com.android.support:support-v4:21.0.2'

Add primaryColor and primarycolorDark in your color.xml file.

<resources><colorname="primaryColor">#2196F3</color><colorname="primaryColorDark">#0D47A1</color></resources>

Add drawer open/close string value in your strings.xml file.

<resources><stringname="app_name">Lollipop Drawer</string><stringname="action_settings">Settings</string><stringname="drawer_open">open</string><stringname="drawer_close">close</string></resources>

Your activity_my.xml layout file looks like this:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:orientation="vertical"android:layout_height="match_parent"tools:context=".MainActivity"><includelayout="@layout/toolbar" /><android.support.v4.widget.DrawerLayoutandroid:layout_width="match_parent"android:id="@+id/drawerLayout"android:layout_height="match_parent"><!-- activity view --><RelativeLayoutandroid:layout_width="match_parent"android:background="#fff"android:layout_height="match_parent"><TextViewandroid:layout_centerInParent="true"android:layout_width="wrap_content"android:textColor="#000"android:text="Activity Content"android:layout_height="wrap_content" /></RelativeLayout><!-- navigation drawer --><RelativeLayoutandroid:layout_gravity="left|start"android:layout_width="match_parent"android:background="#fff"android:layout_height="match_parent"><ListViewandroid:id="@+id/left_drawer"android:layout_width="match_parent"android:layout_height="match_parent"android:divider="#eee"android:background="#fff"android:dividerHeight="1dp" /></RelativeLayout></android.support.v4.widget.DrawerLayout></LinearLayout>

Your toolbar.xml layout file looks like this:

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

Your MyActivity.java looks like this: Here your activity must extends ActionBarActivity and set your toolbar as support actionbar.

import android.content.res.Configuration;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

publicclassMyActivityextendsActionBarActivity {

privateToolbar toolbar;
privateDrawerLayout drawerLayout;
privateActionBarDrawerToggle drawerToggle;
privateListView leftDrawerList;
privateArrayAdapter<String> navigationDrawerAdapter;
privateString[] leftSliderData = {"Home", "Android", "Sitemap", "About", "Contact Me"};

@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    nitView();
    if (toolbar != null) {
        toolbar.setTitle("Navigation Drawer");
        setSupportActionBar(toolbar);
    }
    initDrawer();
}

privatevoidnitView() {
    leftDrawerList = (ListView) findViewById(R.id.left_drawer);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    navigationDrawerAdapter=newArrayAdapter<String>( MyActivity.this, android.R.layout.simple_list_item_1, leftSliderData);
    leftDrawerList.setAdapter(navigationDrawerAdapter);
}

privatevoidinitDrawer() {

    drawerToggle = newActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {

        @OverridepublicvoidonDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);

        }

        @OverridepublicvoidonDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

        }
    };
    drawerLayout.setDrawerListener(drawerToggle);
}

@OverrideprotectedvoidonPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    drawerToggle.syncState();
}

@OverridepublicvoidonConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    drawerToggle.onConfigurationChanged(newConfig);
}

@OverridepublicbooleanonCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my, menu);
    returntrue;
}

@OverridepublicbooleanonOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        returntrue;
    }
    if (drawerToggle.onOptionsItemSelected(item)) {
        returntrue;
    }
    returnsuper.onOptionsItemSelected(item);
}
}

Create style.xml file in values-21 folder for android lollipop

<?xml version="1.0" encoding="utf-8"?><resources><stylename="myAppTheme"parent="Theme.AppCompat.Light.NoActionBar"><itemname="colorPrimary">@color/primaryColor</item><itemname="colorPrimaryDark">@color/primaryColorDark</item><itemname="android:statusBarColor">@color/primaryColorDark</item><itemname="drawerArrowStyle">@style/DrawerArrowStyle</item></style><stylename="DrawerArrowStyle"parent="Widget.AppCompat.DrawerArrowToggle"><itemname="spinBars">true</item><itemname="color">@android:color/black</item></style></resources>

Create your style.xml file in values folder for older versions then android lollipop

<resources><stylename="myAppTheme"parent="Theme.AppCompat.Light"><itemname="colorPrimary">@color/primaryColor</item><itemname="colorPrimaryDark">@color/primaryColorDark</item><itemname="android:windowNoTitle">true</item><itemname="windowActionBar">false</item><itemname="drawerArrowStyle">@style/DrawerArrowStyle</item></style><stylename="DrawerArrowStyle"parent="Widget.AppCompat.DrawerArrowToggle"><itemname="spinBars">true</item><itemname="color">@android:color/black</item></style></resources>

Your AndroidManifest.xml is looks like this:

<?xml version="1.0" encoding="utf-8"?><manifestxmlns:android="http://schemas.android.com/apk/res/android"package="nkdroid.com.lollipopdrawer" ><applicationandroid:allowBackup="true"android:icon="@drawable/ic_launcher"android:label="@string/app_name"android:theme="@style/myAppTheme" ><activityandroid:name=".MyActivity"android:label="@string/app_name" ><intent-filter><actionandroid:name="android.intent.action.MAIN" /><categoryandroid:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application></manifest>

For reference only: you can download complete source code from here : click here

Solution 3:

Check out the new lollipop components released in May 2015 by Android team.

Design Support Library

Blog on Design Support Library

Post a Comment for "Navigation Drawer (menudrawer) Android 5 (lollipop) Style"