I have a design for Android where I would need to draw a line with the rounded edge on only one side of the line.
Think a progress bar where both ends of the bar have rounded edges, but it consist of two colors and so that the intersecting part, where the colors change, should not have a rounded edge. My plan is to implement this by drawing two lines of correct length and color where each end has a rounded edge.
Is there some nice way to do it with Jetpack Compose?
I know I can make rounded edges in Compose like this:
drawLine(
start = ..,
end = ..,
strokeWidth = 8.dp.toPx(),
cap = StrokeCap.Round,
)
But this will make both ends of the line rounded, right? Is there some nice way to only round one end of the line?
>Solution :
extension function of DrawScope that draws 2 lines.
fun DrawScope.drawHorizontalOneEdgeLine(
color: Color,
start: Offset,
end: Offset,
strokeWidth: Float = Stroke.HairlineWidth,
cap: StrokeCap = Stroke.DefaultCap,
pathEffect: PathEffect? = null,
alpha: Float = 1.0f,
colorFilter: ColorFilter? = null,
blendMode: BlendMode = DrawScope.DefaultBlendMode
) {
drawLine(
color = color,
start = start,
end = end,
strokeWidth = strokeWidth,
cap = cap,
pathEffect = pathEffect,
alpha = alpha,
colorFilter = colorFilter,
blendMode = blendMode
)
drawLine(
color = color,
start = start.plus(Offset(strokeWidth / 2f, 0f)),
end = end,
strokeWidth = strokeWidth,
cap = StrokeCap.Square,
pathEffect = pathEffect,
alpha = alpha,
colorFilter = colorFilter,
blendMode = blendMode
)
}
Result
Demo
@Preview
@Composable
fun LineSample() {
Canvas(modifier = Modifier.fillMaxSize()) {
drawLine(
color = Color.Red,
start = Offset(100f, 100f),
end = Offset(700f, 100f),
cap = StrokeCap.Round,
strokeWidth = 32.dp.toPx()
)
drawHorizontalOneEdgeLine(
color = Color.Blue,
start = Offset(100f, 200f),
end = Offset(700f, 200f),
cap = StrokeCap.Round,
strokeWidth = 32.dp.toPx()
)
drawLine(
color = Color.LightGray,
start = Offset(100f, 1000f),
end = Offset(1000f, 1000f),
cap = StrokeCap.Round,
strokeWidth = 32.dp.toPx()
)
drawHorizontalOneEdgeLine(
color = Color.Green,
start = Offset(100f, 1000f),
end = Offset(600f, 1000f),
cap = StrokeCap.Round,
strokeWidth = 32.dp.toPx()
)
}
}

