Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Cómo usar Android Studio con Jetpack Compose

Jetpack Compose es un kit de herramientas moderno que se utiliza para compilar IU nativas de Android. Se basa en el modelo de programación declarativa, de modo que puedes describir cómo debería ser el aspecto de la IU, y Compose se ocupa del resto. Además, a medida que cambia el estado de la app, se actualiza automáticamente la IU. Dado que se compila a partir de Kotlin, es completamente interoperable con el lenguaje de programación Java y tiene acceso directo a todas las API de Android y Jetpack. Es compatible con el kit de herramientas de la IU existente, por lo que puedes mezclar y combinar vistas clásicas y nuevas, y está diseñado con Material Design y animaciones desde el principio.

Para disfrutar de la mejor experiencia de desarrollo con Jetpack Compose, tienes que descargar la versión preliminar canary más reciente de Android Studio. Esto se debe a que, cuando utilizas Android Studio para desarrollar una app con Jetpack Compose, puedes beneficiarte de las funciones del editor inteligente, como las plantillas para proyectos nuevos y la capacidad de obtener de inmediato una versión de vista previa de la IU de Compose.

Obtén la versión canary de Android Studio

Después de instalar Android Studio, sigue las instrucciones que se indican a continuación para probar una app de muestra de Jetpack Compose, crear un nuevo proyecto de app de Jetpack Compose o agregar compatibilidad con Jetpack Compose a un proyecto de app existente.

Cómo probar apps de muestra de Jetpack Compose

Después de comenzar a ejecutar la versión más reciente de Android Studio, la forma más rápida de experimentar con las capacidades de Jetpack Compose es probar las apps de muestra de Jetpack Compose, que están alojadas en GitHub. Para importar un proyecto de app de muestra desde Android Studio, sigue estos pasos:

  1. Si te encuentras en la ventana Welcome to Android Studio, selecciona Import an Android code sample. Si ya tienes abierto un proyecto de Android Studio, selecciona File > New > Import Sample de la barra de menú.
  2. En la barra de búsqueda que se encuentra cerca de la parte superior del asistente Browse Samples, escribe "compose".
  3. Selecciona una de las apps de muestra de Jetpack Compose en los resultados de la búsqueda y haz clic en Next.
  4. Cambia los valores de los campos Application name y Project location, o bien mantén los valores predeterminados.
  5. Haz clic en Finish.

Android Studio descargará la app de muestra en la ruta especificada y abrirá el proyecto. Luego, puedes inspeccionar MainActivity.kt en cada ejemplo para ver las API de Jetpack Compose, como la animación de encadenado, los componentes personalizados, el uso de la tipografía y la visualización de colores claros y oscuros en la versión de vista previa dentro del IDE.

Cómo crear una app nueva compatible con Jetpack Compose

Si quieres iniciar un proyecto nuevo que incluya compatibilidad con Jetpack Compose de forma predeterminada, Android Studio incluye plantillas para proyectos nuevos que te ayudarán a comenzar. Para crear un nuevo proyecto que incluya Jetpack Compose, sigue estos pasos:

  1. Si te encuentras en la ventana Welcome to Android Studio, haz clic en Start a new Android Studio project. Si ya tienes abierto un proyecto de Android Studio, selecciona File > New > New Project en la barra de menú.
  2. En la ventana Select a Project Template, elige Empty Compose Activity y haz clic en Next.
  3. En la ventana Configure your project, haz lo siguiente:
    1. Establece los campos Name, Package name y Save location como lo harías normalmente.
    2. Ten en cuenta que, en el menú desplegable Language, Kotlin es la única opción disponible porque Jetpack Compose funciona solo con clases escritas en Kotlin.
    3. En el menú desplegable Minimum API level, selecciona el nivel de API 21 o una versión superior.
  4. Haz clic en Finish.
  5. Verifica que el archivo build.gradle del proyecto esté configurado correctamente, según se describe en Cómo configurar Gradle.

Ya está todo listo para que comiences a desarrollar una app con Jetpack Compose. Para ayudarte a comenzar y conocer lo que puedes hacer con el kit de herramientas, sigue el instructivo de Jetpack Compose.

Cómo agregar Jetpack Compose a un proyecto existente

Si quieres usar Jetpack Compose en un proyecto existente, tendrás que configurar el proyecto con las opciones de configuración y las dependencias requeridas.

Cómo configurar Kotlin

Asegúrate de usar Kotlin 1.4.0 o una versión posterior en tu proyecto:

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.0'
}

Cómo configurar Gradle

Tienes que establecer el nivel mínimo de API de la app en 21 o más, y habilitar Jetpack Compose en el archivo build.gradle de la app, como se muestra a continuación. También debes configurar la versión para el complemento del compilador de Kotlin.

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
        useIR = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion "1.0.0-alpha01"
    }
}

Cómo agregar dependencias del kit de herramientas de Jetpack Compose

Incluye las dependencias del kit de herramientas de Jetpack Compose en el archivo build.gradle de la app, como se muestra a continuación:

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-alpha01'
    // Tooling support (Previews, etc.)
    implementation 'androidx.ui:ui-tooling:1.0.0-alpha01'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha01'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha01'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha01'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha01'

    // UI Tests
    androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha01'
}