Widget'ları kullanmaya başlama

Ön koşullar ve kurulum

Başlamadan önce ortamınızın aşağıdaki koşulları karşıladığından emin olun.

Çalışma Zamanı Şartları

Wear Widget'ları, hedef cihazda com.google.android.wearable.protolayout.renderer APK'sının 1.6.1 veya sonraki bir sürümünü gerektirir.

Aşağıdaki yöntemlerden birini kullanarak oluşturucunun uyumlu bir sürümünü edinin:

• Wear OS 7 emülatörü: Wear OS 7 emülatör görüntüsünü kullanın. 7'den düşük sürümler uygun değildir. Kurulum talimatları için Wear OS 7 emülatörünü kurma başlıklı makaleyi inceleyin.
• Fiziksel Cihaz: Google Play Store'dan otomatik güncellemeler alan fiziksel bir Wear OS cihazı veya Google Play Store'da oturum açmış bir geliştirici cihazı kullanın.

Cihazınızda yüklü olan sürümü kontrol etmek için aşağıdaki komutu kullanın:

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

Gradle Yapılandırması

Wear Widget kitaplıkları Google Maven'da mevcuttur.

1. SDK sürümünü yapılandırma

compileSdk ve targetSdk değerlerinizin 37 veya daha yüksek bir değere ayarlandığından emin olun.

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

2. Bağımlılık Ekleme

Uygulamanızın build.gradle.kts dosyasına aşağıdaki bağımlılıkları ekleyin:

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

    // Tooling for previews (optional, but recommended)
    implementation "androidx.compose.remote:remote-tooling-preview:1.0.0-alpha11"
    implementation "androidx.wear.compose:compose-ui-tooling:1.6.2"
    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-alpha11")
    implementation("androidx.compose.remote:remote-core:1.0.0-alpha11")
    implementation("androidx.glance.wear:wear:1.0.0-alpha10")
    implementation("androidx.glance.wear:wear-core:1.0.0-alpha10")
    implementation("androidx.wear.compose.remote:remote-material3:1.0.0-alpha04")

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

Hello World widget'ı oluşturma

Wear widget'ı, GlanceWearWidgetService öğesini genişleten bir hizmet ve GlanceWearWidget öğesini genişleten bir widget sınıfından oluşur. Kullanıcı arayüzü, @RemoteComposable işlevleri kullanılarak tanımlanır.@RemoteComposable

Hizmeti tanımlama

Hizmet, sistemin bağlandığı giriş noktasıdır.

Widget'ınızı tanımlamak için GlanceWearWidgetService öğesini genişleten bir hizmet oluşturun.

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

Widget'ı tanımlama

Widget sınıfı, widget'ın verilerini ve düzenini sağlar.

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

İçeriği tanımlama

İçerik, Remote Compose bileşenleri kullanılarak oluşturulur.

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

Widget yapılandırma XML'sini oluşturma

Widget'ın özelliklerini ve desteklenen boyutlarını tanımlamak için yeni bir res/xml/hello_widget_info.xml dosyası oluşturun. <wearwidget-provider> etiketinde desteklenen XML özelliklerinin tam referansı için WearWidgetProviderInfo belgelerine bakı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

AndroidManifest.xml dosyasında kaydetme

Hizmeti, AndroidManifest.xml içinde gerekli amaç filtreleri ve meta verilerle kaydedin.

<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

Derleme ve Dağıtım

Hizmetinizi ve widget'ınızı tanımladıktan sonra projenizi oluşturup bir cihaza veya emülatöre dağıtabilirsiniz.

Derleme ve yükleme

Projeyi oluşturun ve hata ayıklama APK'sını bağlı cihazınıza veya emülatörünüze yükleyin:

./gradlew :app:installDebug

Widget'ınızı ekleme ve önizleme

Uygulama yüklendikten sonra, widget'ı programatik olarak karusellere eklemek ve ekranda göstermek için adb simgesini kullanın.

Not: Wear widget'ları, hata ayıklama amacıyla temel döşeme altyapısını kullanır. Bu nedenle, adb komutları için add-tile ve show-tile işlemleri gerekir.

1. Widget'ı banda ekleme:

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

2. Widget'ı gösterme:

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

Android Studio önizlemeleri, düzenlerinizi farklı ekran boyutlarında test etmenize yardımcı olmak için de kullanılabilir.