How to add border on one side of the card using jetpack compose

Question

If i use

 .border(BorderStroke(1.dp, color = purple))

then the entire card gets a border on all 4 sides. I want the border to be only on the left side of the card. How can i achieve this?

Answer 1

For the Card() you could use Modifier.drawBehind() like this

    val cornerRadius = 16.dp

    Card(
        shape = RoundedCornerShape(cornerRadius),
        backgroundColor = backgroundColor,
        modifier = Modifier.padding(8.dp).drawBehind {

            //Bottom line
            drawLine(
                color = Color.Cyan,
                start = Offset(x = cornerRadius.toPx(), y = size.height),
                end = Offset(x = size.width - cornerRadius.toPx(), y = size.height),
                strokeWidth = 1.dp.toPx()
            )

            //Bottom-left corner
            drawArc(
                color = Color.Cyan,
                startAngle = 180f,
                sweepAngle = -90f,
                useCenter = false,
                topLeft = Offset(x = 0f, y = size.height - cornerRadius.toPx() * 2),
                size = Size(cornerRadius.toPx() * 2, cornerRadius.toPx() * 2),
                style = Stroke(width = 1.dp.toPx())
            )

            //Bottom-right corner
            drawArc(
                color = Color.Cyan,
                startAngle = 360f,
                sweepAngle = 90f,
                useCenter = false,
                topLeft = Offset(x = size.width - cornerRadius.toPx() * 2, y = size.height - cornerRadius.toPx() * 2),
                size = Size(cornerRadius.toPx() * 2, cornerRadius.toPx() * 2),
                style = Stroke(width = 1.dp.toPx())
            )

        }
    ) {
        Box(modifier = Modifier.padding(16.dp)) {
            content()
        }
    }

Answer 2

You can use Modifier.drawwithContent and draw a line with offset as half of the stroke width to move start position from out of composable to 0,0 position

fun Modifier.drawOneSideBorder(
    width: Dp,
    color: Color,
    shape: Shape = RectangleShape
) = this
    .clip(shape)
    .drawWithContent {
        val widthPx = width.toPx()
        drawContent()
        drawLine(
            color = color,
            start = Offset(widthPx / 2, 0f),
            end = Offset(widthPx / 2, size.height),
            strokeWidth = widthPx
        )
    }

Usage

fun Modifier.drawOneSideBorder(
    width: Dp,
    color: Color,
    shape: Shape = RectangleShape
) = this
    .clip(shape)
    .drawWithContent {
        val widthPx = width.toPx()
        drawContent()
        drawLine(
            color = color,
            start = Offset(widthPx / 2, 0f),
            end = Offset(widthPx / 2, size.height),
            strokeWidth = widthPx
        )
    }

Result