Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Toolbar becomes translucent when navigating back

Example Project Illustrating Issue

https://github.com/justincpollard/TransparentToolbarExample

Background

We have an Activity/Fragment combination used to display content in our app. Our users are able to navigate between pieces of content, which essentially lays these Activity/Fragment combos one on top of the other. Tapping either the hardware back button or the up button simply reveals the prior piece of content.

The following references the example project

When a user is viewing a piece of content, the Toolbar (android.support.v7.widget.Toolbar) and its text begin transparent. We accomplish that like so:

public void onCreateView(...) {
    ...
    toolbar = (Toolbar) v.findViewById(R.id.toolbar);
    ...
    actionBarDrawable = toolbar.getBackground();
    actionBarDrawable.setAlpha(0);
    actionBarText.setTextColor(Color.argb(0, 255, 255, 255));
    ...
}

If the user scrolls past a certain point on the page, e.g. scrolls an amount equal to the height of the Toolbar, we animate the alpha of the toolbar background & text from 0 to 255, essentially revealing the toolbar:

private void animateToolbar(final int start, final int finish) {
    toolbarIsAnimating = true;
    ValueAnimator animator = ValueAnimator.ofInt(start, finish);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
         toolbarAlpha = (int) animation.getAnimatedValue();
         actionBarDrawable.setAlpha(toolbarAlpha);
         actionBarText.setTextColor(Color.argb(toolbarAlpha, 255, 255, 255));
        if(toolbarAlpha == finish) {
          toolbarIsAnimating = false;
        }
       }
    });
    animator.setInterpolator(new DecelerateInterpolator());
    animator.setDuration(300);
    animator.start();
}

Problem

When the user navigates from the original piece of content to another piece of content AFTER scrolling past the threshold point (i.e. the Toolbar background has been animated into view), pressing back/up reveal the original Activity/Fragment combo, but the Toolbar is completely transparent.

To illustrate in the example project, build and open the app, scroll to the bottom of the page, and press the "MORE CONTENT" button. Once you've navigated to the second Activity, press the back button. Notice that the Toolbar is transparent, though the title text is still visible.

Has anyone seen this problem before? I've only seen it on Android 5.+, but this will become more of a problem as adoption of 5.+ continues to grow.

Thanks for your help!

like image 575
Justin Pollard Avatar asked Apr 21 '26 00:04

Justin Pollard


1 Answers

Found the solution:

Instead of

toolbar.getBackground().setAlpha();

You need to use

toolbar.getBackground().mutate().setAlpha();

Apparently drawables are by default sharing states among each other, calling mutate() will make this particular drawable not sharing state.

like image 152
Guster Avatar answered Apr 22 '26 13:04

Guster