I'm trying to render some pictures that the user has taken, but Glide shows only the top part of the image. After going back and forth to the screen, it finally loads properly. I never had that issue using XML. Video for better understanding: https://drive.google.com/file/d/10jgx8ul_zAMOX_PdT3xL-yStPvvpEEdH/view?usp=drive_link https://youtube.com/shorts/NLIf50QiWzw?feature=share
My code:
@Composable
fun DetailsScreen(
album: Album,
photos: List<File>,
onAddPhotoClicked: () -> Unit,
onEditVideoClicked: () -> Unit
) {
Scaffold {
Column(modifier = Modifier
.padding(it)
.fillMaxSize()) {
val gridState = rememberLazyGridState()
val expandedState by remember {
derivedStateOf {
if(photos.size < 7) true
else if (!gridState.canScrollBackward)
true
else
gridState.lastScrolledBackward && gridState.firstVisibleItemIndex == 0
}
}
DetailsHeader(expandedState, album, onAddPhotoClicked, onEditVideoClicked)
LazyVerticalGrid(
columns = GridCells.Fixed(2), contentPadding = PaddingValues(
start = 12.dp, top = 16.dp, end = 12.dp, bottom = 16.dp
), state = gridState
) {
itemsIndexed(items = photos, key = { index, _ ->
index
}) { _, photo ->
GridPhotoItem(photo.absolutePath)
}
}
}
}
}
@Composable
fun GridPhotoItem(photo: String) {
Image(
painter = rememberAsyncImagePainter(photo),
contentDescription = "Photo",
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.padding(8.dp)
)
}
@Edit I tested it with Coil, and it works better, but sometimes the same thing happens too. I tried my app on two different phones, and the same thing occurred, but I have noticed something new: when I take a new photo and I instantly navigate with the button click to the next screen where that image is loaded from MediaStore and displayed, it is almost always drawn halfway. If I wait 1-2 seconds and then navigate to the next screen, everything looks like it should.