Does anyone know if it s possible to transparently mask imag kotlinlang #compose

Does anyone know if it's possible to transparently mask images? I have a usecase where the image should blend into the background with a gradient, but I haven't been able to figure out a method that does the trick.

solved 1

What I've tried (this uses Coil's AsyncImage but Compose's Image seems to behave the same):

Copy code

@Composable
fun TransparentImage(
    imageUrl: String?,
    modifier: Modifier = Modifier,
) {
    AsyncImage(
        model = imageUrl,
        placeholder = PreviewPoster,
        contentDescription = null,
        contentScale = ContentScale.FillWidth,
        modifier = modifier
            .fillMaxWidth()
            .drawWithCache {
                val brush = Brush.verticalGradient(
                    0.0f to Color.White,
                    1.0f to Color.Transparent,
                )

                onDrawWithContent {
                    drawContent()
                    drawRect(brush, blendMode = BlendMode.DstIn)
                }
            },
    )
}

I've placed this composable inside a box with a green background but the preview does not show the color blending with the image and instead the image just seems to fade to what I presume is black:

romainguy

09/28/2023, 2:31 PM

You're almost there. What you want is a graphicsLayer with an offscreen compositing strategy set on it

This will create an intermediate transparent image for the effect to work

Tom De Decker

09/28/2023, 2:32 PM

That does the trick! Thank you!