CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-animation
adlagar
adlagar

Reputation: 935

Animation of deleted item from list in Jetpack Compose

A composable receives a list of items as status, that, through state hoisting, the user can remove any of these items to update the mutable state of the parent composable and this perform a children composable recomposition.

For instance: We can suppose that the items are for example a Text with a Icon in the right side. When the user taps on the icon, the item is removed and the status are updated in the parent composable trough a state hoisting. The code could be like this:

@Composable
fun parentComposable(){

   var listItems = remember { mutableStateList() )

   childrenComposable(
      listItems,
      onClick = { index ->
         listItems.removeAt(index)
      },
      ...
   )

}

After an item is deleted, and before the composition is done, I want to do an animation (fadeout for example), to make the item disappear. I've checked the built-in animation APIs to do this, but I think any of them fits with my goal.

https://developer.android.com/jetpack/compose/animation/introduction

Any idea of how achieve that? I'm trying to make a delay after the onClick delete execution, but seems that is not working fine.

PD: The items of the list are not showing inside a LazyColumn/LazyRow. They are inside a FlowColumn/FlowRow.

Upvotes: 5

Views: 2038

Answers (1)

Ayman Ait
Ayman Ait

Reputation: 1160

all you need to do is animating the visibility of each item when clicked, so you would have something like this and you change it to what suites you case best:

val scope = rememberCoroutineScope()
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(list) { item ->
        val itemVisibility = remember {
            Animatable(1f)
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(30.dp)
                .alpha(itemVisibility.value)
                .clickable {
                    scope.launch {
                        itemVisibility.animateTo(targetValue = 0f, animationSpec = tween(20))
                        list.remove(item)
                    }
                }) {

            Text(text = "item num: $item")
        }
    }
}

Upvotes: 1

Related Questions