BackdropScaffold backLayerContent image content scale issue

Question

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

score 0 · Accepted Answer · answered Jun 05 '23 at 16:48

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()
                            }
                        }
                    },
              )

BackdropScaffold backLayerContent image content scale issue

1 Answers1