How can I draw a line in jetpack compose and have a custom corner?

Question

I'm implementing a gradient progress bar indicator.
I've found this useful which is drawing progress bar using drawLine like this,

drawLine(
    color = backgroundIndicatorColor,
    cap = StrokeCap.Round,
    strokeWidth = size.height,
    start = Offset(x = 0f, y = 0f),
    end = Offset(x = size.width, y = 0f)
)

Now I want to give it a custom rounded corner like below.
How can I do that?

Answer 1

You can use drawRoundedRect function with any CornerRadius as

@Preview
@Composable
private fun Test() {
    Canvas(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .height(30.dp)
    ) {

        val cornerRadius = 8.dp.toPx()
        val progress = .7f

        drawRoundRect(
            color = Color.LightGray,
            cornerRadius = CornerRadius(
                x = cornerRadius,
                y = cornerRadius
            )
        )
        drawRoundRect(
            brush = Brush.horizontalGradient(gradientColors),
            cornerRadius = CornerRadius(
                x = cornerRadius,
                y = cornerRadius
            ),
            size = Size(
                size.width * progress,
                size.height
            )
        )
    }
}