Jetpack compose guía de instalación

Cómo Instalar Jetpack Compose: La Guía Definitiva

por

Cómo Instalar Jetpack Compose

Jetpack Compose es una moderna herramienta para el desarrollo de interfaces de usuario en Android, y su instalación es un proceso sencillo que requiere configurar tu entorno de desarrollo para soportar las bibliotecas necesarias. A continuación, se detallan los pasos necesarios para instalar y configurar Jetpack Compose en tu proyecto Android.

Requisitos Previos

  1. Android Studio: Asegúrate de tener instalada la versión más reciente de Android Studio. Jetpack Compose es compatible con Android Studio Arctic Fox (2020.3.1) y versiones posteriores.
  2. Kotlin: Compose utiliza Kotlin, así que asegúrate de que tu proyecto esté configurado para usar Kotlin.

Pasos para Instalar Jetpack Compose

A continuación te mostramos una guía de instalación para ayudarte a que tu proceso de integración sea simple, fácil y rápido.

Paso 1: Configurar Android Studio

  1. Actualizar Android Studio: Abre Android Studio y verifica que tengas la versión más reciente. Puedes hacerlo navegando a Help > Check for Updates en Windows/Linux o Android Studio > Check for Updates en macOS.
  2. Instalar el Plugin de Kotlin: Asegúrate de tener instalado y habilitado el plugin de Kotlin. Ve a File > Settings > Plugins y busca “Kotlin”. Instálalo si aún no lo tienes.

Paso 2: Crear un Nuevo Proyecto con Jetpack Compose

  1. Iniciar un Nuevo Proyecto: Abre Android Studio y selecciona Start a new Android Studio project.
  2. Seleccionar la Plantilla: En la pantalla “Select a Project Template”, elige “Empty Compose Activity”. Esta plantilla está preconfigurada para trabajar con Jetpack Compose.
  3. Configurar el Proyecto: Introduce los detalles de tu proyecto, como el nombre, el dominio del paquete y la ubicación del proyecto. Asegúrate de que el lenguaje esté configurado como “Kotlin”.

Paso 3: Actualizar el Archivo build.gradle del Proyecto

Abre el archivo build.gradle de nivel de proyecto y asegúrate de que el repositorio de Google esté incluido en la sección repositories:

   allprojects {
       repositories {
           google()
           mavenCentral()
       }
   }

Paso 4: Configurar el Archivo build.gradle de la Aplicación

Abre el archivo build.gradle a nivel de aplicación y realiza las siguientes configuraciones: a. Habilitar Jetpack Compose:

   android {
       ...
       buildFeatures {
           compose true
       }
       composeOptions {
           kotlinCompilerExtensionVersion '1.4.4' // Usa la versión más reciente disponible
       }
       kotlinOptions {
           jvmTarget = '1.8'
       }
   }

Paso 5: Agregar Dependencias de Compose:

   dependencies {
       implementation 'androidx.core:core-ktx:1.9.0'
       implementation 'androidx.compose.ui:ui:1.4.4' // Usa la versión más reciente
       implementation 'androidx.compose.material:material:1.4.4'
       implementation 'androidx.compose.ui:ui-tooling-preview:1.4.4'
       implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
       implementation 'androidx.activity:activity-compose:1.7.2'
       testImplementation 'junit:junit:4.13.2'
       androidTestImplementation 'androidx.test.ext:junit:1.1.5'
       androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
       androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.4.4'
       debugImplementation 'androidx.compose.ui:ui-tooling:1.4.4'
       debugImplementation 'androidx.compose.ui:ui-test-manifest:1.4.4'
   }

Paso 6: Crear una Aplicación Compose

Una vez configurado tu proyecto, puedes comenzar a crear componentes de UI con Jetpack Compose. Aquí hay un ejemplo simple de una actividad con Jetpack Compose:

   package com.example.mycomposeapp

   import android.os.Bundle
   import androidx.activity.ComponentActivity
   import androidx.activity.compose.setContent
   import androidx.compose.material.MaterialTheme
   import androidx.compose.material.Surface
   import androidx.compose.material.Text
   import androidx.compose.runtime.Composable
   import androidx.compose.ui.tooling.preview.Preview
   import com.example.mycomposeapp.ui.theme.MyComposeAppTheme

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               MyComposeAppTheme {
                   Surface(color = MaterialTheme.colors.background) {
                       Greeting("Android")
                   }
               }
           }
       }
   }

   @Composable
   fun Greeting(name: String) {
       Text(text = "Hello $name!")
   }

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       MyComposeAppTheme {
           Greeting("Android")
       }
   }

Para ver ejemplos de uso de Jetpack Compose, ponemos a tu disposición dos artículos relacionados:

Conclusión

Con estos sencillos pasos, habrás instalado y configurado Jetpack Compose en tu proyecto Android. Ahora puedes comenzar a aprovechar las ventajas de esta poderosa herramienta para crear interfaces de usuario modernas y eficientes. La comunidad de Android y los recursos oficiales de Google son excelentes lugares para obtener más ejemplos y aprender prácticas recomendadas mientras exploras todo lo que Jetpack Compose tiene para ofrecer.

Deja un comentario