ActionBarDrawerToggle animation

Question

I'm using the ActionBarDrawerToggle from the v7 appcompat library in my app and have some troubles with the menu-to-arrow animation. According to the material design guidelines the navigation drawer should overlap the toolbar and the icon animation should not be used when opening the drawer as I understand.

Why is the animation enabled by default when opening/closing the navigation drawer and how can I disable it?

Also, how can I trigger the animation on other occurences? I found this solution but it only works for Android API 11+ and its overwritten by calling setDrawerIndicatorEnabled(false) or by an expanded ActionView in the toolbar.

score 16 · Accepted Answer · answered Dec 15 '14 at 15:19

When you create your ActionBarDrawerToggle, do it like this to disable the animation/arrow and always show a hamburger:

drawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
            getToolbar(), R.string.open, R.string.close) {

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

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            super.onDrawerSlide(drawerView, 0); // this disables the arrow @ completed state
        }

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, 0); // this disables the animation 
        }
    };

Actually, all you would need to do is override the `onDrawer*()` methods without calling through to their `super` methods. No need for the extra `super.onDrawerSlide(drawerView, 0);` calls. If you're not using the overrides for anything else, though - i.e., if they're just going to be empty - then you can just not set the toggle as a `DrawerListener`, as mentioned in another answer here. — Mike M., Jan 19 '17 at 20:23

Samuel Urbanowicz · Answer 2 · 2015-04-11T08:07:33.613

I came across this problem tooday and found simple and (I belive) a proper solution:

Just don't set ActionBarDrawerToggle instance as DrawerListener for your DrawerLayout. This way ActionBarDrawerToggle will not perform animation that depends on drawer slide offset.

If you need a listener for DrawerLayout use DrawerLayout.DrawerListener.

edit: You can also set ActionBarDrawerToggle as a listener, but than you must overide its onDrawerSlide method. e.g. like this:

 mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.drawer_open_desc, R.string.drawer_close_desc) {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, 0);
        }
    };

calling super.onDrawerSlide() with 0 value instead of slideOffset, disables the animation

score 1 · Answer 3 · answered Nov 17 '14 at 05:34

1

Add DrawerArrowStyle in your Theme like above. It does the trick ...

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <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>

Sample Activity

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

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    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();
}

answered Nov 17 '14 at 05:34

AruLNadhaN

2,808
5
24
42

What exactly should that change? I still have the animation when opening the drawer and don't have it when I want it. – Makru Nov 17 '14 at 22:24
1

If u want to disable it. Set this to false false – AruLNadhaN Nov 18 '14 at 04:22
That still shows the animation, just without the bars spinning. – Makru Nov 19 '14 at 21:31
Then What Animation u meant ? – AruLNadhaN Nov 20 '14 at 04:26
2

The icon shouldn't change at all when opening the navigation drawer. It menu icon should stay because it's overlapped by the draeer anyway. I just want the animation in other situations like when changing the fragment. – Makru Nov 20 '14 at 16:54
Same problem here. It´s impossible to me to stop the icon at all. Is always doing something. According to the android guidelines the navigation drawer overlaps everything but status bar, so the animation makes no sense to me. How to stop it?? – Sotti Nov 24 '14 at 19:50

score 1 · Answer 4 · answered Mar 09 '15 at 17:45

1

I know I am super late...

Do this in the activity:

drawerToggle.setDrawerIndicatorEnabled(false);

In styles.xml theme. Do this:

<item name="android:homeAsUpIndicator">@drawable/menu_icon</item>

answered Mar 09 '15 at 17:45

user2214756

133
1
6

score 0 · Answer 5 · answered May 14 '15 at 19:05

mDrawerToggle = new ActionBarDrawerToggle(
                this,
                mDrawerLayout,
                mToolbar,
                R.string.drawer_open,
                R.string.drawer_close
        ) {
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
                syncState();

            }


            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
                syncState();
                mLeftMenuFrame.bringToFront();
                mRightMenuFrame.bringToFront();

            }
        };


        mDrawerToggle.setDrawerIndicatorEnabled(true);
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mToolbar.inflateMenu(R.menu.menu_main);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mDrawerToggle.syncState();

ActionBarDrawerToggle animation

5 Answers5