Introduction

Changing a view's background color instantly works, but animating the change usually feels better for state transitions, validation feedback, and selected-item highlights. On Android, the most direct solution is to animate between two color values and apply each intermediate color to the view background.

The standard tool for this is ValueAnimator with an ArgbEvaluator, or ValueAnimator.ofArgb(...) on newer APIs.

Animating with ValueAnimator

The core idea is simple: start with one color, end with another, and update the view on each animation frame.

Kotlin example:

1import android.animation.ValueAnimator
2import android.graphics.Color
3import android.view.View
4
5fun animateBackground(view: View) {
6    val animator = ValueAnimator.ofArgb(
7        Color.parseColor("#FFFFFF"),
8        Color.parseColor("#4CAF50")
9    )
10
11    animator.duration = 400
12    animator.addUpdateListener { valueAnimator ->
13        val color = valueAnimator.animatedValue as Int
14        view.setBackgroundColor(color)
15    }
16    animator.start()
17}

This smoothly changes the background from white to green over 400 milliseconds.

Java Version with ArgbEvaluator

If you want a Java example that works with the classic property animation API:

1ValueAnimator animator = ValueAnimator.ofObject(
2        new ArgbEvaluator(),
3        Color.WHITE,
4        Color.BLUE
5);
6
7animator.setDuration(500);
8animator.addUpdateListener(animation -> {
9    int color = (int) animation.getAnimatedValue();
10    myView.setBackgroundColor(color);
11});
12animator.start();

The evaluator matters because colors are encoded integers. A normal integer interpolator would not produce visually correct color transitions.

When ObjectAnimator Helps

If the property you want to animate is already exposed in a way that ObjectAnimator can target, that API can be convenient. But for background color, many developers still prefer ValueAnimator because it makes the update step explicit and easy to control.

You can also animate the background drawable itself if you need more complex transitions, but that is usually more work than necessary for a simple color change.

State-Driven UI Example

A common use case is highlighting a view when validation succeeds:

1fun showSuccess(view: View) {
2    val animator = ValueAnimator.ofArgb(
3        0xFFFFCDD2.toInt(),
4        0xFFC8E6C9.toInt()
5    )
6
7    animator.duration = 300
8    animator.addUpdateListener {
9        view.setBackgroundColor(it.animatedValue as Int)
10    }
11    animator.start()
12}

This is cleaner than manually posting color updates or swapping drawable resources repeatedly.

Reversing or Reusing the Animation

If the view toggles between states, you may want to animate back as well:

1fun animateToggle(view: View, selected: Boolean) {
2    val start = if (selected) 0xFFFFFFFF.toInt() else 0xFF2196F3.toInt()
3    val end = if (selected) 0xFF2196F3.toInt() else 0xFFFFFFFF.toInt()
4
5    ValueAnimator.ofArgb(start, end).apply {
6        duration = 250
7        addUpdateListener { view.setBackgroundColor(it.animatedValue as Int) }
8        start()
9    }
10}

That pattern is useful for chips, cards, or selectable rows.

XML Alternatives

Android also supports animation and transition XML resources, but for simple background color interpolation, code is often the most straightforward. XML-based transitions become more attractive when multiple properties or scene changes are involved.

For a one-off background color effect, a small ValueAnimator block is usually easier to read and maintain.

Working with Resource Colors

If your project uses theme or resource colors, resolve them first instead of hard-coding hex values everywhere:

val start = context.getColor(R.color.surface)
val end = context.getColor(R.color.success)
ValueAnimator.ofArgb(start, end)

That keeps the animation aligned with the rest of the design system and makes later theme changes easier.

Common Pitfalls

• Interpolating colors as plain integers without an ARGB-aware evaluator produces incorrect transitions.
• Replacing the background with a flat color can remove shape drawables or ripple effects unexpectedly.
• Starting overlapping animators on repeated taps can create jittery visual results.
• Long or excessive color transitions tend to distract more than they help.

Summary

• Use ValueAnimator.ofArgb(...) or ArgbEvaluator to animate background colors correctly.
• Update the view's background color on each animation frame.
• 'ValueAnimator is usually the simplest choice for direct color transitions.'
• Be careful not to overwrite important background drawables unintentionally.
• Keep the animation short and purposeful so it improves feedback without adding UI noise.