Drawer indicator in lollipop play store

Question

I am using a Nexus 7 with the Android 5.0 preview build.

On this page http://developer.android.com/tools/support-library/index.html

I see

Changes for v7 appcompat library: Updated ActionBarDrawerToggle, which contains the menu-to-arrow animation

Is this what the Google Play app uses? Am I reading too much into this statement? What do I need to change to get this behavior - I can't find it in the API documentation.

Answer 1

I've posted a sample app here that uses the new Toolbar class and ActionBarToggle to provide an ActionBar with the Play Store style animating icon:

https://github.com/03lafaye/LollipopDrawerToggle

The no-v7-support branch uses the ActionBarToggle with a framework Activity and Toolbar. The master branch uses the v7 Toolbar and an ActionBarActivity.

The setup for not using an ActionBarActivity looks like this:

package com.plafayette.lollipop;

import android.app.Activity;
import android.support.v4.widget.DrawerLayout;
import android.os.Bundle;
import android.support.v7.app.ActionBarDrawerToggle;
import android.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class ToolbarActivity extends Activity {
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setActionBar(toolbar);

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);
        toggle.setDrawerIndicatorEnabled(true);
        drawerLayout.setDrawerListener(toggle);
    }

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

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item))
            return true;

        int id = item.getItemId();
        return id == R.id.action_settings || super.onOptionsItemSelected(item);
    }
}

Note that you have to disable the window actionbar and title bar in your theme like so:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

I imagine the sample code for the latest v7 appcompat library will be released soon enough making this post obsolete.

Chris Renke from Square published an alternate backport of the up icon animation. The code is on GitHub here: https://github.com/ChrisRenke/DrawerArrowDrawable and he wrote a blog about it at http://chrisrenke.com/drawerarrowdrawable.