I am trying to make a "Custom ProgressIndicator" since I need to be able to have Rounded StrokeCaps ...

# compose

[Tom Truyen]

I am trying to make a "Custom ProgressIndicator" since I need to be able to have Rounded StrokeCaps and a Gradient, though I seem to have found an issue with drawArc in Canvas.

On the Transparent end of my "arc" it seems to reset the color of my cap to the initial red color, though I just want the gradient to continue over it

CODE IN THREAD

[Tom Truyen]

Canvas(
        modifier = Modifier
            .rotate(rotateTransition)
            .padding(thickness / 2)
            .size(48.dp),
        onDraw = {
            val gradientBrush = Brush.sweepGradient(
                colors = listOf(Color.Transparent, color),
                center = Offset(
                    x = size.width / 2,
                    y = size.height / 2
                ),
            )

            drawArc(
                brush = gradientBrush,
                startAngle = 0f,
                sweepAngle = 270f,
                useCenter = false,
                style = Stroke(
                    width = thickness.toPx(),
                    cap = StrokeCap.Round,
                )
            )
        }
    )

[Stylianos Gakis]

hacking it by doing something simple like startAngle = 2.dp.toPx(), might help you for now until someone smarter comes in with a real solution 😅

[Tom Truyen]

Great, that does work, even though it feels like a dirty fix

[Tom Truyen]

Any idea why this happens?

[Stylianos Gakis]

Yeah, the cap just goes “behind” the start angle, it’s simple as that. Now what the “proper” way to fix this is I really don’t know.