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

Nikolas Guillen Leon

10/17/2023, 9:35 AM
Hi, I would like to replicate a lazycolum that behaves like the one in this gif. How can I animate di expand/collapse effect of the sections? AnimatedVisibility can't be used in LazyColumnScope so I can't wrap the "items" function.
j

Jonas

10/17/2023, 9:51 AM
Can’t help you with this. Just wanted to let you know that you attached a png not a gif.
n

Nikolas Guillen Leon

10/17/2023, 9:53 AM
ehehehhe my bad, this is the gif 😁 thank you
s

sindrenm

10/17/2023, 10:32 AM
I think this would require having animations for additions and removals, which unfortunately isn't available yet, as per https://issuetracker.google.com/issues/150812265.
n

Nikolas Guillen Leon

10/17/2023, 10:35 AM
@sindrenm thank you very much for your answer! Guess I'll have to wait for Compose to be updated 😄
s

sindrenm

10/17/2023, 10:46 AM
Yeah, but it's hard to say when that'll happen We have the exact same use case as you in our app, and we just ditched the animations for now, but it would definitely be nice.
👍🏻 1
n

Nikolas Guillen Leon

10/17/2023, 10:48 AM
yes i'll just use an if statement to toggle visibility for the moment too
a

ascii

10/17/2023, 11:14 AM
> AnimatedVisibility can't be used in LazyColumnScope so I can't wrap the "items" function. What will wrapping
items()
even achieve? You want individual items to be expandable, yes?
Copy code
Text(text, Modifier.clickable { expand = true })
AnimatedVisibility(expand) { OtherContent() }
^ This will work for your use-case. To preserve expand/collapse status across reuse, make
expand
be a part of the data class itself.
n

Nikolas Guillen Leon

10/17/2023, 11:17 AM
I want the items of a single section to expand/shrink in group because wrapping each item with an AnimatedVisibility leads to a heavy performance impact
I'm already preserving expanded state in the data class anyway
s

sindrenm

10/17/2023, 11:18 AM
I would expect the whole
items {}
block to animate down, and each item inside to fade in. That first animation wouldn't work with
AnimatedVisibility
around each item.
☝🏻 1
Like, if five items were to show up, I'd expect the next item to get animated down “five items worth of space”, so to speak.
a

ascii

10/17/2023, 11:20 AM
Oh I see, so the expanded part is a LazyColumn as well? Wouldn't that introduce nested scrolling issues? Main list scrolls when you really want the internal list to scroll?
I had assumed only the main/parent list is lazy, and everything else is a normal Column
s

sindrenm

10/17/2023, 11:22 AM
No, I'd expect those expanded items to just be `item`s in the same LazyColumn.
n

Nikolas Guillen Leon

10/17/2023, 11:22 AM
In my case even the items of each section should be lazy as they can be many
A temporary solution can be nesting a lazycolumn inside for each section and making them non-scrollable and with a fixed height of items.size * row height
You can nest lazy columns if the inside ones have fixed height, the problem is that items out of the viewport don't behave as expected when you expand the section and sometimes they are cut out of the lazycolumn
a

ascii

10/17/2023, 11:27 AM
Yes and row height based calculations are not reliable anyway. Some rows may be larger if they wrap, for example. Although you could limit them to 1 line and ellipsize them, or perhaps marquee.
s

sindrenm

10/17/2023, 11:30 AM
If you have many items in each section, you probably don't want non-scrollable LazyColumns, though? I don't know the internals of how theze lazy layouts work, but I thought that would invalidate their lazy nature.
Sort of like what would happen if you had a
wrap-content
RecyclerView back in the day. But I might be wrong.
n

Nikolas Guillen Leon

10/17/2023, 11:34 AM
Maybe you're right, for the moment anyway I just removed any sort of animations 😄
s

sindrenm

10/17/2023, 11:35 AM
Yeah, that was what we ended up doing, as well. 😅