I'm trying to round corners of CircularProgressInd...
# compose
p
I'm trying to round corners of CircularProgressIndicator using jetpack compose. But I don't see any member variables to do so. Following is the source code, but it doesn't take Stroke as a parameter. If it can then we'll be able to create our custom Stroke with a round cap.
Copy code
@Composable
    fun CircularProgressIndicator(
        /@FloatRange(from = 0.0, to = 1.0)/
        progress: Float,
        modifier: Modifier = Modifier,
        color: Color = MaterialTheme.colors.primary,
        strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
    ) {
        val stroke = with(LocalDensity.current) {
            Stroke(width = strokeWidth.toPx(), cap = StrokeCap.Butt)
        }
        Canvas(
            modifier
                .progressSemantics(progress)
                .size(CircularIndicatorDiameter)
                .focusable()
        ) {
            // Start at 12 O'clock
            val startAngle = 270f
            val sweep = progress * 360f
            drawDeterminateCircularIndicator(startAngle, sweep, color, stroke)
        }
    }
f
I think the best way is to copy and modify the
CircularProgressIndicator
to have rounded corners 🙂 It shouldn't be too complicated
c
The CircularProgressIndicator is based off the Material Design spec (https://material.io/components/progress-indicators#circular-progress-indicators), which doesn’t include slots for changing the stroke cap. So if you’d like to change the design you will have to implement your own version of it.
207 Views