How To Animate The Hamburger Icon To Back Arrow While Using Design Support Library?

Hello I am using the most recent support library from android called design support library and using the NavigationView in it for shwing drawer. But the problem is when I am openn

Solution 1:

Here is complete code to bind toolbar, drawer layout and how to sync them.

DrawerLayoutdrawer= (DrawerLayout) findViewById(R.id.my_drawer_layout);
        Toolbartoolbar= (Toolbar) findViewById(R.id.my_awesome_toolbar);

        setSupportActionBar(toolbar);
        ActionBarDrawerToggledrawerToggle=newActionBarDrawerToggle(this, drawer,
                toolbar, R.string.drawer_open, R.string.drawer_close);

        drawer.setDrawerListener(drawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        drawerToggle.syncState();

Solution 2:

You may add these lines.

mDrawerLayout.post(newRunnable() {
        @Overridepublicvoidrun() {
           mActionBarDrawerToggle.syncState(); //Create a ActionBarDrawerToggle object instead of using a anonymous class in set drawerlistener
        }
    });

Hope it helps.

Solution 3:

I have solved my problem by this, Actually I was using a method to hard set the hamburger icon as the actionbar icon using this code:

ab.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);

I have just commented out this line of code and then it worked.

Solution 4:

I've made a class which you can use to animate hamburger or menu icon .

import android.app.Activity;
import android.content.Context;
import android.support.v7.graphics.drawable.DrawerArrowDrawable;

/**
* Created by ankush38u on 5/13/2016.
*/publicclassDrawerArrowAnimation {
publicstaticclassDrawerArrowDrawableToggleextendsDrawerArrowDrawableimplementsDrawerToggle {
    privatefinal Activity mActivity;

    publicDrawerArrowDrawableToggle(Activity activity, Context themedContext) {
        super(themedContext);
        mActivity = activity;
    }

    publicvoidsetPosition(float position) {
        if (position == 1f) {
            setVerticalMirror(true);
        } elseif (position == 0f) {
            setVerticalMirror(false);
        }
        setProgress(position);
    }

    publicfloatgetPosition() {
        return getProgress();
    }
}

/**
 * Interface for toggle drawables. Can be public in the future
 */publicstaticinterfaceDrawerToggle {

    publicvoidsetPosition(float position);

    publicfloatgetPosition();
}

}

Then make a variable in activity or fragment for this animated drawable and set the drawable as drawable resource for home icon by .setHomeAsUpIndicator(drawerDrawable)

publicstatic DrawerArrowAnimation.DrawerArrowDrawableToggle drawerDrawable;


//this is if you are using fragments
((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
drawerDrawable = new DrawerArrowAnimation.DrawerArrowDrawableToggle(((AppCompatActivity) getActivity()), ((AppCompatActivity) getActivity()).getSupportActionBar().getThemedContext());
    ((AppCompatActivity) getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setHomeButtonEnabled(true);
    ((AppCompatActivity) getActivity()).getSupportActionBar().setHomeAsUpIndicator(drawerDrawable);

Now you can use drawerDrawable.setPosition(float position); setPosition from 0.0f to 1.0f to animate the drawable icon.