https://kotlinlang.org
Join Slack
Hi, I would like to replicate a lazycolum that behaves like the one in this gif. How can I animate d...
# compose
n
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
Can’t help you with this. Just wanted to let you know that you attached a png not a gif.
n
ehehehhe my bad, this is the gif 😁 thank you
s
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
@sindrenm thank you very much for your answer! Guess I'll have to wait for Compose to be updated 😄
s
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
yes i'll just use an if statement to toggle visibility for the moment too
a
> 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
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
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
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
No, I'd expect those expanded items to just be `item`s in the same LazyColumn.
n
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
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
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
Maybe you're right, for the moment anyway I just removed any sort of animations 😄
s
Yeah, that was what we ended up doing, as well. 😅
7 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by