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

aniruddha dhamal

04/19/2022, 12:52 AM
In
LazyColumn
, I'm using fading animation for item animation. When item is added, all the items on the screen animate. How to get only that item animated and rest of the items shift the positions? Details in the 🧵
Copy code
LazyColumn {
    items(imageUrls) { imageUrl ->
        val result = loadNetworkImage(imageUrl).value
        Crossfade(targetState = result) { result ->
            when (result) {
                is Result.Loading, Result.Empty -> {
                    Icon(
                        painterResource(id = R.drawable.placeholder),
                        contentDescription = null,
                        modifier = Modifier.size(128.dp)
                    )
                }
                is Result.Success -> {
                    val data = result.data
                    Image(
                        painter = BitmapPainter(data.toBitmap().asImageBitmap()),
                        contentDescription = null,
                        modifier = Modifier.size(128.dp)
                    )
                }
            }
        }
    }
}
a

Albert Chang

04/19/2022, 1:00 AM
Set a unique key for each item using
items(imageUrls, key = { … }) { …}
.
a

aniruddha dhamal

04/19/2022, 1:16 AM
Thanks Albert! Since, item is added at index 0, if i use
key
it doesn't show up in the list. I have to move to the top manually to see it. Do i have to programmatically move it to top? Is there any other way to handle it?
a

Albert Chang

04/19/2022, 1:17 AM
Yeah you have to programmatically move to top.
🙏 1
132 Views