https://kotlinlang.org logo
#compose
Title
# compose
t

Tom De Decker

09/28/2023, 1:54 PM
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:
r

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
t

Tom De Decker

09/28/2023, 2:32 PM
That does the trick! Thank you!