Crear un anillo de progreso en tiempo real
Combine canvas y estado en un widget.
Crear un anillo de progreso en tiempo real es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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! 🌀
Aprende Kotlin con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Crear un anillo de progreso en tiempo real» es gratis?
Sí — el texto completo de «Crear un anillo de progreso en tiempo real» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Crear un anillo de progreso en tiempo real»?
Combine canvas y estado en un widget. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Crear un anillo de progreso en tiempo real»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- DrawScope: líneas, rectángulos y círculos
- Trazados, degradados y modos de mezcla
- drawWithCache y rendimiento
- Crear un anillo de progreso en tiempo real