Cómo usar Android Studio con Jetpack Compose

Para obtener la mejor experiencia de desarrollo con Jetpack Compose, debes descargar Android Studio Arctic Fox. Esto se debe a que, cuando utilizas Android Studio a fin de 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 Android Studio Arctic Fox.

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 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:

Groovy

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

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}

Kotlin

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

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.1")
}

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. Para obtener más información, consulta Cómo agregar Jetpack Compose a tu app.