Are there any samples out there of list item anima...

# compose

[Matej Drobnič]

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?

[Vinay Gaba]

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

[Matej Drobnič]

Thanks! Will check it out.

[Matej Drobnič]

I just tested your demo and I cannot get it to work

[Matej Drobnič]

When I tap on the trash can, there is one second delay and then row disappears without animation

[Matej Drobnič]

this is with Studio 4.2 Canary 9

[Matej Drobnič]

Removing animSpec seems to work

[Vinay Gaba]

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▾

[Matej Drobnič]

huh

[Matej Drobnič]

not sure why it didn't work for me

[JulianK]

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:

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