Jetpack Compose para Kotlin: guía completa con ejemplos

¿Qué es Jetpack Compose y para qué sirve?

Jetpack Compose es un conjunto moderno de herramientas para crear interfaces de usuario (UI) para Android, desarrollado por Google. A diferencia del enfoque tradicional basado en diseño XML y el sistema View, Compose utiliza un enfoque declarativo. Esto significa que describes cómo debería verse la UI en cada estado de los datos, en lugar de describir una secuencia de pasos para modificarla.

Principales ventajas de Jetpack Compose:

\n
• Declaratividad: Describes la UI como una función del estado. Cuando el estado cambia, Compose redibuja automáticamente solo las partes de la UI que han cambiado.
\n
• Menos código: En comparación con XML + View, el código en Compose suele ser más corto y legible.
\n
• Intuitividad: Se utiliza el lenguaje Kotlin, lo que hace que el código sea más natural para los desarrolladores de Android.
\n
• Rendimiento: Compose está optimizado para trabajar con las nuevas arquitecturas de Android y minimiza los redibujados.
\n
• Compatibilidad: Compose se puede integrar gradualmente en proyectos existentes, usándolo junto con el View tradicional.
\n

Jetpack Compose no es solo una biblioteca, sino todo un ecosistema que incluye herramientas para trabajar con animaciones, navegación, pruebas y mucho más. Es el futuro del desarrollo de Android, y Google recomienda activamente migrar a él.

Instalación de Jetpack Compose

Dado que Jetpack Compose es una biblioteca para Android, no se instala mediante pip (Python) ni npm (JavaScript). En su lugar, se añade a un proyecto Android a través del sistema de compilación Gradle. Aquí tienes una guía paso a paso:

1. Configuración del proyecto en Android Studio

Crea un nuevo proyecto Android seleccionando la plantilla "Empty Compose Activity". Android Studio configurará automáticamente todas las dependencias necesarias.

2. Configuración manual (si el proyecto ya existe)

Abre el archivo build.gradle.kts (a nivel de proyecto) y asegúrate de que en el bloque plugins esté:

plugins {\n    id("com.android.application") version "8.2.0" apply false\n    id("org.jetbrains.kotlin.android") version "1.9.20" apply false\n}

Luego, abre el archivo build.gradle.kts (a nivel de módulo, normalmente app) y añade:

plugins {\n    id("com.android.application")\n    id("org.jetbrains.kotlin.android")\n}\n\nandroid {\n    namespace = "com.example.myapp"\n    compileSdk = 34\n\n    defaultConfig {\n        applicationId = "com.example.myapp"\n        minSdk = 24\n        targetSdk = 34\n        versionCode = 1\n        versionName = "1.0"\n    }\n\n    buildFeatures {\n        compose = true\n    }\n\n    composeOptions {\n        kotlinCompilerExtensionVersion = "1.5.5"\n    }\n\n    kotlinOptions {\n        jvmTarget = "17"\n    }\n}\n\ndependencies {\n    implementation(platform("androidx.compose:compose-bom:2024.01.00"))\n    implementation("androidx.compose.ui:ui")\n    implementation("androidx.compose.ui:ui-graphics")\n    implementation("androidx.compose.ui:ui-tooling-preview")\n    implementation("androidx.compose.material3:material3")\n    implementation("androidx.activity:activity-compose:1.8.2")\n    debugImplementation("androidx.compose.ui:ui-tooling")\n    debugImplementation("androidx.compose.ui:ui-test-manifest")\n}

Después de sincronizar Gradle, puedes empezar a usar Jetpack Compose.

Inicio rápido con un ejemplo de código

La forma más sencilla de empezar es crear una pantalla con el texto "Hello, World!". Para ello, en tu Activity (o en cualquier otro lugar donde uses Compose), llama a la función setContent:

import android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.