I have the following code snippet:
LazyVerticalGrid(
modifier = modifier
.fillMaxSize(),
contentPadding = PaddingValues(horizontal = 16.dp),
columns = GridCells.Fixed(MAX_NUMBER_OF_COLUMNS),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(17.dp)
) { something ->
filteredList.forEach {
when (something.section) {
Section.1,
Section.2 -> {
items(items = items,
span = { GridItemSpan(MAX_NUMBER_OF_COLUMNS) },
key = { it.id }) { item ->
Something12Composable(
item
)
}
}
Section.3 -> {
items(items = items,
span = { GridItemSpan(MAX_NUMBER_OF_COLUMNS) },
key = { it.id }) { item ->
Something3Composable(
item
)
}
}
}
}
}
}
And there is a filter function which changes the filteredList, removing sections and only showing one at the time. Each item has an image loaded in AsyncImage in the following composable:
Something12Composable(){
Column(
modifier = modifier,
verticalArrangement = Arrangement.spacedBy(7.dp)
) {
Row(
Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
AsyncImage(
model = imageUrl,
modifier = Modifier
.clip(RoundedCornerShape(8.dp))
.size(60.dp)
.background(Color(someColor)),
contentScale = ContentScale.Crop,
contentDescription = null
)
Column(
modifier = Modifier.weight(1f),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(title)
}
}
}
}
Something12Composable(){
// similar to the one above with slight UI difference.
}
Everything works fine when the screen is loaded or when scrolling and it is smooth. But as soon as a filter is selected and items are filtered, some images are not clipped and this is random. I tried to:
AsyncImage
and clip that with matchParentSize
or fillMaxSize
Image
with rememberAsyncImagePainter(model = imageUrl)
but the same results.LazyVerticalGrid
items to force recomposition, it improved it but didn't fixed the problem completely. It also slowed down the rendering and moved items around which is not desired.Configuration:
Kotalin: 1.9.25
Gradle Plugin: 8.2.0
compose.ui: 1.8.1
Edit
I tried to make a minimal reproducible example
but it works fine so the bug must be in my code not the clipping.
I stopped passing viewModel to my composables as I know they are not stable and created the UiState data classes but I still have the same bug!
Is there someone out there who can help me fix this issue?
I finally managed to solve my problem. I did as was suggested in the comments to make a minimal reproducible example but the example worked fine. On further inspection, it turned out the implementation is the same only the set up was different resulting in different outcome.
I had the below dependencies:
implementation "androidx.compose.ui:ui:1.8.1"
And changed to:
implementation "androidx.compose.ui:ui"
implementation "androidx.compose.ui:ui-graphics-android"
And now it is working.
Notice:
If I add version to it 1.8.2 which seems to be the latest, the problem appears again.
But it would work with the BOM as well:
implementation platform("androidx.compose:compose-bom:2025.05.01")
implementation "androidx.compose.ui:ui"
implementation "androidx.compose.ui:ui-graphics-android"
So, it seems to be the bug in the library because I redid the composable and viewmodel and UiSate data classes to make sure everything is stable but it didn't help until I changed the dependencies.
I would be happy to hear your explanations.