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

Matej Drobnič

09/04/2020, 12:48 PM
Are there any samples out there of list item animations? Similarly to what
RecylerView
does when you add/remove/update/move items around. Is this even possible at this moment?
👀 1
v

Vinay Gaba

09/04/2020, 3:48 PM
AnimatedVisibility
composable helps with this. Here’s an example where I animate the deletion of a row - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/animation/ListAnimationActivity.kt
m

Matej Drobnič

09/05/2020, 4:40 AM
Thanks! Will check it out.
I just tested your demo and I cannot get it to work
When I tap on the trash can, there is one second delay and then row disappears without animation
this is with Studio 4.2 Canary 9
Removing
animSpec
seems to work
v

Vinay Gaba

09/07/2020, 5:18 PM
Here is what I see when I run the demo -

https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/raw/master/screenshots/list_animation.gif

m

Matej Drobnič

09/08/2020, 9:05 AM
huh
not sure why it didn't work for me
j

JulianK

01/11/2021, 10:32 AM
In your example, you keep an additional list for deleted items. However, i suspect in most apps, you would want to modifiy the existing data model and remove items from it upon deletion. To achieve this, I'm currently setting the visibility to false when clicking on the delete button (or swiping, whatever you use) and then using a LaunchedEffect with delay to delete the item from the model. I get an enter transition on the next element in the list then, however... Code:
Copy code
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ItemRow(
    item:Any,
    deleteItem: (Any) -> Unit
) {
    var visibility by remember(item) {mutableStateOf(true)}
    if (!visibility) {
        LaunchedEffect(subject = item) {
            delay(500)
            deleteItem(item)
        }
    }
    AnimatedVisibility(visible = visibility,
        enter = fadeIn(initialAlpha = 1f), // fake no animation
        exit = shrinkVertically(animSpec = tween(durationMillis = 500)) + fadeOut()
    ) {

        /** Row content with delete handler, onDelete = {visibility = false} **/
    }
}
Is there currently a better solution for this?