Navegación y pantallas de onboarding en Compose

Configurar la navegación en una app Android moderna empieza por integrar Kotlinx Serialization y construir composables reutilizables. Aquí aprendes a preparar el módulo de navegación, crear la pantalla GenderScreen y diseñar componentes como ActionButton y SelectableButton dentro del feature de onboarding.

Este flujo te sirve si estás desarrollando un calorie tracker o cualquier app con onboarding multipantalla en Jetpack Compose.

¿Cómo configurar Kotlinx Serialization en un proyecto Android?

Para que la navegación sea más intuitiva y aproveche el poder de Kotlin, necesitas integrar la librería Kotlinx Serialization en tu catálogo de versiones [01:00].

El proceso tiene tres pasos claros que debes ejecutar en orden:

• Agregar la versión 1.7.3 en el archivo libs.versions.toml con el nombre kotlinx.serialization.
• Crear el módulo apuntando a org.jetbrains.kotlinx:kotlinx.serialization.json con la referencia de versión.
• Registrar el plugin con el id org.jetbrains.kotlin.plugin.serialization usando la versión de Kotlin del proyecto, no la de la librería.

¿Por qué Kotlinx Serialization usa la versión de Kotlin para el plugin? Porque el plugin depende del compilador de Kotlin, no de la librería en sí. Solo la implementación usa la versión 1.7.3; el plugin debe coincidir con tu versión de Kotlin.

Después sincronizas y verificas que aparezca el build successful. Luego pasas al build.gradle de la aplicación, agregas apply false a nivel de proyecto y declaras la implementación con libs.kotlinx.serialization en las dependencias [03:30].

¿Cómo estructurar el módulo de navegación con rutas serializables?

La organización del paquete core define la escalabilidad de tu app. Dentro de Platzi creas el paquete core y, dentro, otro llamado navigation donde vivirá el objeto Routes [05:00].

Este objeto centraliza las rutas usando la anotación @Serializable, que es justamente lo que la librería de Kotlin Serialization aporta para que la navegación sea typesafe.

Las tres rutas iniciales del feature onboarding son:

1. WelcomeScreenRoute, la pantalla de bienvenida ya existente.
2. GenderScreenRoute, la pantalla de selección de género.
3. AgeScreenRoute, la pantalla de edad.

Cada una se declara como un object serializable. Así, cuando navegues entre pantallas, Compose Navigation entenderá automáticamente hacia dónde dirigirse sin que tengas que manejar strings frágiles.

¿Cómo crear el composable GenderScreen paso a paso?

Dentro de presentation creas el paquete onboarding y mueves WelcomeScreen allí, porque pertenece a ese feature [06:30]. Luego agregas un subpaquete GenderScreen con el composable principal.

La función GenderScreen recibe una lambda onNextClick que se ejecutará al presionar el botón de avanzar. La estructura visual usa un Box con fillMaxSize, fondo MaterialTheme.colorScheme.background y un padding apoyado en la variable global LocalSpacing.

Dentro del Box va una Column con verticalArrangement y horizontalAlignment centrados. El primer elemento es un Text que toma el string desde R.string con la frase What's your gender?, coloreado con MaterialTheme.colorScheme.surface y tipografía pequeña porque el protagonismo lo tendrán los botones.

¿Qué es LocalSpacing en Jetpack Compose? Es una variable global definida con CompositionLocal que centraliza los valores de padding y márgenes. Te permite reutilizar espaciados como small, medium o large en toda la app sin repetir constantes.

¿Cómo construir un ActionButton reutilizable en Compose?

El ActionButton vive en el paquete components dentro de onboarding y es transversal a todas las pantallas del feature [10:00].

Sus parámetros definen su flexibilidad:

• text para el contenido del botón.
• onClick como lambda de acción.
• modifier inicializado por defecto.
• isEnabled booleano en true.
• textStyle con MaterialTheme.typography.titleSmall.

El Button interno usa un RoundedCornerShape de 100.dp para lograr una forma casi totalmente redondeada, color de texto MaterialTheme.colorScheme.onPrimary y un padding pequeño desde LocalSpacing.current.spaceSmall.

Para visualizarlo sin compilar la app, agregas un @Preview envuelto en el tema PlatziCaloriesTheme y le pasas un texto como Siguiente.

¿Cómo funciona el SelectableButton con estado seleccionado?

El SelectableButton es un selector con dos estados que cambia su apariencia según esté activo o no [13:30]. Recibe text, isSelected booleano, un color, un selectedTextColor, una lambda onClick, un modifier y un textStyle.

La clave está en construirlo con un Box en lugar de un Button nativo. Esto demuestra que en Compose puedes crear botones desde cualquier composable base, dándote control total sobre el diseño.

El Box aplica:

• clip con RoundedCornerShape para esquinas redondeadas.
• border de width 2 con el color recibido.
• background condicional: el color pasado si isSelected es true, o Color.Transparent si no.
• clickable que dispara la lambda de selección.
• padding con LocalSpacing.current.spaceMedium.

El texto interno también cambia de color según el estado seleccionado. Un detalle importante: importa TextStyle desde Compose, no desde Java, para evitar errores de tipo [15:00].

¿Cómo integrar los selectores en GenderScreen?

Dentro de la Row de GenderScreen colocas tres SelectableButton: hombre, mujer y otro [18:00]. El primero queda con isSelected = true por defecto, los demás en false. Entre cada selector agregas un Spacer con width de spaceMedium para separarlos visualmente.

Cada botón usa MaterialTheme.colorScheme.primary como color, texto seleccionado en blanco y titleSmall con FontWeight.Normal para una lectura más limpia.

Al cierre, agregas el ActionButton con la lambda que llama a onNextClick, alineado al final con Alignment.End. Con esto previsualizas la pantalla completa: tres selectores y un botón de avance listos para conectar con la navegación.

¿Qué pantallas debes crear como práctica del feature onboarding?

El reto extiende lo aprendido a un flujo completo de onboarding para un calorie tracker [22:00]:

• AgeScreen para capturar la edad.
• HeightScreen para la altura.
• WeightScreen para el peso.
• ActivityGoalScreen para los objetivos.
• Calculador de nutrientes que conecta con la TrackerHomeScreen.

Replica la estructura de GenderScreen, reutiliza ActionButton y SelectableButton, y mantén la coherencia con LocalSpacing y MaterialTheme. ¿Ya tienes claro cómo conectarás la navegación entre estas pantallas? Cuéntame en los comentarios qué parte del onboarding quieres profundizar primero.