359

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.

Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
hpique
  • 112,774
  • 126
  • 328
  • 461
  • 11
    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. – hpique Apr 10 '10 at 20:16
  • 1
    A good [video tutorial](https://www.youtube.com/watch?v=bSgUn2rZiko) – Alex Jolig Apr 08 '17 at 04:39

18 Answers18

535

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);
    
Benoit Duffez
  • 9,889
  • 11
  • 69
  • 114
Roman Minenok
  • 8,890
  • 4
  • 23
  • 26
406

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.

Community
  • 1
  • 1
idolize
  • 6,079
  • 4
  • 21
  • 32
  • 3
    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? – hpique Jul 09 '10 at 20:36
  • 6
    Solved it by starting the TransitionDrawable AFTER starting the animation. – hpique Jul 09 '10 at 21:00
  • 2
    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. – idolize Jul 10 '10 at 04:28
  • 4
    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. – hpique Jul 10 '10 at 09:43
  • Is it possible to use this method in a looping or auto-reversing like `UIView` animations on iOS? – Dan F May 22 '13 at 17:28
  • It does not work *smoothly* cross-fade as I expected. using 4.1.2 device. – Youngjae Dec 30 '13 at 06:17
  • How about for a textview background animation from previous color to the next? – Si8 Jan 02 '14 at 18:21
  • I had an xml as a drawable and wanted to change to another xml. This method works in such case. – Darpan Sep 01 '15 at 12:52
  • @idolize i want this effect continuously . i tried it with a timer task . but it is not smooth. what am i suppose to do – DKV Nov 19 '15 at 12:46
  • 2
    One of the main drawbacks is that there is no animation complete listener – Leo Droidcoder Aug 16 '18 at 09:49
  • 2
    is it possible to animate more than 2 colors? – Narek Hayrapetyan Jul 13 '19 at 13:19
  • Thanks a lot. I waste 5 hours to find this solution – Duong Phan Nov 24 '20 at 13:43
140

Depending on how your view gets its background color and how you get your target color there are several different ways to do this.

The first two uses the Android Property Animation framework.

Use a Object Animator if:

  • Your view have its background color defined as a argb value in a xml file.
  • Your view have previously had its color set by view.setBackgroundColor()
  • Your view have its background color defined in a drawable that DOES NOT defines any extra properties like stroke or corner radiuses.
  • Your view have its background color defined in a drawable and you want to remove any extra properties like stroke or corner radiuses, keep in mind that the removal of the extra properties will not animated.

The object animator works by calling view.setBackgroundColor which replaces the defined drawable unless is it an instance of a ColorDrawable, which it rarely is. This means that any extra background properties from a drawable like stroke or corners will be removed.

Use a Value Animator if:

  • Your view have its background color defined in a drawable that also sets properties like the stroke or corner radiuses AND you want to change it to a new color that is decided while running.

Use a Transition drawable if:

  • Your view should switch between two drawable that have been defined before deployment.

I have had some performance issues with Transition drawables that runs while I am opening a DrawerLayout that I haven't been able to solve, so if you encounter any unexpected stuttering you might have run into the same bug as I have.

You will have to modify the Value Animator example if you want to use a StateLists drawable or a LayerLists drawable, otherwise it will crash on the final GradientDrawable background = (GradientDrawable) view.getBackground(); line.

Object Animator:

View definition:

<View
    android:background="#FFFF0000"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Create and use a ObjectAnimator like this.

final ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(view,
                                                                       "backgroundColor",
                                                                       new ArgbEvaluator(),
                                                                       0xFFFFFFFF,
                                                                       0xff78c5f9);
backgroundColorAnimator.setDuration(300);
backgroundColorAnimator.start();

You can also load the animation definition from a xml using a AnimatorInflater like XMight does in Android objectAnimator animate backgroundColor of Layout

Value Animator:

View definition:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Drawable definition:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke
        android:color="#edf0f6"
        android:width="1dp"/>
    <corners android:radius="3dp"/>

</shape>

Create and use a ValueAnimator like this:

final ValueAnimator valueAnimator = ValueAnimator.ofObject(new ArgbEvaluator(),
                                                           0xFFFFFFFF,
                                                           0xff78c5f9);

final GradientDrawable background = (GradientDrawable) view.getBackground();
currentAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(final ValueAnimator animator) {
        background.setColor((Integer) animator.getAnimatedValue());
    }

});
currentAnimation.setDuration(300);
currentAnimation.start();

Transition drawable:

View definition:

<View
    android:background="@drawable/example"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

Drawable definition:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke
                android:color="#edf0f6"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#78c5f9"/>
            <stroke
                android:color="#68aff4"
                android:width="1dp"/>
            <corners android:radius="3dp"/>
        </shape>
    </item>
</transition>

Use the TransitionDrawable like this:

final TransitionDrawable background = (TransitionDrawable) view.getBackground();
background.startTransition(300);

You can reverse the animations by calling .reverse() on the animation instance.

There are some other ways to do animations but these three is probably the most common. I generally use a ValueAnimator.

Community
  • 1
  • 1
Mattias
  • 1,600
  • 2
  • 12
  • 18
  • actually it is possible to define and use the TransitionDrawable in code, but for some reason, it doesn't work the second time. weird. – android developer Apr 30 '14 at 08:31
  • I am able to use the object animator even when my view has ColorDrawable set. I just save it to a local variable, set it to null and when the animation is finished, set the original ColorDrawable back. – Miloš Černilovský Jul 21 '15 at 13:13
59

You can make an object animator. For example, I have a targetView and I want to change your background color:

int colorFrom = Color.RED;
int colorTo = Color.GREEN;
int duration = 1000;
ObjectAnimator.ofObject(targetView, "backgroundColor", new ArgbEvaluator(), colorFrom, colorTo)
    .setDuration(duration)
    .start();
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
ademar111190
  • 13,115
  • 12
  • 74
  • 101
  • 3
    From API 21, you can use `ofArgb(targetView, "backgroundColor", colorFrom, colorTo)`. Its implementation is just `ofInt(...).setEvaluator(new ArgbEvaluator())`. – ypresto Aug 09 '16 at 05:10
24

If you want color animation like this,

Enter image description here

this code will help you:

ValueAnimator anim = ValueAnimator.ofFloat(0, 1);   
anim.setDuration(2000);

float[] hsv;
int runColor;
int hue = 0;
hsv = new float[3]; // Transition color
hsv[1] = 1;
hsv[2] = 1;
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {

        hsv[0] = 360 * animation.getAnimatedFraction();

        runColor = Color.HSVToColor(hsv);
        yourView.setBackgroundColor(runColor);
    }
});

anim.setRepeatCount(Animation.INFINITE);

anim.start();
RBK
  • 2,277
  • 2
  • 24
  • 49
  • 9
    Where is the part when **anim** variable is initialized? – VoW Aug 22 '16 at 18:26
  • @VoW , it's just instance of ValueAnimator. – RBK Apr 24 '18 at 09:16
  • It should be `anim.setRepeatCount(ValueAnimator.INFINITE);` not Animation.INFINITE for now it's the same, but we have no guarantees – MikhailKrishtop Oct 04 '18 at 12:50
  • @MikhailKrishtop what's wrong with Animation.INFINITE? https://developer.android.com/reference/android/view/animation/Animation.html#INFINITE – RBK Oct 05 '18 at 07:05
18

best way is to use ValueAnimator and ColorUtils.blendARGB

 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
 valueAnimator.setDuration(325);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {

              float fractionAnim = (float) valueAnimator.getAnimatedValue();

              view.setBackgroundColor(ColorUtils.blendARGB(Color.parseColor("#FFFFFF")
                                    , Color.parseColor("#000000")
                                    , fractionAnim));
        }
});
valueAnimator.start();
Primož Kralj
  • 5,534
  • 14
  • 65
  • 125
Rasoul Miri
  • 5,433
  • 43
  • 52
13

Another easy way to achieve this is to perform a fade using AlphaAnimation.

  1. Make your view a ViewGroup
  2. Add a child view to it at index 0, with match_parent layout dimensions
  3. Give your child the same background as the container
  4. Change to background of the container to the target color
  5. Fade out the child using AlphaAnimation.
  6. Remove the child when the animation is complete (using an AnimationListener)
Stephane JAIS
  • 1,365
  • 14
  • 13
12

The documentation on XML powered animations is horrible. I've searched around hours just to animate the background color of a button when pressing... The sad thing is that the animation is only one attribute away: You can use exitFadeDuration in the selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="200">

    <item android:state_pressed="true">
        <shape android:tint="#3F51B5" />
    </item>

    <item>
        <shape android:tint="#F44336" />
    </item>

</selector>

Then just use it as background for your view. No Java/Kotlin code needed.

mbo
  • 4,033
  • 1
  • 28
  • 50
  • 3
    Excellent answer. Note that you may need `android:enterFadeDuration` as well; my experience was that, without it, my animation didn't work the second time. – String Feb 13 '20 at 18:38
10

This is the method I use in a Base Activity to change background. I'm using GradientDrawables generated in code, but could be adapted to suit.

    protected void setPageBackground(View root, int type){
        if (root!=null) {
            Drawable currentBG = root.getBackground();
            //add your own logic here to determine the newBG 
            Drawable newBG = Utils.createGradientDrawable(type); 
            if (currentBG==null) {
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                    root.setBackgroundDrawable(newBG);
                }else{
                    root.setBackground(newBG);
                }
            }else{
                TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{currentBG, newBG});
                transitionDrawable.setCrossFadeEnabled(true);
                if(Build.VERSION.SDK_INT<Build.VERSION_CODES.JELLY_BEAN){
                     root.setBackgroundDrawable(transitionDrawable);
                }else{
                    root.setBackground(transitionDrawable);
                }
                transitionDrawable.startTransition(400);
            }
        }
    }

update: In case anyone runs in to same issue I found, for some reason on Android <4.3 using setCrossFadeEnabled(true) cause a undesirable white out effect so I had to switch to a solid colour for <4.3 using @Roman Minenok ValueAnimator method noted above.

scottyab
  • 21,990
  • 15
  • 91
  • 102
9

Answer is given in many ways. You can also use ofArgb(startColor,endColor) of ValueAnimator.

for API > 21:

int cyanColorBg = ContextCompat.getColor(this,R.color.cyan_bg);
int purpleColorBg = ContextCompat.getColor(this,R.color.purple_bg);

ValueAnimator valueAnimator = ValueAnimator.ofArgb(cyanColorBg,purpleColorBg);
        valueAnimator.setDuration(500);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
              @Override
              public void onAnimationUpdate(ValueAnimator valueAnimator) {
                   relativeLayout.setBackgroundColor((Integer)valueAnimator.getAnimatedValue());
              }
        });
        valueAnimator.start();
Palak Darji
  • 964
  • 14
  • 26
8

Here's a nice function that allows this:

public static void animateBetweenColors(final @NonNull View viewToAnimateItsBackground, final int colorFrom,
                                        final int colorTo, final int durationInMs) {
    final ColorDrawable colorDrawable = new ColorDrawable(durationInMs > 0 ? colorFrom : colorTo);
    ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable);
    if (durationInMs > 0) {
        final ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
        colorAnimation.addUpdateListener(animator -> {
            colorDrawable.setColor((Integer) animator.getAnimatedValue());
            ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable);
        });
        colorAnimation.setDuration(durationInMs);
        colorAnimation.start();
    }
}

And in Kotlin:

@JvmStatic
fun animateBetweenColors(viewToAnimateItsBackground: View, colorFrom: Int, colorTo: Int, durationInMs: Int) {
    val colorDrawable = ColorDrawable(if (durationInMs > 0) colorFrom else colorTo)
    ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable)
    if (durationInMs > 0) {
        val colorAnimation = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
        colorAnimation.addUpdateListener { animator: ValueAnimator ->
            colorDrawable.color = (animator.animatedValue as Int)
            ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable)
        }
        colorAnimation.duration = durationInMs.toLong()
        colorAnimation.start()
    }
}
android developer
  • 106,412
  • 122
  • 641
  • 1,128
  • this doesnt support lower end version phones – Kartheek s Jul 05 '14 at 05:12
  • 2
    @Kartheeks you mean Android 10 and below? if so, you can easily use a "nineOldAndroids" library to support it: http://nineoldandroids.com/ . the syntax is almost exactly the same. – android developer Jul 05 '14 at 08:20
  • for lower version colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { colorDrawable.setColor((Integer) animation.getAnimatedValue()); ViewCompat.setBackground(viewToAnimateItsBackground, colorDrawable); } }); – Mahbubur Rahman Khan Mar 21 '20 at 21:22
7

Use the below function for Kotlin:

private fun animateColorValue(view: View) {
    val colorAnimation =
        ValueAnimator.ofObject(ArgbEvaluator(), Color.GRAY, Color.CYAN)
    colorAnimation.duration = 500L
    colorAnimation.addUpdateListener { animator -> view.setBackgroundColor(animator.animatedValue as Int) }
    colorAnimation.start()
}

Pass whatever view you want to change color of.

Vlad
  • 5,448
  • 2
  • 43
  • 39
Minion
  • 678
  • 9
  • 14
6

add a folder animator into res folder. (the name must be animator). Add an animator resource file. For example res/animator/fade.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="backgroundColor"
        android:duration="1000"
        android:valueFrom="#000000"
        android:valueTo="#FFFFFF"
        android:startOffset="0"
        android:repeatCount="-1"
        android:repeatMode="reverse" />
</set>

Inside Activity java file, call this

View v = getWindow().getDecorView().findViewById(android.R.id.content);
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.fade);
set.setTarget(v);
set.start();
canbax
  • 2,238
  • 18
  • 28
5

I've found that the implementation used by ArgbEvaluator in the Android source code does best job in transitioning colors. When using HSV, depending on the two colors, the transition was jumping through too many hues for me. But this method's doesn't.

If you are trying to simply animate, use ArgbEvaluator with ValueAnimator as suggested here:

ValueAnimator colorAnimation = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnimation.addUpdateListener(new AnimatorUpdateListener() {

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

});
colorAnimation.start();

However, if you are like me and want to tie your transition with some user gesture or other value passed from an input, the ValueAnimator is not of much help (unless your are targeting for API 22 and above, in which case you can use the ValueAnimator.setCurrentFraction() method). When targeting below API 22, wrap the code found in ArgbEvaluator source code in your own method, as shown below:

public static int interpolateColor(float fraction, int startValue, int endValue) {
    int startA = (startValue >> 24) & 0xff;
    int startR = (startValue >> 16) & 0xff;
    int startG = (startValue >> 8) & 0xff;
    int startB = startValue & 0xff;
    int endA = (endValue >> 24) & 0xff;
    int endR = (endValue >> 16) & 0xff;
    int endG = (endValue >> 8) & 0xff;
    int endB = endValue & 0xff;
    return ((startA + (int) (fraction * (endA - startA))) << 24) |
            ((startR + (int) (fraction * (endR - startR))) << 16) |
            ((startG + (int) (fraction * (endG - startG))) << 8) |
            ((startB + (int) (fraction * (endB - startB))));
}

And use it however you wish.

Community
  • 1
  • 1
fahmy
  • 3,089
  • 26
  • 40
1

Based on ademar111190's answer, I have created this method the will pulse the background color of a view between any two colors:

private void animateBackground(View view, int colorFrom, int colorTo, int duration) {


    ObjectAnimator objectAnimator = ObjectAnimator.ofObject(view, "backgroundColor", new ArgbEvaluator(), colorFrom, colorTo);
    objectAnimator.setDuration(duration);
    //objectAnimator.setRepeatCount(Animation.INFINITE);
    objectAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
            // Call this method again, but with the two colors switched around.
            animateBackground(view, colorTo, colorFrom, duration);
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });
    objectAnimator.start();
}
ban-geoengineering
  • 15,533
  • 18
  • 140
  • 225
1

You can use ArgbEvaluatorCompat class above API 11.

implementation 'com.google.android.material:material:1.0.0' 


ValueAnimator colorAnim = ValueAnimator.ofObject(new ArgbEvaluatorCompat(), startColor, endColor);
colorAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mTargetColor = (int) animation.getAnimatedValue();
        }
    });
colorAnim.start();
akiller
  • 2,387
  • 21
  • 29
chan
  • 41
  • 1
  • 4
1

Roman Minenok answer in kotlin and as an extension function

fun View.colorTransition(@ColorRes startColor: Int, @ColorRes endColor: Int, duration: Long = 250L){
    val colorFrom = ContextCompat.getcolor(context, startColor)
    val colorTo =  ContextCompat.getcolor(context, endColor)
    val colorAnimation: ValueAnimator = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
    colorAnimation.duration = duration

    colorAnimation.addUpdateListener {
        if (it.animatedValue is Int) {
            val color=it.animatedValue as Int
            setBackgroundColor(color)
        }
    }
    colorAnimation.start()
}

If you want to change from current background color to new color then you can use this

fun View.colorTransition(@ColorRes endColor: Int, duration: Long = 250L){
    var colorFrom = Color.TRANSPARENT
    if (background is ColorDrawable)
        colorFrom = (background as ColorDrawable).color

    val colorTo =  ContextCompat.getcolor(context, endColor)
    val colorAnimation: ValueAnimator = ValueAnimator.ofObject(ArgbEvaluator(), colorFrom, colorTo)
    colorAnimation.duration = duration

    colorAnimation.addUpdateListener {
        if (it.animatedValue is Int) {
            val color=it.animatedValue as Int
            setBackgroundColor(color)
        }
    }
    colorAnimation.start()
}

Usage

myView.colorTransition(R.color.bg_color)
Manohar Reddy
  • 15,894
  • 7
  • 77
  • 109
1

You can use ValueAnimator like this

 fun startColorAnimation(v: View) {
    val colorStart = v.solidColor
    val colorEnd = Color.RED
    val colorAnim: ValueAnimator = ObjectAnimator.ofInt(v, "backgroundColor", colorStart, colorEnd)
    colorAnim.setDuration(1000)
    colorAnim.setEvaluator(ArgbEvaluator())
    colorAnim.repeatCount = 1
    colorAnim.repeatMode = ValueAnimator.REVERSE
    colorAnim.start()
}
Hassan
  • 45
  • 1
  • 7