How would I achieve a composable with a hole in the middle, like on this image? I mean the dark over...

# compose

[Marcin Wisniowski]

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▾

[Marcin Wisniowski]

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.

[Marcin Wisniowski]

Solved, very simple with Compose Canvas: drawRect() to cover the entire area then draw the cutout shape with blendMode = BlendMode.Clear.

[ste]

You can use clipPath as well:

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