jetpack compose - Animate color change

Compose Animate Color Change

Animation plays an important part in an android application lifecycle. Mobile app users like animation while they perform some tasks. Animations provide perfect visual feedback for user-generated action. As with native android SDK, the jetpack compose library has great tools to animate things on an android application.

This tutorial will demonstrate to us how we can animate the color change in our jetpack compose application. Such as we change a Column widget’s background color from Blue to Yellow after an event. This change can happen using animation with some specified duration interval.

In the following kotlin code snippets, we change a Box widget’s background color by a Button click event. The color transition happens using animation. And the interval of changing the color value is the jetpack compose default.

To make a color change animation we have to use the animateColorAsState() method. In this tutorial, we put this method as a variable value named ‘animatedColor’. We supplied this ‘animatedColor’ variable to the target Box widget’s ‘background’ parameter value. Using another variable we remember a color that is used for the Box’s current background color. On the Button click event, we change the current background color value to a new color. Now the ‘animateColorAsState()’ method takes its action and performs the actual color-changing animation.

The ‘animateColorAsState()’ method has four arguments which are targetValue, animationSpec, label, and finishedListener. In this tutorial, we only used the ‘targetValue’ parameter to animate color change. We change the target value by a Button click event that caused animation. Using the ‘animationSpec’ argument we can set the animation duration in milliseconds and more animation specifications. The ‘finishedListener’ argument is used to programmatically determine when the animation finish and allow to do some task after the animation finish. Simply we can think that when the color state changes the animation is displayed on the app screen.

This entire code is written in an android studio IDE. Copy the following code into your android studio main activity file and compile it and run it on an android device or an emulator to see the color change animation. We also displayed a screenshot of this tutorial output.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val isGreen = remember { mutableStateOf(value = true) }

        val animatedColor = animateColorAsState(
            if (isGreen.value) Color.Green else Color.Red
        )

        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Button(
                onClick = { isGreen.value = !isGreen.value }
            ) {
                Text(text = "Animate Color Change")
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(animatedColor.value)
            )

            val color = if (isGreen.value) Color.Green else Color.Red
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .background(color)
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}