Cómo usar Jetpack Compose en Wear OS

Compose para Wear OS es similar a Compose para dispositivos móviles. Sin embargo, existen algunas diferencias clave. En esta guía, se explican las similitudes y diferencias.

Compose para Wear OS forma parte de Android Jetpack y, al igual que las otras bibliotecas de Wear Jetpack que usas, te ayuda a escribir mejor código más rápido. Este es nuestro enfoque recomendado para compilar interfaces de usuario de apps de Wear OS.

Si nunca usaste el kit de herramientas de Jetpack Compose, consulta la ruta de aprendizaje de Compose. Muchos de los principios de desarrollo de Compose para dispositivos móviles se aplican a Compose para Wear OS. Consulta Por qué implementar Compose para obtener más información sobre las ventajas generales de un framework de IU declarativo. Si deseas obtener más información sobre Compose para Wear OS, consulta la ruta de aprendizaje de Compose para Wear OS y el repositorio de muestras de Wear OS en GitHub.

Compatibilidad

Compose para Wear OS funciona en relojes compatibles con Wear OS 3.0 (nivel de API 30) y relojes que usan Wear OS 2.0 (nivel de API 25 y versiones posteriores). El uso de la versión 1.0 de Compose para Wear OS requiere el uso de la versión 1.2 de las bibliotecas androidx.compose y Kotlin 1.7.0.

Plataformas

Compose para Wear OS facilita la compilación de apps en Wear OS. Para obtener más información, consulta la sección Apps. Usa nuestros componentes integrados para crear experiencias del usuario que cumplan con los lineamientos de Wear OS. Para obtener más información sobre los componentes, consulta nuestra guía de diseño.

Configuración

El uso de Jetpack Compose con Wear OS es similar a usar Jetpack Compose para cualquier otro proyecto de Android. La diferencia principal es que Jetpack Compose para Wear agrega bibliotecas específicas para Wear que facilitan la creación de interfaces de usuario personalizadas para relojes. En algunos casos, esos componentes comparten el mismo nombre que aquellos que no son para Wear, como androidx.wear.compose.material.Button y androidx.compose.material.Button.

Cómo crear una app nueva en Android Studio

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 > Import Sample de la barra de menú.
  2. Busca Compose for Wear y selecciona Compose for Wear OS Starter.
  3. En la ventana Configure your project, haz lo siguiente:
    1. Establece el nombre de la aplicación en Application name.
    2. Elige la ubicación del proyecto para tu muestra en Project location.
  4. Haz clic en Finish.
  5. Verifica que el archivo build.gradle del proyecto esté configurado de forma correcta, como se describe en Archivos de propiedades de Gradle.

Ya tienes todo listo para comenzar a desarrollar una app con Compose para Wear OS.

Dependencias del kit de herramientas de Jetpack Compose

Para usar Jetpack Compose con Wear OS, deberás incluir dependencias del kit de herramientas de Jetpack Compose en el archivo build.gradle de tu app, como se muestra en el siguiente fragmento:

Kotlin

dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.09.00")

    // General compose dependencies
    implementation(composeBom)
    implementation("androidx.activity:activity-compose:1.9.2")
    implementation("androidx.compose.ui:ui-tooling-preview:1.7.1")
    // Other compose dependencies

    // Compose for Wear OS Dependencies
    implementation("androidx.wear.compose:compose-material:1.4.0")

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation("androidx.wear.compose:compose-foundation:1.4.0")

    // Wear OS preview annotations
    implementation("androidx.wear.compose:compose-ui-tooling:1.4.0")

    // If you are using Compose Navigation, use the Wear OS version (NOT THE MOBILE VERSION).
    // Uncomment the line below and update the version number.
    // implementation("androidx.wear.compose:compose-navigation:1.4.0")

    // Testing
    testImplementation("junit:junit:4.13.2")
    androidTestImplementation("androidx.test.ext:junit:1.1.3")
    androidTestImplementation("androidx.test.espresso:espresso-core:3.4.0")
    androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.0.3")
    debugImplementation("androidx.compose.ui:ui-tooling:1.0.3")
}

Cuál es la diferencia

Usa la versión WearComposeMaterial de las APIs cuando sea posible. Si bien es técnicamente posible usar la versión de Compose Material para dispositivos móviles, no está optimizada para los requisitos únicos de Wear OS. Además, combinar Compose Material con Compose Material para Wear OS puede generar un comportamiento inesperado. Por ejemplo, como cada biblioteca tiene su propia clase MaterialTheme, existe la posibilidad de que los colores, la tipografía o las formas sean inconsistentes si se usan ambas versiones.

En la siguiente tabla, se describen las diferencias de dependencia entre la versión para Wear OS y para dispositivos móviles:

Dependencia de Wear OS

(androidx.wear.*)

Comparación Dependencia de dispositivos móviles

(androidx.*)

androidx.wear.compose:compose-material en lugar de androidx.compose.material:material
androidx.wear.compose:compose-navigation en lugar de androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation además de androidx.compose.foundation:foundation

Este es un archivo build.gradle de ejemplo:

// Example project in app/build.gradle file
dependencies {
    // Standard Compose dependencies...

    // Wear specific Compose Dependencies
    implementation "androidx.wear.compose:compose-material:$rootProject.wearVersion"
    implementation "androidx.wear.compose:compose-foundation:$rootProject.wearVersion"

    // For navigation within your app...
    implementation "androidx.wear.compose:compose-navigation:$rootProject.wearVersion"

    // Other dependencies...
}

Comentarios

Prueba Compose para Wear OS y usa la herramienta de seguimiento de errores para proporcionar sugerencias y comentarios.

Únete al canal #compose-wear en Kotlin Slack para conectarte con la comunidad de desarrolladores y contarnos tu experiencia.