Inicio rápido

Para obtener la mejor experiencia de desarrollo con Compose, descarga y, luego, 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.

Descargar Android Studio

Sigue estas instrucciones para 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 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

Primero, configura el compilador de Compose con el complemento de Gradle para el compilador de Compose.

Luego, agrega la siguiente definición al archivo build.gradle de tu app:

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Si estableces la marca compose en true dentro del bloque BuildFeatures de Android, se habilitará la funcionalidad de Compose en Android Studio.

Por último, agrega a tus dependencias la BoM de Compose y el subconjunto de dependencias de la biblioteca de Compose que necesitas del siguiente bloque:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.10.01')
    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.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // 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:2024.10.01")
    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.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // 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 ejemplo 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 APIs 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.