0Pricing
Jetpack Compose Academy · Lesson

Build a Live Progress Ring

Combine canvas and state into a widget.

Build a Live Progress Ring is a free Jetpack Compose Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Goal

Time to build something real: a progress ring that fills as a value grows. It blends canvas drawing with live Compose state.

An Arc, Not a Circle

A ring is really an arc. We draw a faint full circle as a track, then a bright arc on top showing the progress so far.

Hold the Progress

Store the value in state so the ring redraws when it changes. A float from 0f to 1f maps cleanly to zero through full.

var progress by remember { mutableStateOf(0.25f) }

Draw the Track

First paint the background ring with drawCircle using a Stroke. A soft gray track shows the full path the progress will fill.

drawCircle(
    color = Color.LightGray,
    style = Stroke(width = 24f)
)

Meet drawArc

The hero is drawArc. It draws a slice of a circle defined by a start angle and a sweep angle, both measured in degrees.

drawArc(
    color = Color.Blue,
    startAngle = -90f,
    sweepAngle = 90f,
    useCenter = false
)

Start at the Top

Angle 0 points right, so we use a startAngle of -90f to begin at the top. That feels natural for a progress indicator.

Sweep by Progress

A full circle is 360 degrees, so the sweepAngle is just progress times 360. At 0.5f the arc covers exactly half the ring.

val sweep = progress * 360f
drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false)

useCenter Stays False

Keep useCenter false so you draw a ring slice, not a filled pie wedge. With a Stroke style it becomes a clean rounded band.

drawArc(color = Color.Blue, startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(width = 24f, cap = StrokeCap.Round))

Animate the Value

Wrap the value in animateFloatAsState so changes glide instead of jumping. The ring then smoothly grows toward each new target.

val animated by animateFloatAsState(targetValue = progress)

Add a Gradient

Swap the flat color for a sweepGradient brush and the ring gets a vivid, modern look as the colors rotate around it.

drawArc(brush = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)), startAngle = -90f, sweepAngle = sweep, useCenter = false, style = Stroke(24f))

Layer the Label

Place a Text showing the percentage in a Box centered over the Canvas. Now your widget reads as a complete, polished control.

Quick Check

How do you turn a 0f-to-1f progress value into the arc's sweep?

Recap

You built a live ring: a track circle, a drawArc swept by progress times 360, animated state, and a gradient stroke. Beautiful work! 🌀

Frequently asked questions

Is the “Build a Live Progress Ring” lesson free?

Yes — the full text of “Build a Live Progress Ring” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.

What will I learn in “Build a Live Progress Ring”?

Combine canvas and state into a widget. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Jetpack Compose Academy?

No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Build a Live Progress Ring” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Jetpack Compose Academy lesson?

Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. DrawScope: Lines, Rects & Circles
  2. Paths, Gradients & Blend Modes
  3. drawWithCache & Performance
  4. Build a Live Progress Ring
← Back to Jetpack Compose Academy