Jetpack Compose - CardView with Arc Shape on border-CodePudding

I'm trying to achieve below cardview arc shape on cardview border/stroke. Already tried to search on google but didn't find any relevant answer that suits with requirement.

Any lead or help will be appriciated.

CodePudding user response：

You probably need to draw that arc in a custom composable, I found this article that can help you to understand the process of drawing in compose!

CodePudding user response：

Answer from Cirilo Bido and Raghunandan is good place to start, you round corners of rectangle with arcTo but you can't draw curved edges on top of clipped out shape. You need to use cubicTo to draw rounded edge and curve to clip out bottom shape

   val shape = GenericShape {size: Size, layoutDirection: LayoutDirection ->
                            // draw cubic on left and right sides for button space
                            cubicTo()
                        }

Drawing rounded rectangle can be done with

fun Path.roundedRectanglePath(
    topLeft: Offset = Offset.Zero,
    size: Size,
    cornerRadius: Float
) {
    // Top left arc
    val radius = cornerRadius * 2
    arcTo(
        rect = Rect(
            left = topLeft.x,
            top = topLeft.y,
            right = topLeft.x   radius,
            bottom = topLeft.y   radius
        ),
        startAngleDegrees = 180.0f,
        sweepAngleDegrees = 90.0f,
        forceMoveTo = false
    )

    lineTo(x = topLeft.x   size.width - cornerRadius, y = topLeft.y)

    // Top right arc
    arcTo(
        rect = Rect(
            left = topLeft.x   size.width - radius,
            top = topLeft.y,
            right = topLeft.x   size.width,
            bottom = topLeft.y   radius
        ),
        startAngleDegrees = -90.0f,
        sweepAngleDegrees = 90.0f,
        forceMoveTo = false
    )

    lineTo(x = topLeft.x   size.width, y = topLeft.y   size.height - cornerRadius)

    // Bottom right arc
    arcTo(
        rect = Rect(
            left = topLeft.x   size.width - radius,
            top = topLeft.y   size.height - radius,
            right = topLeft.x   size.width,
            bottom = topLeft.y   size.height
        ),
        startAngleDegrees = 0f,
        sweepAngleDegrees = 90.0f,
        forceMoveTo = false
    )

    lineTo(x = topLeft.x   cornerRadius, y = topLeft.y   size.height)

    // Bottom left arc
    arcTo(
        rect = Rect(
            left = topLeft.x,
            top = topLeft.y   size.height - radius,
            right = topLeft.x   radius,
            bottom = topLeft.y   size.height
        ),
        startAngleDegrees = 90.0f,
        sweepAngleDegrees = 90.0f,
        forceMoveTo = false
    )

    lineTo(x = topLeft.x, y = topLeft.y   cornerRadius)
    close()
    
}

You can check out this answer for drawing with cubic to. By combining both you can draw that path.

Jetpack Compose: How to draw a path / line like this