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

Marcin Wisniowski

06/18/2022, 7:10 PM
How would I achieve a composable with a hole in the middle, like on this image? I mean the dark overlay, which covers the camera preview under it. It covers some area while having a portion in the middle fully see-through.

https://raw.githubusercontent.com/googlesamples/mlkit/master/android/material-showcase/screenshots/live_barcode.gif

1
stackoverflow 1
😶 1
One approach I can think of is to use Canvas to draw the complex shape around the cutout, but I wonder if there is something more specific in Compose that could help.
Solved, very simple with Compose Canvas:
drawRect()
to cover the entire area then draw the cutout shape with
blendMode = BlendMode.Clear
.
1
🎉 5
👍 2
s

ste

06/19/2022, 8:47 AM
You can use
clipPath
as well:
Copy code
val rectPath = Path().apply {
    addRoundRect(
        RoundRect(
            rect = rect,
            cornerRadius = CornerRadius(
                x = 16.dp.toPx(),
                y = 16.dp.toPx()
            )
        )
    )
}

clipPath(path = rectPath, clipOp = ClipOp.Difference) {
    drawRect(
        size = size,
        color = Color.Black,
        alpha = 0.33f,
    )
}
11 Views