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

Nacho Ruiz Martin

02/08/2022, 6:54 PM
Hello! 👋 What’s the approach to animate the enter and exit of composables added in a
forEach
? Simplified version of the parent Composable looks like this:
Copy code
val items: MutableList<...> = ...
Column() {
    items.forEach { item ->
        ChildComposable()
    }
}
AnimatedVisibility
applied in parent doesn’t work because the parent is always there. Applying it to the children works on enter but not en “exit” because when the item disappears from the list there’s no longer a child Composable to “exit”. Thanks! 🙇
a

Albert Chang

02/08/2022, 7:10 PM
What kind of animation do you want? You can start with using
Modifier.animateContentSize()
on the parent.
n

Nacho Ruiz Martin

02/08/2022, 7:47 PM
Each item has to combine
fadeIn
and
slideInVertically
to enter and
fadeOut
and
slideOutVertically
whenever it’s added or removed from/to the list.
c

Chris Sinco [G]

02/08/2022, 9:08 PM
Have you tried the
animateEnterExit
modifier on the child Composables?
There are item animations planned for LazyColumn (not sure that helps here), but @Doris Liu may have other ideas as well
n

Nacho Ruiz Martin

02/08/2022, 9:15 PM
Yeah, I tried with
animateEnterExit
but if I didn't missunderstood it, it's only to modify the enter/exit animation of the children when the parent's visibility is modified, which is not happening here. I found this and it looks promising but a bit hacky. Also this but I suspect that it'll only work with LazyLists. I will test those solutions, anyway 😄.
d

Doris Liu

02/08/2022, 10:47 PM
Yea,
AnimatedVisibilityLazyColumnDemo
that you linked here would be helpful for your item removal use case. The main idea there is that the composable for the deleted items need to be retained until they finishes exiting. We are exploring more straightforward ways to achieve this type item addition/removal in LazyColumn. @Andrey Kulikov might be able to share some insights.
a

Andrey Kulikov

02/08/2022, 11:13 PM
yeah, nothing to share for now. AnimatedVisibilityLazyColumnDemo is the closest you can get for additions/removals for now. and for reorderings we have Modifier.animateItemPlacement() in Lazy lists
n

Nacho Ruiz Martin

02/09/2022, 7:18 AM
Great, thanks a lot 🤗