Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hamburger to arrow animation not working programmatically

I have made a server directory browsing app which would change contents within the Activity itself. I have been adding a feature: Navigation Drawer and handling the Hamburger and Back icon on the Toolbar as follows:

  • Home directory:
    1. Hamburger icon as the default state.
    2. Would slide the navigation drawer on clicking the hamburger or at a sliding gesture.
    3. No state-change or animation of the hamburger when the drawer is slided.
    4. Animation of Hamburger to Back icon when a directory is chosen.
  • Any child directory:
    1. Back button from the previous animation whose sole purpose is to go to a parent directory.
    2. Would slide the navigation drawer at a sliding gesture.
    3. No state-change or animation of the Back icon when the drawer is slided using gesture or when it goes into an another child directory of this directory.
    4. Animation of Back Arrow to Hamburger icon when it comes back to Home directory using back icon or onBackPressed.

I am able to get the animation of Hamburger to Back icon using this answer (Code is used verbatim is as below) but wasn't able to get the Hamburger icon again when coming back into the home directory (didn't included that code and went for another approach which is the next part):

ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        float slideOffset = (Float) valueAnimator.getAnimatedValue();
        mDrawerToggle.onDrawerSlide(drawerLayout, slideOffset);
    }
});
anim.setInterpolator(new DecelerateInterpolator());
// You can change this duration to more closely match that of the default animation.
anim.setDuration(500);
anim.start();

For appropriate switching between Hamburger and Back icons when browsing to and fro from home and child directories, I have used this answer (Code verbatim as below) as a reference and was able to successfully implement it for 1, 2 and 3 features of home and child directories.

private void enableViews(boolean enable) {

    if(enable) {
        mDrawerToggle.setDrawerIndicatorEnabled(false);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getSupportActionBar().setHomeButtonEnabled(true); // comment this line of code

        if(!mToolBarNavigationListenerIsRegistered) {
            mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // Doesn't have to be onBackPressed
                    onBackPressed();
                }
            });
            mToolBarNavigationListenerIsRegistered = true;
        }
    }
    else {
        // Remove back button
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        getSupportActionBar().setHomeButtonEnabled(false); // comment this line of code

        // Show hamburger
        mDrawerToggle.setDrawerIndicatorEnabled(true);
        // Remove the/any drawer toggle listener
        mDrawerToggle.setToolbarNavigationClickListener(null);
        mToolBarNavigationListenerIsRegistered = false;
    }
}

Coming to the issue at hand which is: While browsing directories, of the switching to and fro from Hamburger to Back icon, the animation part is not working at all. But the states of both the icons are successfully changed along with their functionalities. Let me know if you need some more information for troubleshooting.

like image 232
burglarhobbit Avatar asked Feb 27 '26 03:02

burglarhobbit


2 Answers

You can see a working example of navigation drawer activity if you just create a new project, add an activity and use template NavigationDrawer (if you use Android Studio. Otherwise download this repo)

When I want to learn a new layout I just load up the template and then change individual pieces of code until I have what I wanted. This way you can see what does what, what stops working when you delete some line and how things should be done.

like image 167
aljazerzen Avatar answered Mar 01 '26 16:03

aljazerzen


I was finally able to solve it, came to know about the behaviour of the ActionBarDrawerToggle in a much deeper way after tinkering it with the default NavigationBarActivity from Android studio.

  • The overriding of onDrawerSlide of the mDrawerToggle to block the animation of hamburger by the sliding drawer was the cause of the same blocking of animation of hamburger to arrow in the animatior function in the first place. Notice these two lines from the two different pieces of code (didn't include it earlier, but you get the idea):

    @Override
    public void onDrawerSlide(View view, float slideOffset) {
        // blocks the animation
        super.onDrawerSlide(view, 0);
    }
    
    // from the animator function above
    mDrawerToggle.onDrawerSlide(drawerLayout, slideOffset);
    

Solution: I removed the overrided onDrawerSlide function, but then, the sliding drawer hamburger to arrow animation would come back as well.

Counter-Solution: I also found out the sliding drawer animation of hamburger to arrow happens due to this line: mDrawerLayout.setDrawerListener(mDrawerToggle) which again is a deprecated function. So I just commented out this line and everything is working as expected.

like image 28
burglarhobbit Avatar answered Mar 01 '26 17:03

burglarhobbit



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!