How animate Burger to Arrow with Appcompat v7 21, Toolbar and DrawerLayout

user2298916 picture user2298916 · Oct 20, 2014 · Viewed 43.1k times · Source

I am using the android.support.v7.widget.Toolbar with a android.support.v4.widget.DrawerLayout. It works fine, the Burger icon is shown when the Navigation Drawer is closed, and the Arrow icon is shown when the Drawer is open. I want to disable the drawer and animate the Burger icon into Arrow on some event in the app. I have tried to set the lock mode to closed, but the v7.app.ActionBarDrawerToggle is still showing the Burger and it opens the Drawer.

mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);

Any ideas? Thanks!

Update:

No I can change the state of the icon and I can enable/disable the drawer, but the animations are not working with this approach:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    Toolbar toolbar = (Toolbar) findViewById(R.id.application_toolbar);
    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.string1, R.string.string2) {
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view);
        }

        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }
    };

    //mDrawerLayout.setDrawerListener(mDrawerToggle); // not needed
    ...
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {
        case android.R.id.home:
            if (mDrawerLayout.getDrawerLockMode(GravityCompat.START) == LOCK_MODE_UNLOCKED) {
                showDrawer();
            } else {
                handleBackButtonPress(); // On this stage the home button is a <-
            }
    }
    ...
}

private void setDrawerState(boolean isEnabled) {
    if (isEnabled) {
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
        mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_UNLOCKED);
        mDrawerToggle.syncState();

    } else {
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
        mDrawerToggle.onDrawerStateChanged(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
        mDrawerToggle.syncState();
    }
}

The drawer comes on the top of the Toolbar.

Answer

L93 picture L93 · Oct 20, 2014

Have a look here, it describes how you solve it.

https://stackoverflow.com/a/26447144

The essential part is the following:

<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>