Does anyone have an impression about why `.animate...

# compose

[Ahaisting]

Does anyone have an impression about why .animateContentSize() works when expanding content, but not when contracting/shrinking it?

details and example in thread 🧵👇

[Ahaisting]

@ExperimentalAnimationApi
@Composable
private fun AnimateTest() {
    var expanded by remember { mutableStateOf(true) }
    Column(
        Modifier
            .background(Color.Red)
            .fillMaxSize()
    ) {
        Box(
            Modifier
                .animateContentSize()
                .height(if (expanded) 200.dp else 100.dp)
                .background(Color.Blue)
                .fillMaxWidth()
                .clickable { expanded = !expanded }

        )
    }
}

[Casey Brooks]

I can’t say that I’m too familiar with Compose animations, but my first guess is that this is working as intended. When you set height to 200dp when expanded, the Composable is given up to 200dp to measure itself, and animateContentSize() can then change the actual measurement over the animation duration until it hits the value height().

But when going the other way, the height is constrained to a max of 100, and so even though the animation wants to back the height down slowly, every animated value will always be higher the the max allotted by height().

Maybe use animateDpAsState() instead for animating between 2 specific values, or change the height of the child of Box() instead of the parent box with animateContentSize()?

[Ahaisting]

heyo! thanks for the response… your explanation makes sense and satiates my curiosity!

In addition, both of your alternative ideas (animateDpAsState() and using a child Box) work as solutions!

[Ahaisting]

this should go in the hall of fame of kotlinlang responses 🥇

[Casey Brooks]

Yeah, just to confirm myself this is what’s happening, the docs mention that “the size you specified might not be respected…” while “If you require the composable size to be fixed regardless of the incoming constraints, use the requiredSize modifier” https://developer.android.com/jetpack/compose/modifiers#padding-and-size

So Modifier.size() works by setting constraints on the children, but doesn’t set specific measured values (which is why the animation can override the measured size as long as it is less than the constraint). I suspect if you changed size to requiredSize in the original example, you’d get the same “jump” behavior going in both directions

[Doris Liu]

animateContentSize is animating the clip bounds around the child layout (i.e. Modifer.height(...) in your example). When the child snaps to a larger size, you notice the clip bounds growing to reveal more and more of the child. However, when the child snaps to a smaller size, the clip bounds animation may or may not be visually noticeable depending on your setup. If you have a sibling in this Column under the Box, you'll see the effect of the clip bounds change slowly pushing down or bringing up the sibling.

In this case since you have the initial/target size predefined, I'd go with Casey's suggestion on using animateDpAsState

[Ahaisting]

thanks to both of you! 🙇 my understanding is clearer!