Creating a TabItem with Custom Rounded Corners Using Android Compose Path

1. Desired Effect

The goal is a tabItem whose selected background has rounded corners: the top corners are normal rounded corners, while the bottom corners are outward‑curved, resembling a "J" shape.

2. Implementation Ideas

2.1 Combine Three Views

One possible solution is to compose three Views:

Left View: bottom‑right corner rounded, blue background, other corners square.

Middle View: top‑left and top‑right corners rounded, white background, other corners square.

Right View: bottom‑left corner rounded, blue background, other corners square.

Placing the three Views side‑by‑side creates the desired shape.

This approach works, but another method is also provided.

2.2 Draw with Path

Using a Path to draw the background gives more control. The rounded corners are limited to a 20 px square, and each corner is drawn with a quadratic Bézier curve.

Steps:

Move the start point to the bottom‑left: moveTo(0, height) .

Draw the first quadratic Bézier: quadraticBezierTo(0, height, 20, height‑20) .

Line to (20, 20).

Second quadratic Bézier: quadraticBezierTo(20, 20, 40, 0) .

Line to width‑40, 0 .

Third quadratic Bézier: quadraticBezierTo(width‑40, 0, width‑20, 20) .

Line to width‑20, height‑20 .

Final quadratic Bézier back to the start: quadraticBezierTo(width‑20, height‑20, width, height) .

After fixing the Bézier parameters (the first argument is a control point, not the start point), the shape renders correctly.

Canvas(Modifier.size(120.dp,80.dp)) {
    val path = Path().apply {
        moveTo(0f, size.height)
        quadraticBezierTo(15f, size.height, 20f, size.height-20f)
        lineTo(20f, 20f)
        quadraticBezierTo(20f, 5f, 40f, 0f)
        lineTo(size.width-40, 0f)
        quadraticBezierTo(size.width-25f, 0f, size.width-20f, 20f)
        lineTo(size.width-20f, size.height-20f)
        quadraticBezierTo(size.width-20f, size.height-5f, size.width, size.height)
        close()
    }
    drawPath(path = path, color = backGroud)
}

3. Summary

The exercise deepens understanding of the Path API in Jetpack Compose, making it easier to create custom Views with complex shapes. Path is frequently used in UI development, and mastering its Bézier functions helps avoid common mistakes, as demonstrated in this example.