Background Color Transition Animation in Android Jetpack Compose

Last Updated : 23 Jul, 2025

Many Android applications include an offer page or discount tags that change colors continuously to capture the attention of users. The principle underlying such bars/tags/coupons color shifting UI is the background color transition effect. In this post, we will look at how to create such background color transition effects.

Prerequisites

  1. Familiar with Kotlin and OOP Concepts as well
  2. Basic understanding of Jetpack Compose

Step-by-Step Implementation

Step 1 : Create a New Project in Android Studio

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Note : Select Kotlin as the programming language.

Step 2 : Working with MainActivity.kt

Let's create a composable function for making the background color transition possible.

  • Animatable: It's a value holder prop that animates the value we obtain from the animateTo property.
  • LaunchedEffect: The LaunchedEffect creates a new scope for a specific time interval until [given key value] it varies off.
  • Column: The column is composable and places its children in a vertical sequence. It is comparable to a LinearLayout in that it is vertically oriented. Additionally, we add a modifier to the column.
  • Modifier:  Modifiers serve as examples of the decorator pattern and are used to alter the composable to which they are applied. In this case, we use the Modifier to set the Column up to take up the whole available width and height using the Modifier.fillMaxSize() modifier.

MainActivity.kt:

Kotlin 
package com.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.*
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme(dynamicColor = false, darkTheme = false) {
                AnimateColorComponent()
            }
        }
    }
}

@Composable
fun AnimateColorComponent() {
    // Animatable is a value holder that can animate the value as it is changed via animateTo
    val color = remember { Animatable(Color.Red) }
    var isAnimating by remember { mutableStateOf(false) }

    // LaunchedEffect composable to animate when start button is clicked
    LaunchedEffect(isAnimating) {
        while (isAnimating) {
            // each animation has a duration of 100 ms
            color.animateTo(Color.Red, animationSpec = tween(100))
            color.animateTo(Color.Green, animationSpec = tween(100))
            color.animateTo(Color.Blue, animationSpec = tween(100))
            color.animateTo(Color.Yellow, animationSpec = tween(100))
            color.animateTo(Color.Magenta, animationSpec = tween(100))
            color.animateTo(Color.Cyan, animationSpec = tween(100))
        }
    }

    // update the background color
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color.value),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Button to start/stop animation
        Button(
            onClick = { isAnimating = !isAnimating },
            shape = RoundedCornerShape(12.dp),
            colors = ButtonDefaults.buttonColors(Color.White)
        ) {
            Text(if (isAnimating) "Stop" else "Start", color = Color.Black)
        }
    }
}

Output:

Comment

Explore