I understand that animating insertions deletions into a `Laz

Question

I understand that animating insertions deletions into a `LazyList` is still under development but what s the recommendation for animating insertions deletions into a regular `Column` or `Row`

Chuck Stein · Answer

My use case is I have a list of items which I get from the ViewModel s view state and you can add remove these items from the UI and the `Column` these items live in cannot be a `LazyColumn` because much higher up in the compose tree there is already a `LazyColumn` container and a `LazyColumn` within another `LazyColumn` causes an error

Joseph Hawkes-Cates · Answer

AnimatedVisibility has extensions on RowScope and ColumnScope that should work

Chuck Stein · Answer

Even with the `ColumnScope` extension it doesn t work if my items are coming from the view state because if an item is removed from the `items` list when I iterate over the list on the next composition I won t even reach the `AnimatedVisibility` that was previously wrapping that `item` because it s no longer in the list I m iterating over So the items don t animate even with the following code ```items forEach item gt AnimatedVisibility visible = item in items MyItemImpl item ```

Joseph Hawkes-Cates · Answer

ah yeah I see what you mean I m not sure on a good way to handle that case

Chuck Stein · Answer

It seems like I need some way to memoize the item list in the composable so that it keeps items that have been deleted in the view state until their delete animation completes And likewise animates new items in the view state list instead of just popping them into existence

Chuck Stein · Answer

It s a hard thing to google for because everything just directs me to people trying to animate deletions insertions in a `LazyColumn` which is under development Is there anything under development to support this for regular `Columns` Or is there an existing recommendation for this use case

Alex Vanyo · Answer

The approach for `LazyColumn` that is in <https cs android com androidx platform frameworks support + androidx main compose animation animation integration tests animation demos src main java androidx compose animation demos layoutanimation AnimatedVisiblilityLazyColumnDemo kt|AnimatedVisibilityLazyColumnDemo> would also apply to a normal `Column` And you re on the right track it requires some bookkeeping to keep old items around until their delete animation completes and using `MutableTransitionState` to avoid the pop in effect

Chuck Stein · Answer

Thanks Looking into this now I m sure I ll have some follow up questions as I try to implement it

Chuck Stein · Answer

< Alex Vanyo> is there any way to do this without tightly coupling your model objects to their UI animation state That approach just won t work with my app architecture and probably many others in which we keep the domain models and view logic very separate

Chuck Stein · Answer

I m trying to keep a separate `MutableStateList` in the view containing the model objects + their transition state and updating that animation specific list in a `LaunchedEffect` every time the domain model list changes But I m having some issues

Alex Vanyo · Answer

Yep that sounds like the approach you d want to take You could have a `List lt Pair lt MyItemModel MutableTransitionState gt gt ` and then you wouldn t need to change `MyItemModel` at all There would be a bit of work to create that list and keep it up to date as the real list updates

Chuck Stein · Answer

Okay I ll keep trying to debug my issues then Thanks for confirming I m not trying to achieve something hopeless +1

Chuck Stein · Answer

< Alex Vanyo> Are there any plans to simplify this for the developer in the future by just using something like an ` animate` modifier similar to how easy it is with SwiftUI and Flutter I got a working implementation going without changing my models but it still feels very cumbersome to require all this extra boilerplate compared to similar UI frameworks and I m sure a built in compose version could better optimize it I m noticing some lag when typing into the TextFields contained within my list items causing some text input to get lost

dambakk · Answer

I have the exact same use case a list of x items backed by some state I want to animate items added removed and I cannot use LazyColumn Do any of you know if there exists a ticket for the feature < Chuck Stein> proposes Would it be possible for me to have a look at your implementation Chuck Is it worth implementing it from scratch

Chuck Stein · Answer

< dambakk> here is my implementation

Chuck Stein · Answer

And usage looks like this ```animatableListItems items id = it id forEach animatableItem gt AnimatedVisibility visibleState = animatableItem transitionState MyListItemComposable animatableItem item ``` where `items` is your list of domain models representing each list item

dambakk · Answer

Thanks Chuck That is some well written code easy to read works perfectly Well done clap

Chuck Stein · Answer

Thank you I m glad it helped you out