Ejemplos prácticos on Documentación

Ejemplo práctico 1: Estado observable

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 1: Estado observable

Objetivo

Entender el funcionamiento de un observable y las diferencias entre utilizar remember { mutableStateOf(false) } y remember { false }.

Desarrollo#

La clase MainActivity es la típica configuración de una actividad con Jetpack Compose, donde se establece el tema y el Scaffold, desde donde se llama a la función composable RememberVsMutableStateDemo:

 1class MainActivity : ComponentActivity() {
 2    override fun onCreate(savedInstanceState: Bundle?) {
 3        super.onCreate(savedInstanceState)
 4        enableEdgeToEdge()
 5        setContent {
 6            ExampleT1_01Theme {
 7                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
 8                    RememberVsMutableStateDemo(Modifier.padding(innerPadding))
 9                }
10            }
11        }
12    }
13}

Observa el código del método RememberVsMutableStateDemo, en el se muestran dos bloques similares pero con comportamientos diferentes:

Ejemplo práctico 2: Centrar un Text usando Modifier.layout

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 2: Centrar un Text usando Modifier.layout

Objetivo

Aprende a crear un layout personalizado que centre un composable hijo (en este caso, un Text) manualmente, sin usar Box o Arrangement.Center.

Estructura del Modifier.layout#

 1Modifier.layout { measurable, constraints ->
 2    // Se mide el hijo con las restricciones.
 3    val placeable = measurable.measure(constraints)
 4
 5    // Se calcula el tamaño total del padre.
 6    val width = constraints.maxWidth
 7    val height = constraints.maxHeight
 8
 9    // se calcula la posición centrada.
10    val x = (width - placeable.width) / 2
11    val y = (height - placeable.height) / 2
12
13    // Se devuelve el layout y se coloca el hijo.
14    layout(width, height) {
15        placeable.place(x, y)
16    }
17}

Ejemplo completo#

Se crea el método composable:

Ejemplo práctico 3: Limitar al 50% del espacio disponible usando Modifier.layout

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 3: Limitar al 50% del espacio disponible usando Modifier.layout

Objetivo

Se creará un modificador personalizado llamado limitarAnchoAl50Porciento() que limite el ancho del hijo al 50% del ancho máximo disponible. Además, colocará el hijo centrado horizontalmente dentro del espacio total y mantendrá la altura original del hijo.

Modificador personalizado#

 1fun Modifier.limitarAnchoAl50Porciento(): Modifier = this.then(
 2    Modifier.layout { measurable, constraints ->
 3        // Se calcula el 50% del ancho disponible.
 4        val anchoDisponible = constraints.maxWidth
 5        val anchoLimitado = anchoDisponible / 2
 6
 7        // Se crean nuevas restricciones con ancho máximo reducido.
 8        val newConstraints = constraints.copy(maxWidth = anchoLimitado)
 9
10        // Se mide el hijo con esas restricciones.
11        val placeable = measurable.measure(newConstraints)
12
13        // La altura del padre será la del hijo, ancho será el original.
14        layout(anchoDisponible, placeable.height) {
15            // Se centra horizontalmente
16            val x = (anchoDisponible - placeable.width) / 2
17            placeable.place(x, 0)
18        }
19    }
20)

A continuación, se creará el método composable:

Ejemplo práctico 4: BoxWithConstraints adaptativo

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 4: BoxWithConstraints adaptativo

Objetivo

Este ejemplo muestra un texto diferente según si el ancho del contenedor es mayor o menor a 300.dp. Además, el fondo cambia de color para mayor visibilidad.

Composable EjemploBoxWithConstraints#

 1@SuppressLint("UnusedBoxWithConstraintsScope")
 2@Composable
 3fun EjemploBoxWithConstraints() {
 4    BoxWithConstraints(
 5        modifier = Modifier
 6            .fillMaxWidth()
 7            .height(200.dp)
 8            .background(Color.LightGray)
 9    ) {
10        val isPantallaGrande = maxWidth > 300.dp
11
12        Box(
13            modifier = Modifier
14                .fillMaxSize()
15                .background(if (isPantallaGrande) Color.Cyan else Color.Magenta),
16            contentAlignment = Alignment.Center
17        ) {
18            Text(
19                text = if (isPantallaGrande) "Pantalla ancha" else "Pantalla estrecha",
20                fontSize = 20.sp,
21                color = Color.White
22            )
23        }
24    }
25}

Para visualizar el ejemplo en la vista previa de Android Studio añade los siguientes métodos, ajustando los anchos de pantalla:

Ejemplo práctico 5: Barra de progreso circular personalizada

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 5: Barra de progreso circular personalizada

Objetivo

Este ejemplo muestra cómo crear una barra de progreso circular usando Canvas. Además, se introduce el uso de Scaffold, TopAppBar y FloatingActionButton para crear una interfaz más completa.

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:

Ejemplo práctico 6: Fondo decorativo con formas

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 6: Fondo decorativo con formas

Objetivo

Este ejemplo crea un fondo decorativo con círculos y líneas, ideal para personalizar pantallas.

Composable FondoDecorativo#

 1@Composable
 2fun FondoDecorativo(modifier: Modifier = Modifier) {
 3    Canvas(modifier = modifier.fillMaxSize()) {
 4        val ancho = size.width
 5        val alto = size.height
 6
 7        // Fondo general
 8        drawRect(Color(0xFFEFEFEF))
 9
10        // Círculo azul en esquina superior izquierda
11        drawCircle(
12            color = Color.Blue,
13            radius = ancho / 4,
14            center = Offset(ancho / 4, alto / 4)
15        )
16
17        // Línea diagonal decorativa
18        drawLine(
19            color = Color.Magenta,
20            start = Offset(0f, alto),
21            end = Offset(ancho, 0f),
22            strokeWidth = 10f
23        )
24
25        // Pequeños círculos decorativos
26        for (i in 1..5) {
27            drawCircle(
28                color = Color.Green,
29                radius = 20f,
30                center = Offset(ancho * i / 6, alto * i / 6)
31            )
32        }
33    }
34}

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

Ejemplo práctico 7: Animación con graphicsLayer y Scaffold

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 7: Animación con graphicsLayer y Scaffold

Objetivo

Este ejemplo se creará un Scaffold con TopAppBar y FloatingActionButton. Se creará un composable que anime su rotación y escala usando graphicsLayer y un botón flotante que inicie o detenga la animación.

Composable EjemploAvanzadoGraphicsLayer#

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploAvanzadoGraphicsLayer() {
 4    var animar by remember { mutableStateOf(false) }
 5    val rotacion by animateFloatAsState(
 6        targetValue = if (animar) 360f else 0f,
 7        animationSpec = tween(durationMillis = 2000, easing = LinearEasing)
 8    )
 9    val escala by animateFloatAsState(
10        targetValue = if (animar) 1.5f else 1f,
11        animationSpec = tween(durationMillis = 2000, easing = LinearEasing)
12    )
13
14    Scaffold(
15        topBar = {
16            TopAppBar(title = { Text("GraphicsLayer Avanzado") })
17        },
18        floatingActionButton = {
19            FloatingActionButton(onClick = { animar = !animar }) {
20                Icon(Icons.Default.PlayArrow, contentDescription = "Animar")
21            }
22        }
23    ) { padding ->
24        Box(
25            modifier = Modifier
26                .fillMaxSize()
27                .padding(padding),
28            contentAlignment = Alignment.Center
29        ) {
30            Box(
31                modifier = Modifier
32                    .size(150.dp)
33                    .graphicsLayer(
34                        rotationZ = rotacion,
35                        scaleX = escala,
36                        scaleY = escala,
37                        alpha = 0.8f,
38                        shadowElevation = 16f
39                    )
40                    .background(Color(0xFF6200EE)),
41                contentAlignment = Alignment.Center
42            ) {
43                Text("Animado", color = Color.White, fontSize = 18.sp)
44            }
45        }
46    }
47}

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

Ejemplo práctico 8: Uso básico de Scaffold con Snackbar

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 8: Uso básico de Scaffold con Snackbar

Objetivo

En este ejemplo se utiliza Material 3 para añadir un Scaffold con TopAppBar, BottomAppBar, y FloatingActionButton. Además, se utiliza un Snackbar mediante SnackbarHostState y cambio de contenido al pulsar el FAB, mostrando Snackbar cuando el contador alcanza el máximo (5).

Composable ScaffoldMaterial3ConSnackbar#

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun ScaffoldMaterial3ConSnackbar() {
 4    val snackbarHostState = remember { SnackbarHostState() }
 5    val scope = rememberCoroutineScope()
 6    var contador by remember { mutableStateOf(0) }
 7
 8    Scaffold(
 9        snackbarHost = { SnackbarHost(snackbarHostState) },
10        topBar = {
11            TopAppBar(
12                title = { Text("Mi App Simple M3") },
13                colors = topAppBarColors(
14                    containerColor = MaterialTheme.colorScheme.primaryContainer,
15                    titleContentColor = MaterialTheme.colorScheme.primary,
16                )
17            )
18        },
19        bottomBar = {
20            BottomAppBar {
21                IconButton(onClick = { /* Acción 1 */ }) {
22                    Icon(Icons.Default.Home, contentDescription = "Home")
23                }
24                Spacer(Modifier.weight(1f))
25                IconButton(onClick = { /* Acción 2 */ }) {
26                    Icon(Icons.Default.Favorite, contentDescription = "Favoritos")
27                }
28            }
29        },
30        floatingActionButton = {
31            ExtendedFloatingActionButton(
32                onClick = {
33                    if (contador < 5) {
34                        contador++
35                        Log.d("ScaffoldM3", "Contador incrementado: $contador")
36                    } else {
37                        scope.launch {
38                            snackbarHostState.showSnackbar(
39                                "Conteo máximo alcanzado",
40                                actionLabel = "Reiniciar",
41                                duration = SnackbarDuration.Short
42                            ).let { result ->
43                                if (result == SnackbarResult.ActionPerformed) {
44                                    contador = 0
45                                }
46                            }
47                        }
48                    }
49                }
50            ) {
51                Text("Sumar")
52            }
53        },
54        floatingActionButtonPosition = FabPosition.End
55    ) { innerPadding ->
56        Box(
57            modifier = Modifier
58                .fillMaxSize()
59                .padding(innerPadding),
60            contentAlignment = Alignment.Center
61        ) {
62            Text(
63                text = "Conteo: $contador",
64                fontSize = 24.sp,
65                fontWeight = FontWeight.Bold
66            )
67        }
68    }
69}

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

Ejemplo práctico 9: Menú básico en TopAppBar con devolución de selección vía callback

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 9: Menú básico en TopAppBar con devolución de selección vía callback

Objetivo

Este ejemplo trata de plantear una posible solución a problemas que pueden plantearse durante el desarrollo de aplicaciones móviles. La idea es crear un componente para montar una TopAppBar con un menú, evaluando la selección del usuario mediante un único callback, comprobando la respuesta producida y actuando en consecuencia. Debes tener en cuenta que en Compose los métodos no devuelven valores, de ahí el uso de callbacks.

Ejemplo práctico 10: Menú con DropdownMenu en BottomAppBar

Mon, 01 Jan 0001 00:00:00 +0000

Ejemplo práctico 10: Menú con DropdownMenu en BottomAppBar

Objetivo

Este ejemplo es una variante del anterior. Se sustituirá la TopAppBar con un menú por una BottomAppBar, evaluando la selección del usuario mediante un único callback, comprobando la respuesta recibida y actuando en consecuencia. Debes tener en cuenta que en Compose los métodos no devuelven valores, de ahí el uso de callbacks. Se mantendrá la misma estructura de sealed class, añadiendo label e icon.

Ejemplo práctico 11: Login en un cuadro de diálogo

Mon, 01 Jan 0001 00:00:00 +0000

Objetivo

Este ejemplo permite crear un AlertDialog personalizado para solicitar usuario y contraseña.

Recursos en `string.xml`#

Como en la versión anterior, se tratará de evitar lo máximo posible el hardcoded text, aunque en ocasiones, verás que se omite por razones didácticas.

 1<resources>
 2    <string name="app_name">ExampleT2_10</string>
 3
 4    <string name="txt_title">Login</string>
 5    <string name="txt_user">Usuario</string>
 6    <string name="txt_password">Contraseña</string>
 7
 8    <string name="txt_login_error">Credenciales incorrectas</string>
 9    <string name="txt_login_ok">Credenciales correctas</string>
10</resources>

Compose `LoginDialog`#

Se creará el siguiente compose para mostrar el cuadro de diálogo personalizado, en esta ocasión se utiliza AlertDialog ya que la personalización es mínima y simplifica el código, pero para los cuadros de diálogo personalizados se recomienda el uso de Dialog.

Ejemplos prácticos on Documentación

Ejemplo práctico 1: Estado observable

Ejemplo práctico 1: Estado observable

Desarrollo#

Ejemplo práctico 2: Centrar un Text usando Modifier.layout

Ejemplo práctico 2: Centrar un Text usando Modifier.layout

Estructura del Modifier.layout#

Ejemplo completo#

Ejemplo práctico 3: Limitar al 50% del espacio disponible usando Modifier.layout

Ejemplo práctico 3: Limitar al 50% del espacio disponible usando Modifier.layout

Modificador personalizado#

Ejemplo práctico 4: BoxWithConstraints adaptativo

Ejemplo práctico 4: BoxWithConstraints adaptativo

Composable EjemploBoxWithConstraints#

Ejemplo práctico 5: Barra de progreso circular personalizada

Ejemplo práctico 5: Barra de progreso circular personalizada

Composable BarraProgresoCircular#

Ejemplo práctico 6: Fondo decorativo con formas

Ejemplo práctico 6: Fondo decorativo con formas

Composable FondoDecorativo#

Ejemplo práctico 7: Animación con graphicsLayer y Scaffold

Ejemplo práctico 7: Animación con graphicsLayer y Scaffold

Composable EjemploAvanzadoGraphicsLayer#

Ejemplo práctico 8: Uso básico de Scaffold con Snackbar

Ejemplo práctico 8: Uso básico de Scaffold con Snackbar

Composable ScaffoldMaterial3ConSnackbar#

Ejemplo práctico 9: Menú básico en TopAppBar con devolución de selección vía callback

Ejemplo práctico 9: Menú básico en TopAppBar con devolución de selección vía callback

Ejemplo práctico 10: Menú con DropdownMenu en BottomAppBar

Ejemplo práctico 10: Menú con DropdownMenu en BottomAppBar

Ejemplo práctico 11: Login en un cuadro de diálogo

Ejemplo práctico 11: Login en un cuadro de diálogo

Recursos en string.xml#

Compose LoginDialog#

Recursos en `string.xml`#

Compose `LoginDialog`#