animateContentSize

Modifier in Compose Animation

This modifier animates its own size when its child modifier (or the child composable if it is already at the tail of the chain) changes size. This allows the parent modifier to observe a smooth size change, resulting in an overall continuous visual change.

A [FiniteAnimationSpec] can be optionally specified for the size change animation. By default, [spring] will be used.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.animation:animation:1.8.0-alpha01")
}

Overloads

fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold
        ),
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null
): Modifier

Parameters

name	description
animationSpec	a finite animation that will be used to animate size change, [spring] by default
finishedListener	an optional listener to be called when the content change animation is completed.

fun Modifier.animateContentSize(
    animationSpec: FiniteAnimationSpec<IntSize> =
        spring(
            stiffness = Spring.StiffnessMediumLow,
            visibilityThreshold = IntSize.VisibilityThreshold
        ),
    alignment: Alignment = Alignment.TopStart,
    finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null,
): Modifier

Parameters

name	description
animationSpec	a finite animation that will be used to animate size change, [spring] by default
alignment	sets the alignment of the content during the animation. [Alignment.TopStart] by default.
finishedListener	an optional listener to be called when the content change animation is completed.

Code Example

AnimateContent

@Composable
fun AnimateContent() {
    val shortText = "Hi"
    val longText = "Very long text\nthat spans across\nmultiple lines"
    var short by remember { mutableStateOf(true) }
    Box(
        modifier =
            Modifier.background(Color.Blue, RoundedCornerShape(15.dp))
                .clickable { short = !short }
                .padding(20.dp)
                .wrapContentSize()
                .animateContentSize()
    ) {
        Text(
            if (short) {
                shortText
            } else {
                longText
            },
            style = LocalTextStyle.current.copy(color = Color.White)
        )
    }
}