https://kotlinlang.org logo
#compose
Title
# compose
m

Mohamed Elfiky

08/21/2020, 9:00 AM
i am trying to use animateContentSize but i think i am doing it wrong
Copy code
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.
z

Zach Klippenstein (he/him) [MOD]

08/21/2020, 4:26 PM
Could you use
AnimatedVisibility
for this? Instead of
if (isExpanded)
(or in addition too, don't remember the exact API).
m

Mohamed Elfiky

08/21/2020, 4:41 PM
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
z

Zach Klippenstein (he/him) [MOD]

08/21/2020, 4:43 PM
Could you post a video/gif of the animation that’s not doing what you’d expect?
m

Mohamed Elfiky

08/21/2020, 4:46 PM
Ya sure will take some time
d

Doris Liu

08/21/2020, 5:50 PM
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.
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? 🙂
m

Mohamed Elfiky

08/22/2020, 8:08 AM
this is when the animateContentSize() is on the raw the bug appears when scroll up
this is when the animateContentSize() is on the surface the animation is not good as the other but there is no bug
@Doris Liu thanks for the information i will fill file a bug should i attach the full code with the bug?
found same issue with AnimatedVisiblity()
d

Doris Liu

08/22/2020, 5:22 PM
This UI looks super cool! 👏 😄
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.
m

Mohamed Elfiky

08/22/2020, 5:35 PM
thanks a lot for your time and effort.
43 Views