Implementing a Color Gradient Animation in Android with GradientDrawable and PropertyAnimator

1. Introduction

The article introduces a visual effect where a control’s background color gradually changes from one color to another after a click, aiming for a smooth transition without using custom views.

2. Scenario Analysis

It discusses the need for a gradual color change using gradients (linear, radial, sweep) and decides to use a linear gradient for the demonstration.

3. Implementation

(1) Gradient Implementation

Instead of static XML, the gradient is created programmatically with GradientDrawable . An initial demo uses two colors (purple and pink) and sets the drawable as the background of a TextView .

private fun setBg(){
    val colors = intArrayOf(
        Color.parseColor("#9932CC"),
        Color.parseColor("#FF69B4")
    )
    val drawable = GradientDrawable()
    drawable.gradientType = GradientDrawable.LINEAR_GRADIENT
    drawable.orientation = GradientDrawable.Orientation.LEFT_RIGHT
    drawable.colors = colors
    tvTest?.background = drawable
}

Attempts to animate the gradient using the drawable’s level property reveal limitations, prompting a switch to the newer setColors(colors, offsets) method available from Android Q.

(2) Color Transition Process

A ValueAnimator drives a float variable x from 0 to 1.1, which is used as offsets for the gradient, creating a smooth transition.

private fun setBg() {
    val colors = intArrayOf(
        Color.parseColor("#9932CC"),
        Color.parseColor("#FF69B4")
    )
    val offsets = floatArrayOf(x - 0.1f, x)
    val drawable = GradientDrawable()
    drawable.gradientType = GradientDrawable.LINEAR_GRADIENT
    drawable.orientation = GradientDrawable.Orientation.LEFT_RIGHT
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        drawable.setColors(colors, offsets)
    }
    tvTest?.background = drawable
}

private var mValueAnimator1: ValueAnimator? = null
fun startToStopChange() {
    if (mValueAnimator1 == null) {
        mValueAnimator1 = ValueAnimator.ofFloat(0f, 1.1f)
        mValueAnimator1?.addUpdateListener {
            x = it.animatedValue as Float
            setBg()
        }
    }
    mValueAnimator1?.setDuration(2000)?.start()
}

The full activity code ties everything together, initializing the view, setting the initial background, and starting the animation on click.

var tvTest: TextView? = null
var x = 0f
private var mValueAnimator1: ValueAnimator? = null
@SuppressLint("MissingInflatedId")
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.test_main)
    tvTest = findViewById(R.id.tv_test)
    setBg()
    tvTest?.setOnClickListener { startToStopChange() }
}

// setBg() and startToStopChange() implementations as shown above

4. Summary

The effect is achieved in two steps: first, create a linear GradientDrawable with two colors; second, animate the gradient by updating its offsets via a ValueAnimator . The article emphasizes that complex UI effects are built from simple, well‑understood fundamentals.