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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With