i am trying to use animateContentSize but i think ...

# compose

[Mohamed Elfiky]

i am trying to use animateContentSize but i think i am doing it wrong

LazyColumn(modifier = Modifier.fillMaxWidth()) {
    items((0..30).toList()) {
        var isExpanded by remember { mutableStateOf(false) }
        Surface(
            color = MaterialTheme.colors.primary,
            shape = CircleShape
        ) {
            Row(modifier = Modifier.animateContentSize()) {
                IconButton(onClick = { isExpanded = !isExpanded }) {
                    Icon(asset = Icons.Default.AccessTime, tint = Color.White)
                }

                if (isExpanded) {
                    Text(
                        modifier = Modifier.gravity(Alignment.CenterVertically)
                            .padding(end = 16.dp),
                        text = "some text",
                        style = MaterialTheme.typography.caption,
                        color = Color.White
                    )
                }
            }
        }
        Spacer(modifier = Modifier.height(8.dp))
    }
}

this code make the icons disappear on scrolling and is very lag, but when i put the animateContentSize on the surface it works but the animation is not like the above one. this code is put in another compose but i extract it to see the problem.

[Zach Klippenstein (he/him) [MOD]]

Could you use AnimatedVisibility for this? Instead of if (isExpanded) (or in addition too, don't remember the exact API).

[Mohamed Elfiky]

Yes i tried AnimatedVisibilty works fine but i wanted to know when and how to use animateContentSize. There is a row of 3 of that compasable should i use animateContentSize on the row

[Zach Klippenstein (he/him) [MOD]]

Could you post a video/gif of the animation that’s not doing what you’d expect?

[Mohamed Elfiky]

Ya sure will take some time

[Doris Liu]

This code looks correct. I would recommend using animateContentSize() on the child/children of Surface instead of on Surface directly, as Surface does it's shape clipping and shadow drawing after animateContentSize() That means the clipping logic inside of animateContentSize will interfere with those. That's the only caveat that I know of. I'll add that to the kdoc, until we work out a solution for Surface.

[Doris Liu]

As for the icon not showing, I tried your code and was able to reproduce. Though it doesn't happen if I use a ScrollableColumn instead of a LazyColumn . It may be an issue in LazyColumn . Could you file a bug for this please? 🙂

[Mohamed Elfiky]

this is when the animateContentSize() is on the raw the bug appears when scroll up

on_raw[1].mp4

[Mohamed Elfiky]

this is when the animateContentSize() is on the surface the animation is not good as the other but there is no bug

on_surface[1].mp4

[Mohamed Elfiky]

@Doris Liu thanks for the information i will fill file a bug should i attach the full code with the bug?

[Mohamed Elfiky]

found same issue with AnimatedVisiblity()

[Mohamed Elfiky]

animated_visibility[1].mp4

[Mohamed Elfiky]

this is the full code https://gist.github.com/mohamedmelfiky/4f1d9feeff8a8678a9f0f69dbbb73660

[Doris Liu]

This UI looks super cool! 👏 😄

[Doris Liu]

Thanks for filing the bug and sharing the repro steps. In my initial investigation, animateContentSize seems to report the right size (i.e. the size is always between the icon size and the full size). Unclear why the icon doesn't show sometimes. Will investigate further.

[Mohamed Elfiky]

thanks a lot for your time and effort.