Inicio rápido

Para obtener la mejor experiencia de desarrollo con Compose, descarga e instala Android Studio. Incluye muchas funciones de edición inteligentes, como plantillas de proyectos nuevas y la capacidad de obtener de inmediato una vista previa de la IU y las animaciones de Compose.

Descarga Android Studio

Sigue estas instrucciones a fin de crear un nuevo proyecto de app de Compose, configurar Compose para un proyecto de app existente o importar una app de ejemplo escrita en Compose.

Cómo crear una app nueva compatible con Compose

Si quieres iniciar un proyecto nuevo que incluya compatibilidad con Compose de forma predeterminada, Android Studio incluye plantillas para varios proyectos que te ayudarán a comenzar. Para crear un nuevo proyecto que tenga configurado correctamente Compose, haz lo siguiente:

  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. 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.
    2. En el menú desplegable Minimum API level, selecciona el nivel de API 21 o una versión posterior.
  4. Haz clic en Finish.

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 configurar Compose para una app existente

Para comenzar a usar Compose, primero debes agregar algunas configuraciones de compilación a tu proyecto. Agrega la siguiente definición al archivo build.gradle de tu app:

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Algunas cosas para tener en cuenta:

  • Si estableces la marca compose en true dentro del bloque BuildFeatures de Android, se habilitará la funcionalidad de Compose.
  • El control de versiones de la extensión del compilador de Kotlin definido en el bloque ComposeOptions está vinculado al control de versiones de Kotlin. Asegúrate de consultar el mapa de compatibilidad y elegir una versión de la biblioteca que coincida con la versión de Kotlin de tu proyecto.

Además, agrega a tus dependencias la BoM de Compose y el subconjunto de dependencias de la biblioteca de Compose que necesitas del bloque que aparece a continuación:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation 'androidx.compose.material:material-icons-core'
    // Optional - Add full set of material icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.5.1'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

}

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2022.10.00")
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.5.1")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Cómo probar apps de ejemplo de Jetpack Compose

La forma más rápida de experimentar con las capacidades de Jetpack Compose es probar las apps de ejemplo de Jetpack Compose 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 ejemplo 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 ejemplo 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.

Si quieres usar Jetpack Compose para Wear OS, consulta Cómo configurar Jetpack Compose en Wear OS.

Cómo usar la lista de materiales

La lista de materiales de Compose (BoM) te permite administrar todas las versiones de tu biblioteca de Compose especificando solo la versión de la BoM. La BoM en sí tiene vínculos a las versiones estables de las diferentes bibliotecas de Compose, de modo que funcionen bien en conjunto. Cuando usas la BoM en tu app, no necesitas agregar ninguna versión a las dependencias de la biblioteca de Compose. Cuando actualizas la versión de BoM, todas las bibliotecas que usas se actualizan automáticamente a sus versiones nuevas.

Para descubrir qué versiones de la biblioteca de Compose se asignan a una versión específica de la BoM, consulta la asignación de la versión de la BOM a la biblioteca.

¿Por qué no se incluye la biblioteca del compilador de Compose en la BoM?

La extensión del compilador de Kotlin para Compose (androidx.compose.compiler) no está vinculada a las versiones de la biblioteca de Compose. En su lugar, está vinculada a versiones del complemento del compilador de Kotlin y se lanza en una cadencia separada del resto de Compose, así que asegúrate de usar una versión que sea compatible con tu versión de Kotlin. Puedes encontrar la versión de Kotlin que se asigna a cada versión del complemento en el mapa de compatibilidad de Compose con Kotlin.

¿Cómo uso una versión de biblioteca diferente a la designada en la BoM?

En la sección de dependencias build.gradle, mantén la importación de la plataforma BoM. En la importación de dependencias de la biblioteca, especifica la versión deseada. Por ejemplo, aquí se muestra cómo declarar dependencias si deseas usar una versión alfa de Material 3, sin importar qué versión se designe en la BoM:

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Override Material Design 3 library version with a pre-release version
    implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

    // Import other Compose libraries without version numbers
    // ..
    implementation 'androidx.compose.foundation:foundation'
}

¿La BoM agrega todas las bibliotecas de Compose a mi app automáticamente?

No. Para agregar y usar bibliotecas de Compose en tu app, debes declarar cada biblioteca como una línea de dependencia separada en el archivo Gradle (generalmente app/build.gradle) de tu módulo (nivel de app).

Usar la BoM garantiza que las versiones de las bibliotecas de Compose en tu app sean compatibles, pero la BoM no agrega esas bibliotecas a tu app.

En el futuro, las versiones de las bibliotecas de Compose se controlarán de forma independiente, lo que significa que los números de versión comenzarán a aumentar a su propio ritmo. Las versiones estables más recientes de cada biblioteca se prueban y se garantiza que funcionen bien juntas. Sin embargo, encontrar las versiones estables más recientes de cada biblioteca puede ser difícil, y la BoM te ayuda a usarlas automáticamente.

¿Tengo la obligación de usar la BoM?

No. Aún puedes optar por agregar cada versión de dependencia manualmente. Sin embargo, recomendamos usar la BoM ya que facilitará el uso de todas las versiones estables más recientes al mismo tiempo.

¿La BoM funciona con catálogos de versiones?

Sí. Puedes incluir la BoM en el catálogo de versiones y omitir las otras versiones de la biblioteca de Compose:

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }

No te olvides de importar la BoM en el build.gradle de tu módulo:

dependencies {
    val composeBom = platform(libs.androidx.compose.bom)
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // import Compose dependencies as usual
}

¿Cómo informo un problema o envío comentarios sobre la BoM?

Puedes informar problemas en nuestra herramienta de seguimiento de errores.

Asignación de versión de la BoM a la biblioteca

Grupo de bibliotecas Versión en 2022.10.00 Versión en 2022.11.00
androidx.compose.animation:animation 1.3.0 1.3.1
androidx.compose.animation:animation-core 1.3.0 1.3.1
androidx.compose.animation:animation-graphics 1.3.0 1.3.1
androidx.compose.foundation:foundation 1.3.0 1.3.1
androidx.compose.foundation:foundation-layout 1.3.0 1.3.1
androidx.compose.material:material 1.3.0 1.3.1
androidx.compose.material:material-icons-core 1.3.0 1.3.1
androidx.compose.material:material-icons-extended 1.3.0 1.3.1
androidx.compose.material:material-ripple 1.3.0 1.3.1
androidx.compose.material3:material3 1.0.0 1.0.1
androidx.compose.material3:material3-window-size-class 1.0.0 1.0.1
androidx.compose.runtime:runtime 1.3.0 1.3.1
androidx.compose.runtime:runtime-livedata 1.3.0 1.3.1
androidx.compose.runtime:runtime-rxjava2 1.3.0 1.3.1
androidx.compose.runtime:runtime-rxjava3 1.3.0 1.3.1
androidx.compose.runtime:runtime-saveable 1.3.0 1.3.1
androidx.compose.ui:ui 1.3.0 1.3.1
androidx.compose.ui:ui-geometry 1.3.0 1.3.1
androidx.compose.ui:ui-graphics 1.3.0 1.3.1
androidx.compose.ui:ui-test 1.3.0 1.3.1
androidx.compose.ui:ui-test-junit4 1.3.0 1.3.1
androidx.compose.ui:ui-test-manifest 1.3.0 1.3.1
androidx.compose.ui:ui-text 1.3.0 1.3.1
androidx.compose.ui:ui-text-google-fonts 1.3.0 1.3.1
androidx.compose.ui:ui-tooling 1.3.0 1.3.1
androidx.compose.ui:ui-tooling-data 1.3.0 1.3.1
androidx.compose.ui:ui-tooling-preview 1.3.0 1.3.1
androidx.compose.ui:ui-unit 1.3.0 1.3.1
androidx.compose.ui:ui-util 1.3.0 1.3.1
androidx.compose.ui:ui-viewbinding 1.3.0 1.3.1