13

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 Material Design. When you use this library with API21 menudrawer icon looks bad.

I want to achieve transition you can see in the new Play Store (new menudrawer icon transition to arrow).

Play Store navigation drawer icon

What's the best way to do that? Is it possible with this library? The only solution I'm thinking at the moment is custom drawable. But maybe I can use native drawable some way?

adek
  • 3,045
  • 2
  • 27
  • 41
  • Why aren't you using the appcompat-v7 library in the Android 5.0 SDK? It has this animation built in. – alanv Oct 17 '14 at 21:46
  • @alanv but to use appcompat-v7 you mean - remove menudrawer from my project and use the native one? At the moment this is problematic. – adek Oct 17 '14 at 21:54
  • I mean using the DrawerLayout from the support library. It looks like menudrawer offers the exact same features, but DrawerLayout is meant to work ActionBarDrawerToggle (which is what provides this animation). – alanv Oct 17 '14 at 23:19
  • 1
    @alanv I've checked DrawerLayout - wizard project in Android Studio with NagivationDrawer (target API is 21). And the icon is the same - https://www.dropbox.com/s/piwpruzpk65ld4f/Screenshot_2014-10-18-12-57-27.png?dl=0 (screenshot from N5 with the yesterday's L) – adek Oct 18 '14 at 10:59
  • 2
    I'm seeing the same thing when using the default DrawerLayout from the support lib. – Nathan Walters Oct 18 '14 at 14:01
  • Check out my answer on this question: http://stackoverflow.com/a/26497334/135360 – Pierre-Antoine LaFayette Oct 23 '14 at 05:58

3 Answers3

41

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.

adek
  • 3,045
  • 2
  • 27
  • 41
  • 2
    The v4 version of ActionBarDrawerToggle is deprecated. See http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html. – Pierre-Antoine LaFayette Oct 23 '14 at 06:01
  • @adek - this will work even for devices running android api level 10 is it ? or do we need to code separately for the transition effect in these api levels? – Rat-a-tat-a-tat Ratatouille Oct 27 '14 at 06:08
  • @Rat-a-tat-a-tatRatatouille good question. I read it should work with API10. I'm using it with 14+ at the moment. – adek Oct 27 '14 at 18:27
  • 1
    THANK YOU SO MUCH. I tried everything to make the icon right but nothing worked. Then I saw this and voila! You saved me many stressful hours. – VipulKumar Nov 17 '14 at 11:32
  • For exact instructions on changing to the new constructor, see http://stackoverflow.com/a/26440168/937715 – Sean Barbeau Nov 17 '14 at 16:17
19

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>
<color name="primaryColor">#2196F3</color>
<color name="primaryColorDark">#0D47A1</color>
</resources>

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

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

Your activity_my.xml layout file looks like this:

<LinearLayout xmlns: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">

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


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

    <!-- activity view -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <TextView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:textColor="#000"
            android:text="Activity Content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

    <!-- navigation drawer -->
    <RelativeLayout
        android:layout_gravity="left|start"
        android:layout_width="match_parent"
        android:background="#fff"
        android:layout_height="match_parent">

        <ListView
            android: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.Toolbar xmlns: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;

public class MyActivity extends ActionBarActivity {

private Toolbar toolbar;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle drawerToggle;
private ListView leftDrawerList;
private ArrayAdapter<String> navigationDrawerAdapter;
private String[] leftSliderData = {"Home", "Android", "Sitemap", "About", "Contact Me"};

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

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

private void initDrawer() {

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

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);

        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

        }
    };
    drawerLayout.setDrawerListener(drawerToggle);
}

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

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

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.my, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    if (drawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}

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

<?xml version="1.0" encoding="utf-8"?>
<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:statusBarColor">@color/primaryColorDark</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

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

</resources>

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

<resources>

<style name="myAppTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

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

</resources>

Your AndroidManifest.xml is looks like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="nkdroid.com.lollipopdrawer" >

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/myAppTheme" >
    <activity
        android:name=".MyActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

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

nirav kalola
  • 1,220
  • 13
  • 17
1

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

Design Support Library

Blog on Design Support Library

Pioneer
  • 1,530
  • 1
  • 11
  • 11