Hello everyone, I want to achieve a screen background similar to this one. does anyone have idea how...

# compose

[Ankit Shah]

Hello everyone, I want to achieve a screen background similar to this one. does anyone have idea how can I achieve this. The middle separator must be an arc cutout.

[nglauber]

You can do this for the black/top part…

val arcHeight = with(LocalDensity.current) { 30.dp.toPx() }
Box(modifier = Modifier
    .size(100.dp, 100.dp)
    .background(
        color = Color.Red,
        shape = object : Shape {
            override fun createOutline(
                size: Size,
                layoutDirection: LayoutDirection,
                density: Density
            ): Outline {
                return Outline.Generic(
                    Path().apply {
                        moveTo(0f, 0f)
                        lineTo(0f, size.height - arcHeight)
                        arcTo(
                            Rect(
                                0f,
                                size.height - arcHeight,
                                size.width,
                                size.height
                            ), 180f, -180f, false
                        )
                        lineTo(size.width, size.height - arcHeight)
                        lineTo(size.width, 0f)
                        close()
                    }
                )
            }
        }
    )
)

[nglauber]

You can adjust the size and arc height 😉

[Ankit Shah]

Great, thanks a lot @nglauber. That helped 👍👍💯