State Based Animations in Jetpack Compose
1. Animate Float As State
MainActivity
Copy this code →
package com.codingbihar.jetpackcomposeskill
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.ui.Modifier
import com.codingbihar.jetpackcomposeskill.ui.theme.JetpackComposeSkillTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
JetpackComposeSkillTheme {
StateBasedAnimation()
}
}
}
}Animate Float as State Example
Used when you want to animate any property represented by a Float, such as opacity, scaling factors, or text size.
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
var floatValue by remember { mutableStateOf(false) }
var sp by remember { mutableStateOf("20") }
val size by animateFloatAsState(
targetValue = if (floatValue) 30f else 20f,
animationSpec = tween(durationMillis = 500),
label = ""
)
Box(modifier.clickable {
floatValue = !floatValue
sp = if (floatValue) 30.toString() else 20.toString()
}
) {
Text("State Based Animation ${sp}f", fontSize = size.sp)
}
}
}Animate Color As State
Useful when you want to animate the color of a UI element.
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
var color by remember { mutableStateOf(false) }
// Animate the text color of the box
val textColor by animateColorAsState(
targetValue = if (color) Color.Green else Color.Red,
animationSpec = tween(durationMillis = 500),
label = ""
)
Box(modifier.clickable {
color = !color
}
) {
Text("State Based Animation", color = textColor)
}
}
}Animate Dp As State
Commonly used to animate sizes, padding, margins, or dimensions.
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
var dpChange by remember { mutableStateOf(false) }
// Animate the background color of the box
val dpSize by animateDpAsState(
targetValue = if (dpExpanded) 400.dp else 200.dp,
animationSpec = tween(durationMillis = 500),
label = ""
)
Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
.size(dpSize)
.clickable {
dpChange = !dpChange
}
) {
Text("State Based Animation")
}
}
}Animate Size As State
Useful for animating the size of elements like Box or other composables.
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
var dpChanged by remember { mutableStateOf(false) }
// Animate the background color of the box
val dpSize by animateDpAsState(
targetValue = if (dpExpanded) 400.dp else 200.dp,
animationSpec = tween(durationMillis = 500),
label = ""
)
Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
.size(dpSize)
.clickable {
dpChanged = !dpChanged
}
) {
Text("State Based Animation")
}
}
}Animate Int As State
Useful for properties like integer-based sizes or indices.
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun StateBasedAnimation(modifier: Modifier = Modifier) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
var sizeExpanded by remember { mutableStateOf(false) }
// Animate the size of the box using an Int value
val size by animateIntAsState(
targetValue = if (sizeExpanded) 400 else 200,
animationSpec = tween(durationMillis = 500),
label = ""
)
Box(modifier.background(color = MaterialTheme.colorScheme.surfaceTint)
.size(size.dp)
.clickable {
sizeExpanded = !sizeExpanded
}
) {
Text("State Based Animation")
}
}
}Also Read
Navigation with Jetpack Compose
Navigation is a method or technique used to allow users to move between different parts of an application. In Jetpack Compose, the navigation component helps manage and implement this navigation, ensuring a consistent and efficient user experience.....Text Clock in Android Jetpack Compose
A text clock is a type of clock that displays the time using digits, as opposed to an analog clock, which uses rotating hands to indicate the time. Digital clocks typically show hours, minutes, and sometimes seconds in numerical form, usually on an LED or LCD screen.......