Jetpack Compose Academy · Lektion

Einen Live-Fortschrittsring erstellen

Verbinden Sie Canvas und State zu einem Widget.

Einen Live-Fortschrittsring erstellen ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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! 🌀

Häufig gestellte Fragen

Ist die Lektion „Einen Live-Fortschrittsring erstellen“ kostenlos?

Ja — der vollständige Text von „Einen Live-Fortschrittsring erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Einen Live-Fortschrittsring erstellen“?

Verbinden Sie Canvas und State zu einem Widget. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Einen Live-Fortschrittsring erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy