Comienza a usar widgets

Requisitos previos y configuración

Antes de comenzar, asegúrate de que tu entorno cumpla con los siguientes requisitos.

Requisitos del tiempo de ejecución

Los Wear Widgets requieren la versión 1.6.1 o posterior del APK com.google.android.wearable.protolayout.renderer en el dispositivo de destino.

Obtén una versión compatible del renderizador de una de las siguientes maneras:

• Emulador de Wear OS 7: Usa la imagen del emulador de Wear OS 7. Las versiones inferiores a 7 no son adecuadas. Para obtener instrucciones de configuración, consulta Configura el emulador de Wear OS 7.
• Dispositivo físico: Usa un dispositivo Wear OS físico que reciba actualizaciones automáticas de Google Play Store o un dispositivo para desarrolladores en el que se haya accedido a Google Play Store.

Para verificar qué versión tienes instalada en tu dispositivo, usa el siguiente comando:

adb shell dumpsys package com.google.android.wearable.protolayout.renderer | \
  grep -m 1 versionName | \
  awk -F= '{print $2}'

Configuración de Gradle

Las bibliotecas de Wear Widget están disponibles en Google Maven.

1. Configura la versión del SDK

Asegúrate de que compileSdk y targetSdk estén configurados en 37 o un valor superior.

android {
    compileSdk = 37
    // ...
    defaultConfig {
        targetSdk = 37
        // ...
    }
}

2. Agrega dependencias

Incluye las siguientes dependencias en el archivo build.gradle.kts de tu app:

dependencies {
    // Core Wear Widget and Remote Compose libraries
    implementation "androidx.compose.remote:remote-creation-compose:1.0.0-alpha010"
    implementation "androidx.compose.remote:remote-core:1.0.0-alpha010"
    implementation "androidx.glance.wear:wear:1.0.0-alpha09"
    implementation "androidx.glance.wear:wear-core:1.0.0-alpha09"
    implementation "androidx.wear.compose.remote:remote-material3:1.0.0-alpha03"

    // Tooling for previews (optional, but recommended)
    implementation "androidx.compose.remote:remote-tooling-preview:1.0.0-alpha010"
    implementation "androidx.wear.compose:compose-ui-tooling:1.6.1"
    implementation "androidx.wear.tiles:tiles-tooling-preview:1.6.0"
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.0"
}

dependencies {
    // Core Wear Widget and Remote Compose libraries
    implementation("androidx.compose.remote:remote-creation-compose:1.0.0-alpha010")
    implementation("androidx.compose.remote:remote-core:1.0.0-alpha010")
    implementation("androidx.glance.wear:wear:1.0.0-alpha09")
    implementation("androidx.glance.wear:wear-core:1.0.0-alpha09")
    implementation("androidx.wear.compose.remote:remote-material3:1.0.0-alpha03")

    // Tooling for previews (optional, but recommended)
    implementation("androidx.compose.remote:remote-tooling-preview:1.0.0-alpha010")
    implementation("androidx.wear.compose:compose-ui-tooling:1.6.1")
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.6.0")
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.0")
}

Compila un widget de Hello World

Un Wear Widget consta de un servicio que extiende GlanceWearWidgetService y una clase de widget que extiende GlanceWearWidget. La IU se define con funciones @RemoteComposable. funciones @RemoteComposable.

Define el servicio

El servicio es el punto de entrada al que se vincula el sistema.

Para definir tu widget, crea un servicio que extienda GlanceWearWidgetService. Como esta biblioteca está en desarrollo activo, ciertas APIs están restringidas mientras se perfeccionan sus nombres y estructuras finales. El uso de la @SuppressLint("RestrictedApi") anotación le indica al compilador que estás usando intencionalmente estas funciones nuevas y en evolución. Este requisito es temporal y se quitará una vez que se finalicen las APIs en una versión estable futura.

@SuppressLint("RestrictedApi")
class HelloWidgetService : GlanceWearWidgetService() {
    override val widget: GlanceWearWidget = HelloWidget()
}
GetStarted.kt

Define el widget

La clase de widget proporciona los datos y el diseño del widget.

@SuppressLint("RestrictedApi")
class HelloWidget : GlanceWearWidget() {
    override suspend fun provideWidgetData(
        context: Context,
        params: WearWidgetParams,
    ): WearWidgetData {
        return WearWidgetDocument(background = WearWidgetBrush.color(Color.Blue.rc)) {
            HelloWidgetContent()
        }
    }
}
GetStarted.kt

Define el contenido

El contenido se compila con componentes de Remote Compose.

@SuppressLint("RestrictedApi")
@RemoteComposable @Composable
fun HelloWidgetContent() {
    RemoteBox(
        modifier = RemoteModifier.fillMaxSize(),
        contentAlignment = RemoteAlignment.Center,
    ) {
        RemoteText(
            text = "Hello World",
            color = Color.White.rc
        )
    }
}
GetStarted.kt

Crea el XML de configuración del widget

Crea un archivo nuevo res/xml/hello_widget_info.xml para definir las propiedades del widget y los tamaños compatibles. Para obtener una referencia completa de los atributos XML compatibles en la etiqueta <wearwidget-provider>, consulta la WearWidgetProviderInfo documentación.

<wearwidget-provider
    description="@string/hello_widget_description"
    icon="@mipmap/ic_launcher"
    label="@string/hello_widget_label"
    preferredType="SMALL">

    <container
        type="SMALL"
        previewImage="@drawable/widget_preview_small" />
    <container
        type="LARGE"
        previewImage="@drawable/widget_preview_large" />
</wearwidget-provider>
hello_widget_info.xml

Regístrate en AndroidManifest.xml

Registra el servicio en tu AndroidManifest.xml con los filtros de intents y los metadatos requeridos.

<service
    android:name=".snippets.widget.HelloWidgetService"
    android:exported="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/hello_widget_label"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">

    <intent-filter>
        <action android:name="androidx.glance.wear.action.BIND_WIDGET_PROVIDER" />
        <!-- If you already have a Tile, omit the following line. -->
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data
        android:name="androidx.glance.wear.widget.provider"
        android:resource="@xml/hello_widget_info" />

    <meta-data
        android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

Compile e implemente

Después de definir tu servicio y widget, puedes compilar tu proyecto e implementarlo en un dispositivo o emulador.

Compila e instala

Compila el proyecto e instala el APK de depuración en tu dispositivo conectado o emulador:

./gradlew :app:installDebug

Agrega una vista previa del widget

Después de instalar la app, usa adb para agregar el widget al carrusel de forma programática y mostrarlo en la pantalla.

Nota: Los Wear Widgets usan la infraestructura de mosaicos subyacente para la depuración. Como resultado, los comandos adb requieren las add-tile y show-tile operaciones.

1. Agrega el widget al carrusel:

adb shell am broadcast \
  -a com.google.android.wearable.app.DEBUG_SURFACE \
  --es operation add-tile \
  --ecn component <your_package_name>/.HelloWidgetService

2. Muestra el widget:

adb shell am broadcast \
  -a com.google.android.wearable.app.DEBUG_SYSUI \
  --es operation show-tile \
  --ei index 0

Las vistas previas de Android Studio también están disponibles para ayudarte a probar tus diseños en diferentes tamaños de pantalla.