How to draw one side curve of box in jetpack compose android

Question

I want to draw this shape in jetpack compose, anybody has idea how we can achieve this?

Answer 1

You can simply draw a shape inside a Box.

Something like:

Box(
    Modifier
        .fillMaxWidth()
        .height(200.dp)
        .background(Color.DarkGray)
        .padding(10.dp)
        .background(Red)
) {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {

        val canvasWidth = size.width
        val arcHeight = 200f

        drawArc(
            color = Color.DarkGray,
            startAngle = 0f,
            sweepAngle = 180f,
            useCenter = false,
            topLeft = Offset(0f, -arcHeight/2),
            size = Size(canvasWidth, arcHeight)
        )
    }
}