Ejemplo práctico 4: Barra de progreso circular personalizada

Objetivo

Este ejemplo muestra cómo crear una barra de progreso circular usando Canvas.

Composable BarraProgresoCircular

 1@Composable
 2fun BarraProgresoCircular(progreso: Float) {
 3    Canvas(modifier = Modifier.size(150.dp)) {
 4        // Fondo del círculo (gris)
 5        drawCircle(
 6            color = Color.LightGray,
 7            radius = size.minDimension / 2,
 8            center = center,
 9            style = Stroke(width = 20f)
10        )
11
12        // Progreso (azul)
13        drawArc(
14            color = Color.Blue,
15            startAngle = -90f,
16            sweepAngle = 360 * progreso,
17            useCenter = false,
18            style = Stroke(width = 20f, cap = StrokeCap.Round),
19            size = size
20        )
21    }
22}

Para visualizar el ejemplo en la vista previa de Android Studio añade el siguiente métodos:

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaBarraProgreso() {
4    BarraProgresoCircular(progreso = 0.65f) // 65% de progreso
5}

Para dotar de movimiento a la barra de progreso, se añadirá el siguiente código en el método onCreate(). Además, se podrá ver una breve introducción al uso de Scaffold, Toolbar y FloatingActionButton.

 1override fun onCreate(savedInstanceState: Bundle?) {
 2    super.onCreate(savedInstanceState)
 3    enableEdgeToEdge()
 4    setContent {
 5        Examplet02Theme {
 6            var progreso by remember { mutableStateOf(0.0f) }
 7
 8            Scaffold(
 9                modifier = Modifier.fillMaxSize(),
10                topBar = {
11                    TopAppBar(
12                        title = { Text("Scaffold con Canvas") }
13                    )
14                },
15                floatingActionButton = {
16                    FloatingActionButton(
17                        onClick = {
18                            progreso += 0.1f
19                            if (progreso > 1.01f) progreso = 0f
20                        }
21                    ) {
22                        Icon(Icons.Default.Refresh, contentDescription = "Incrementar Progreso")
23                    }
24                }
25            ) { padding ->
26                Box(
27                    modifier = Modifier
28                        .fillMaxSize()
29                        .padding(padding),
30                    contentAlignment = Alignment.Center
31                ) {
32                    BarraProgresoCircular(progreso = progreso)
33                }
34            }
35        }
36    }
37}

Para verla en acción deberás lanzar la aplicación contra un emulador o un dispositivo físico.