Circular Intermediate with background color in jetpack compose

Question

I want to make circular intermediate progress bar in jetpack compose. I tried some piece of code but it's not working correctly to animate the circle. I tried this answer as well, but nothing works

           val strokeWidth = dimensionResource(R.dimen.stroke)
           Box(modifier = Modifier.fillMaxSize()) {
            CircularProgressIndicator(
                progress = .25f,
                modifier = Modifier
                    .align(Alignment.Center)
                    .drawBehind {
                        drawCircle(
                            Cloudy,
                            radius = size.width / 2 - strokeWidth.toPx() / 2,
                            style = Stroke(strokeWidth.toPx())
                        )
                    },
                color = Aqua,
                strokeWidth = strokeWidth
             )
          }

Actual Output

The animation is not working

Expected Output

I don't understand why the expected output should be this. Your progress = 0.5 -> half circle. — Gabriele Mariotti, Jan 12 '23 at 13:25
@GabrieleMariotti I updated the code. The problem is the animation is not working. — Kotlin Learner, Jan 12 '23 at 13:30
the animation doesn't work because the progress has a fixed value — Gabriele Mariotti, Jan 12 '23 at 13:49
@GabrieleMariotti I tried to remove `progress = .25f` then animation works but I want my expected output — Kotlin Learner, Jan 12 '23 at 13:54
Do you want to have an indeterminate progress animating the 1/4 of circle ? — Gabriele Mariotti, Jan 12 '23 at 13:59
In this case you can't use the CircularProgressIndicator but you have to use drawArc and then animate it. — Gabriele Mariotti, Jan 12 '23 at 14:12

Gabriele Mariotti · Accepted Answer · 2023-01-12T14:34:10.167

In your case you want an infinite transition animating the arc of circle.
You can draw the arc using drawArc and then rotate it using:

rotate(value) {
  // content is rotated by angle in degrees
}

Something like:

val transition = rememberInfiniteTransition()
val currentRotation by transition.animateValue(
    0F,
    targetValue = 360F,
    Float.VectorConverter,
    infiniteRepeatable(
        animation = tween(
            durationMillis = 5000,
            easing = LinearEasing
        )
    )
)


Box(modifier = Modifier
        .size(100.dp)
        .drawBehind {

            //background fixed circle
            drawCircle(
                color = LightGray,
                radius = size.width / 2 - strokeWidth.toPx() / 2,
                style = Stroke(strokeWidth.toPx())
            )

            val diameterOffset = strokeWidth.toPx() / 2
            val arcDimen = size.width - 2 * diameterOffset

            //arc with indeterminate animation
            rotate(currentRotation) {
                drawArc(
                    color = Red,
                    startAngle = 45F,
                    sweepAngle = 90F,
                    useCenter = false,
                    topLeft = Offset(diameterOffset, diameterOffset),
                    size = Size(arcDimen, arcDimen),
                    style = Stroke(strokeWidth.toPx())
                )
            }
        }

)

thank you so much. It works. I have some doubt `topLeft = Offset(diameterOffset, diameterOffset),` what does it do? why we set `offset`? — Kotlin Learner, Jan 12 '23 at 16:58
@VivekModi In this way you remove half the stroke width from the total diameter for both sides to have a rect with edges that line up with the midpoint of the stroke of the background circle. — Gabriele Mariotti, Jan 13 '23 at 06:32
Thank you so much. Can you please help me on this [issue](https://stackoverflow.com/q/75112301/8266651) — Kotlin Learner, Jan 13 '23 at 21:46

Circular Intermediate with background color in jetpack compose

1 Answers1

Linked