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)) { /*...*/ }
Thanks