Only ONE rounded corner on the pentagon in Jetpack Compose, is there any way?

34 Views Asked by At

I am trying to make a pentagon view; I plan to use it as a shape for any composable. However, my goal is only one side (the peek) needs to be rounded, not the other corner of the pentagon.

I used Path() and some drawing APIs, but I can't achieve this.

fun Modifier.clipPentagon(colour: Color): Modifier = drawBehind {
    val trianglePath = Path().apply {
        moveTo(-32f, 0f) // I changed the start and end of the triangle with these; I can use the shape with fillMaxWidth().
        lineTo(size.width / 2, -size.height / 16)
        lineTo(size.width + 32f, 0f) // Also same thing in this line.
        close()
    }
    drawRect(color = colour)
    drawIntoCanvas { canvas ->
        canvas.drawOutline(
            outline = Outline.Generic(trianglePath),
            paint = Paint().apply {
                color = colour
                pathEffect = PathEffect.cornerPathEffect(16.dp.toPx())
            }
        )
    }
}

Box(modifier = Modifier.padding(32.dp).clipPentagon(MaterialTheme.colorScheme.surface)) { /*...*/ }

problem

Thanks

0

There are 0 best solutions below