How to write a text on the image with coil in Jetpack Compose?

Question

How can we write a text on the image with coil in Jetpack Compose?

For example, I want to write the IMDB score of the movie image that coil is showing in Jetpack Compose. and maybe with a yellow background. is it possible? thanks for help

just for example:

    AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .data("https://www.alamy.com/stock-photo/old-movie.html")
                    .crossfade(true)
                    .build(),
                placeholder = painterResource(R.drawable.ic_baseline_local_movies_24),
                contentDescription = movie.name,
                contentScale = ContentScale.Crop,
                modifier = Modifier.clip(
                    RoundedCornerShape(
                        5.dp,
                        5.dp,
                        0.dp,
                        0.dp
                    )
                )
            )

where should I add the text in the code?

Answer 1

One solution could be using Box.

This is an example:

Box {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://www.alamy.com/stock-photo/old-movie.html")
                .crossfade(true)
                .build(),
            placeholder = painterResource(R.drawable.ic_baseline_local_movies_24),
            contentDescription = movie.name,
            contentScale = ContentScale.Crop,
            modifier = Modifier.clip(
                RoundedCornerShape(
                    5.dp,
                    5.dp,
                    0.dp,
                    0.dp
                )
            )
        )

        Text(
            modifier = Modifier
                 .background(Color.Yellow)
                 .align(Alignment.BottomStart),
            text = "IMDB: 7.4",
        )
    }