Curve Edge Shape for Jetpack Compose or Compose Multiplatform

EdgeCurveShape.kt

import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.LayoutDirection

class EdgeCurveShape(
    private val direction: Direction,
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density,
    ): Outline {
        val width = size.width.toDouble()
        val height = size.height.toDouble()
        val centerX = width / 2
        val centerY = height / 2
        val path = createSemiOvalPath(
            width = width.toFloat(),
            height = height.toFloat(),
            centerX = centerX.toFloat(),
            centerY = centerY.toFloat(),
            direction = direction,
        )
        return Outline.Generic(path)
    }

    private fun createSemiOvalPath(
        width: Float,
        height: Float,
        centerX: Float,
        centerY: Float,
        direction: Direction,
    ): Path {
        return Path().apply {
            when (direction) {
                Direction.Top -> {
                    moveTo(0f, height)
                    quadraticBezierTo(
                        x1 = centerX,
                        y1 = -height,
                        x2 = width,
                        y2 = height,
                    )
                }

                Direction.Bottom -> {
                    moveTo(0f, 0f)
                    quadraticBezierTo(
                        x1 = centerX,
                        y1 = height * 2f,
                        x2 = width,
                        y2 = 0f,
                    )
                }

                Direction.Left -> {
                    moveTo(0f, 0f)
                    quadraticBezierTo(
                        x1 = width * 2,
                        y1 = centerY,
                        x2 = 0f,
                        y2 = height,
                    )
                }

                Direction.Right -> {
                    moveTo(width, 0f)
                    quadraticBezierTo(
                        x1 = -width,
                        y1 = centerY,
                        x2 = width,
                        y2 = height,
                    )
                }
            }
            close()
        }
    }

    enum class Direction {
        Top, Bottom, Left, Right;
    }
}

ForPreview.kt

@Preview(widthDp = 480, heightDp = 480)
@Composable
fun EdgeCurveShapePreview() {
    MaterialTheme {
        Column(
            modifier = Modifier.background(Color(0xFF111111)),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            EdgeCurveShapeContainer(
                direction = EdgeCurveShape.Direction.Top,
            )
            Spacer(modifier = Modifier.size(16.dp))
            EdgeCurveShapeContainer(
                direction = EdgeCurveShape.Direction.Right,
            )
            Spacer(modifier = Modifier.size(16.dp))
            EdgeCurveShapeContainer(
                direction = EdgeCurveShape.Direction.Bottom,
            )
            Spacer(modifier = Modifier.size(16.dp))
            EdgeCurveShapeContainer(
                direction = EdgeCurveShape.Direction.Left,
            )
        }
    }
}

@Composable
private fun EdgeCurveShapeContainer(
    direction: EdgeCurveShape.Direction,
) {
    val sizes = remember {
        listOf(
            DpSize(100.dp, 100.dp),
            DpSize(50.dp, 100.dp),
            DpSize(10.dp, 100.dp),
            DpSize(100.dp, 50.dp),
            DpSize(100.dp, 10.dp),
        )
    }
    Row(verticalAlignment = Alignment.CenterVertically) {
        sizes.forEachIndexed { index, size ->
            Box(
                modifier = Modifier
                    .size(size)
                    .background(Color.White.copy(alpha = 0.1f))
            ) {
                EdgeCurveShapeContent(direction)
            }
            if (index != sizes.lastIndex) {
                Spacer(modifier = Modifier.size(16.dp))
            }
        }
    }
}

@Composable
private fun EdgeCurveShapeContent(direction: EdgeCurveShape.Direction) {
    Spacer(
        modifier = Modifier
            .fillMaxSize()
            .background(
                color = Color.White,
                shape = EdgeCurveShape(
                    direction = direction,
                ),
            ),
    )
}