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

Ankit Shah

12/08/2021, 11:45 AM
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.
n

nglauber

12/08/2021, 3:22 PM
You can do this for the black/top part…
Copy code
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()
                    }
                )
            }
        }
    )
)
You can adjust the size and arc height 😉
a

Ankit Shah

12/08/2021, 4:25 PM
Great, thanks a lot @nglauber. That helped 👍👍💯
👍 1
3 Views