Hi, I would like to replicate a lazycolum that beh...

# compose

[Nikolas Guillen Leon]

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.

[Jonas]

Can’t help you with this. Just wanted to let you know that you attached a png not a gif.

[Nikolas Guillen Leon]

ehehehhe my bad, this is the gif 😁 thank you

[sindrenm]

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.

[Nikolas Guillen Leon]

@sindrenm thank you very much for your answer! Guess I'll have to wait for Compose to be updated 😄

[sindrenm]

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.

[Nikolas Guillen Leon]

yes i'll just use an if statement to toggle visibility for the moment too

[ascii]

> 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?

Text(text, Modifier.clickable { expand = true })
AnimatedVisibility(expand) { OtherContent() }

[ascii]

^ This will work for your use-case. To preserve expand/collapse status across reuse, make expand be a part of the data class itself.

[Nikolas Guillen Leon]

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

[Nikolas Guillen Leon]

I'm already preserving expanded state in the data class anyway

[sindrenm]

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.

[sindrenm]

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.

[ascii]

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?

[ascii]

I had assumed only the main/parent list is lazy, and everything else is a normal Column

[sindrenm]

No, I'd expect those expanded items to just be `item`s in the same LazyColumn.

[Nikolas Guillen Leon]

In my case even the items of each section should be lazy as they can be many

[Nikolas Guillen Leon]

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

[Nikolas Guillen Leon]

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

[ascii]

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.

[sindrenm]

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.

[sindrenm]

Sort of like what would happen if you had a wrap-content RecyclerView back in the day. But I might be wrong.

[Nikolas Guillen Leon]

Maybe you're right, for the moment anyway I just removed any sort of animations 😄

[sindrenm]

Yeah, that was what we ended up doing, as well. 😅