Android - How to change status bar color with crossfade animation

Question

I want to achieve color changing status bar with crossfade animation as shown below. Can I have a clue how to do that?

Status bar color change animation:

Thanks!

Edited (7 July 2018) - C'mon guys, this is NOT a duplicate

Anyway, finally I found a solution using ValueAnimator and ArgbEvaluator.

val mColorAnimation = ValueAnimator.ofObject(ArgbEvaluator(), firstColor, secondColor, thirdColor, fourthColor) 

mColorAnimation.duration = (pageCount - 1) * 10000000000L

mColorAnimation.addUpdateListener { animator ->
    val color = animator.animatedValue as Int

    // change status, navigation, and action bar color
    window.statusBarColor = color
    window.navigationBarColor = color
    supportActionBar?.setBackgroundDrawable(ColorDrawable(color))
}

main_viewpager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(state: Int) { /* unused */ }
    override fun onPageSelected(position: Int) { /* unused */ }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        mColorAnimation.currentPlayTime = ((positionOffset + position) * 10000000000).toLong()
    }
})

Answer 1

There is already an library hosted on github to show how to animate changing the toolbar and status bar colors with a circular reveal effect. Check this out.

Here is the code snippet

public class MainActivity extends Activity {

    private View mRevealView;
    private View mRevealBackgroundView;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.appbar);
        mToolbar.setTitle(getString(R.string.app_name));

        mRevealView = findViewById(R.id.reveal);
        mRevealBackgroundView = findViewById(R.id.revealBackground);

        ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                boolean on = ((ToggleButton) v).isChecked();

                if (on) {
                    animateAppAndStatusBar(R.color.primary, R.color.accent);
                } else {
                    animateAppAndStatusBar(R.color.accent, R.color.primary);
                }
            }
        });

        setActionBar(mToolbar);
    }

    private void animateAppAndStatusBar(int fromColor, final int toColor) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                mRevealView,
                mToolbar.getWidth() / 2,
                mToolbar.getHeight() / 2, 0,
                mToolbar.getWidth() / 2);

        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                mRevealView.setBackgroundColor(getResources().getColor(toColor));
            }
        });

        mRevealBackgroundView.setBackgroundColor(getResources().getColor(fromColor));
        animator.setStartDelay(200);
        animator.setDuration(125);
        animator.start();
        mRevealView.setVisibility(View.VISIBLE);
    }
}

Hope it helps.

Answer 2

This is how you can programmatically change status bar color. Now you can change status bar color in your ViewPager listener.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.RED);
}