Animate change of view background color on Android

Asked 10/4, 2010 at 18:58 Answered 9/3, 2021 at 6:26

Solved android animation view background-color

392

How do you animate the change of background color of a view on Android?

For example:

I have a view with a red background color. The background color of the view changes to blue. How can I do a smooth transition between colors?

If this can't be done with views, an alternative will be welcome.

Dress answered 10/4, 2010 at 18:58 Comment(2)

One would expect that a smooth transition between colors shouldn't be a problem for a platform like Android. Maybe views aren't built for it, though. The question still stands. – Dress 10/4, 2010 at 20:16

A good video tutorial – Circumstantial 8/4, 2017 at 4:39

427

I ended up figuring out a (pretty good) solution for this problem!

You can use a TransitionDrawable to accomplish this. For example, in an XML file in the drawable folder you could write something like:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
    <item android:drawable="@drawable/original_state" />
    <item android:drawable="@drawable/new_state" />
</transition>

Then, in your XML for the actual View you would reference this TransitionDrawable in the android:background attribute.

At this point you can initiate the transition in your code on-command by doing:

TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground();
transition.startTransition(transitionTime);

Or run the transition in reverse by calling:

transition.reverseTransition(transitionTime);

See Roman's answer for another solution using the Property Animation API, which wasn't available at the time this answer was originally posted.

Stroh answered 8/7, 2010 at 23:29 Comment(12)

Thanks mxrider! This does answer the question. Unfortunately it doesn't work for me because the view that has the TransitionDrawable as background has to be animated as well, and it seems that the view animation overrides the background transition. Any ideas? – Dress 9/7, 2010 at 20:36

Solved it by starting the TransitionDrawable AFTER starting the animation. – Dress 9/7, 2010 at 21:0

Awesome! Glad you got it working! There is a lot of cool stuff you can do in xml with Android--much of which is kinda buried in the docs and not obvious in my opinion. – Stroh 10/7, 2010 at 4:28

Not obvious at all. I should mention that I'm not using xml in my case, as the color is dynamic. Your solution also works if you create the TransitionDrawable by code. – Dress 10/7, 2010 at 9:43

Is it possible to use this method in a looping or auto-reversing like UIView animations on iOS? – Basile 22/5, 2013 at 17:28

It does not work smoothly cross-fade as I expected. using 4.1.2 device. – Pathfinder 30/12, 2013 at 6:17

How about for a textview background animation from previous color to the next? – Asbestos 2/1, 2014 at 18:21

I had an xml as a drawable and wanted to change to another xml. This method works in such case. – Boaster 1/9, 2015 at 12:52

@Stroh i want this effect continuously . i tried it with a timer task . but it is not smooth. what am i suppose to do – Poverty 19/11, 2015 at 12:46

One of the main drawbacks is that there is no animation complete listener – Belton 16/8, 2018 at 9:49

is it possible to animate more than 2 colors? – Hydrolyse 13/7, 2019 at 13:19

Thanks a lot. I waste 5 hours to find this solution – Cricket 24/11, 2020 at 13:43

563

You can use new Property Animation Api for color animation:

int colorFrom = getResources().getColor(R.color.red);
int colorTo = getResources().getColor(R.color.blue);
ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.setDuration(250); // milliseconds
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animator) {
        textView.setBackgroundColor((int) animator.getAnimatedValue());
    }

});
colorAnimation.start();

For backward compatibility with Android 2.x use Nine Old Androids library from Jake Wharton.

The getColor method was deprecated in Android M, so you have two choices:

If you use the support library, you need to replace the getColor calls with:
```
ContextCompat.getColor(this, R.color.red);
```
if you don't use the support library, you need to replace the getColor calls with:
```
getColor(R.color.red);
```

Unship answered 22/1, 2013 at 20:42 Comment(10)

"musthave" solution if you are using Property Animation API (or NineOldAndroid). Animates very smoothly. – Ethyl 6/2, 2014 at 15:4

Is there any way to set the duration of the transition in this way? – Kaffir 22/3, 2014 at 17:29

@Kaffir yes, you are not not gonna believe it but the method call setDuration() :) – Unship 2/5, 2014 at 19:10

can i do this with drawables? – Backboard 9/3, 2016 at 12:6

ValueAnimator.ofArgb(colorFrom, colorTo) looks more to the point, but sadly it's new. – Nerta 29/3, 2016 at 11:37

To get current background color of layout, use this code. ((ColorDrawable)frame_layout.getBackground()).getColor() – Taproot 22/8, 2016 at 18:29

ArgbEvaluator is now private, don't use it. Legally reasons. – Access 9/8, 2017 at 14:10

@PedroPauloAmorim why do you think it's now private? Documentation does not agree with you. – Unship 11/8, 2017 at 9:19

ArgbEvaluator from android.animation is not restricted, but the same class of android.support.graphics.drawable is tagged as @RestrictTo(LIBRARY_GROUP). It generates a warning. – Access 11/8, 2017 at 9:34

i want color change animation like growing from bottom to top , how can i achieve that – Tiros 1/10, 2023 at 5:34

427

I ended up figuring out a (pretty good) solution for this problem!

You can use a TransitionDrawable to accomplish this. For example, in an XML file in the drawable folder you could write something like:

<?xml version="1.0" encoding="UTF-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- The drawables used here can be solid colors, gradients, shapes, images, etc. -->
    <item android:drawable="@drawable/original_state" />
    <item android:drawable="@drawable/new_state" />
</transition>

Then, in your XML for the actual View you would reference this TransitionDrawable in the android:background attribute.

At this point you can initiate the transition in your code on-command by doing:

TransitionDrawable transition = (TransitionDrawable) viewObj.getBackground();
transition.startTransition(transitionTime);

Or run the transition in reverse by calling:

transition.reverseTransition(transitionTime);