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?
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
)
)
}
}