androidandroid-jetpack-composecoilasyncimageview

BackdropScaffold backLayerContent image content scale issue


I have a Compose Screen with BackdropScaffold and with AsyncImage in backLayerContent, so when I open the Screen the first time, the scale of the image works weird, like in Screenshot1. And when I reopen the Screen, the image is placed correctly, as in Screenshot 2.

Screenshot1: Image with weird scale

Screenshot2: Correctly image after reopen page

My code:

 state.movie?.let { movie ->
        BackdropScaffold(
            scaffoldState = scaffoldState,
            gesturesEnabled = true,
            appBar = { },
            backLayerContent = {
                AsyncImage(
                    model = ImageRequest.Builder(LocalContext.current)
                        .data(movie.poster)
                        .crossfade(true)
                        .build(),
                    placeholder = painterResource(R.drawable.movie_default),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Black)
                        .verticalScroll(scrollState)
                        .clickable {
                            if (scaffoldState.isConcealed) {
                                scope.launch {
                                    scaffoldState.reveal()
                                }
                            }
                        },
                )
            },
            frontLayerShape = MaterialTheme.shapes.large,
            frontLayerContent = {
                FrontLayerScreen(movie)
            }
        ) {
            if (scrollState.isScrollInProgress) {
                scope.launch {
                    scaffoldState.conceal()
                }
            }
        }
    }

Also, when I trigger scrollVertically(i.e. when I change scaffoldState), the image is scaled correctly, as in screenshot 2. The problem occurs only the first time I open the screen.

It occurs only with AsyncImage, i.e. when i load it from internet. Cuz when I use default Image and load image from drawable it work correctly


Solution

  • My problem was that the picture did not load asynchronously. Because of this, I used the rememberAsyncImagePainter() function

    Edited code:

             Image(
                    painter = rememberAsyncImagePainter(
                        model = ImageRequest.Builder(LocalContext.current)
                            .data(movie.poster)
                            .crossfade(true)
                            .build()
                    ),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = Color.Black)
                        .verticalScroll(scrollState)
                        .clickable {
                            if (scaffoldState.isConcealed) {
                                scope.launch {
                                    scaffoldState.reveal()
                                }
                            }
                        },
                  )