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

Answer from @M.Mahdi Behroozfar is main way of drawing Text over any Composable. This is an alternative that is not very well known and lets you draw shadow too. drawText function is a new function for DrawScope introduced in 1.3.0-alpha02 version.

@OptIn(ExperimentalTextApi::class)
@Composable
private fun DrawTextOverImageSample() {
    val textMeasurer = rememberTextMeasurer()

    Image(
        painter = painterResource(id = R.drawable.landscape1),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(4 / 3f)
            .drawWithCache {
                val textLayoutResult = textMeasurer.measure(
                    text = AnnotatedString("IMDB 8.0"),
                    style = TextStyle(fontSize = 30.sp)
                )
                onDrawWithContent {
                    drawContent()
                    drawText(
                        textLayoutResult = textLayoutResult,
                        color = Color.White,
                        topLeft = Offset(
                            x = 0f,
                            y = 0f
                        ),
                        shadow = Shadow(
                            color = Color.LightGray,
                            offset = Offset(5f, 5f),
                            blurRadius = 5f
                        )
                    )
                }
            }
    )
}

Answer 2

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