Bienvenido a la UI moderna: Crea tu primer proyecto con Jetpack Compose

Si te dedicas al desarrollo móvil, habrás notado que la forma de diseñar pantallas en Android ha dado un giro de 180 grados. Ya no estamos atados a esos archivos XML interminables que a veces eran un auténtico dolor de cabeza; ahora tenemos Jetpack Compose, una herramienta que nos permite construir interfaces de una manera mucho más ágil y moderna.

Lanzarse a probar este sistema es casi obligatorio hoy en día si quieres que tus apps no se queden obsoletas. Básicamente, pasamos de decirle al sistema paso a paso cómo cambiar un elemento a simplemente definir el estado de la vista, dejando que el framework se encargue de repintar lo que haga falta sin que nosotros nos rompamos la cabeza.

¿De qué va exactamente Jetpack Compose?

Para entenderlo fácil, Compose es un sistema de creación de interfaces declarativas. Esto significa que, en lugar de escribir código para modificar una vista ya existente (estilo imperativo), nosotros describimos cómo debe verse la pantalla en función de los datos actuales. Es un concepto muy similar a lo que ya vemos en otros entornos como React, SwiftUI o Flutter.

Una de las claves es la conexión total con el estado. Cuando un dato cambia, la interfaz se actualiza automáticamente mediante un proceso optimizado que solo refresca las piezas necesarias, evitando que la app se vuelva lenta o consuma recursos de más.

Pero ojo, que Compose no es solo para Android. Su arquitectura se divide en tres bloques: el compilador (un plugin de Gradle), el runtime (que gestiona el árbol de nodos) y la librería de UI. Como el compilador y el runtime son genéricos, JetBrains ya está trabajando en Compose Multiplatform para compartir la arquitectura visual, lo que convierte a Kotlin Multiplatform en una opción brutal para compartir código entre distintas plataformas.

Manos a la obra: Tu primer proyecto

Para empezar no necesitas nada raro, solo tener instalado Android Studio (versión Arctic Fox o superior). El proceso es muy intuitivo: vas a crear un nuevo proyecto y, en la lista de plantillas, debes seleccionar la opción Empty Compose Activity.

A la hora de configurar los detalles, recuerda que el lenguaje debe ser Kotlin, ya que Compose no funciona con Java. En cuanto a la compatibilidad, puedes seleccionar el API level 21 o cualquier versión posterior para asegurar que tu app llegue a la gran mayoría de dispositivos.

Al abrir el código de la MainActivity, notarás que ya no hay un setContentView(R.layout.activity_main). En su lugar, encontramos la función setContent. Este bloque es el corazón de la app, donde escribiremos todo nuestro código de Compose, envolviendo los elementos en un tema personalizado (como MyMoviesTheme) y usando contenedores como Surface para gestionar fondos y elevaciones.

El poder de las funciones @Composable

En Compose, todo se basa en funciones. Para que el compilador sepa que una función es un componente de interfaz, debemos añadirle la anotación @Composable. Sin esto, el código simplemente no sabría cómo renderizarse en pantalla.

Por ejemplo, si quieres mostrar un texto, usarás la función Text(). Es la evolución del antiguo TextView, pero escrita de forma mucho más limpia. Un ejemplo básico sería una función que reciba un nombre y lo imprima en pantalla, permitiéndonos reutilizar este componente en cualquier parte de la aplicación.

Cómo visualizar cambios con las Previews

Como ya no tenemos el editor visual de arrastrar y soltar de los XML, Compose nos ofrece las Previews. Usando la anotación @Preview, podemos ver un adelanto de cómo queda el componente sin necesidad de lanzar la app completa en el emulador o en el móvil.

Es importante saber que las funciones de preview no pueden recibir parámetros, así que lo normal es crear una función específica de previsualización que llame al componente real pasando datos de prueba. Aunque a veces la compilación de la preview puede pecar de lenta, es muy útil para ajustar colores y textos al vuelo.

Además, puedes personalizar la preview añadiendo parámetros como showBackground = true para ver el fondo o asignando un name específico para organizar diferentes vistas (por ejemplo, una para el modo oscuro y otra para el modo claro) en la misma pantalla de diseño.

Ajustando la interfaz con Modificadores

Si te preguntas cómo se gestionan los márgenes, el tamaño o el color, la respuesta está en los Modifiers. Los modificadores son objetos que se pasan a los componentes para alterar su comportamiento o apariencia visual sin cambiar su naturaleza.

Por ejemplo, si quieres que un texto no esté pegado al borde, usarás Modifier.padding(16.dp). Un detalle técnico curioso es que el valor dp se implementa como una función de extensión de los números en Kotlin, lo que hace que el código sea muy legible y natural.

Al final del día, adoptar este flujo de trabajo reduce drásticamente la cantidad de código repetitivo, hace que la estructura sea más intuitiva y fácil de mantener, y permite que conviva perfectamente con código antiguo basado en XML si estás migrando una app ya existente.

Dominar la creación de interfaces declarativas implica entender que el diseño ahora depende totalmente del estado de la aplicación, permitiéndonos construir desde sencillos textos hasta complejas arquitecturas MVVM con Room y StateFlow, logrando que la experiencia de usuario sea fluida y el desarrollo sea mucho más placentero para nosotros los programadores.