Android toolbar becomes semi-transparent when navigating backwards
Sample project illustrating the problem
https://github.com/justincpollard/TransparentToolbarExample
Background
We have a combination Activity
/ Fragment
used to display content in our application. Our users can navigate between pieces of content that essentially lay these combines Activity
/ Fragment
one on top of the other. Pressing the hardware return button or the up button simply shows the previous piece of content.
Below is a sample project
When the user views a piece of content, the toolbar ( android.support.v7.widget.Toolbar
) and its text become transparent. We do this:
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, eg. scrolls an amount equal to the height of the toolbar, we animate the alpha of the toolbar background and the text from 0 to 255, essentially expanding 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 slice to another slice of content AFTER scrolling past the threshold point (i.e. the toolbar background has been animated), pressing back / up shows the original Activity
/ Fragment
combo, but the toolbar is completely transparent.
To illustrate a project with an example, create and open an application, scroll to the bottom of the page and click the MORE CONTENT button. When you get to the second Activity
, click the Back button. Note that the toolbar is transparent, although the title text is still visible.
Has anyone seen this problem before? I've only seen this on Android 5. +, but this will become a problem as 5. + adoption continues to grow.
Thank you for your help!
source to share
Ridiculous, @Gricher and I came across the answers right at the same time. I haven't tested his answer, but here's mine:
No need to deal with Drawable
, the returned c toolbar.getBackground()
. You can do the same using a similar technique to what I used to change the text color of the action bar.
Use this for the method animateToolbar()
:
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();
toolbar.setBackgroundColor(Color.argb(toolbarAlpha, 56, 204, 255));
actionBarText.setTextColor(Color.argb(toolbarAlpha, 255, 255, 255));
if(toolbarAlpha == finish) {
toolbarIsAnimating = false;
}
}
});
animator.setInterpolator(new DecelerateInterpolator());
animator.setDuration(300);
animator.start();
}
The key is this:
toolbar.setBackgroundColor(Color.argb(toolbarAlpha, 56, 204, 255));
Works on Android 6. + (as it is today).
source to share