विजेट का इस्तेमाल शुरू करना

ज़रूरी शर्तें और सेटअप

शुरू करने से पहले, पक्का करें कि आपका एनवायरमेंट इन ज़रूरी शर्तों को पूरा करता हो.

रनटाइम से जुड़ी ज़रूरी शर्तें

Wear OS के विजेट के लिए, टारगेट डिवाइस पर com.google.android.wearable.protolayout.renderer APK का वर्शन 1.6.1 या इसके बाद का होना ज़रूरी है.

रेंडरर का ऐसा वर्शन पाएं जो आपके डिवाइस के साथ काम करता हो. इसके लिए, इनमें से कोई एक तरीका अपनाएं:

  • Wear OS 7 का एम्युलेटर: Wear OS 7 के एम्युलेटर की इमेज का इस्तेमाल करें. इससे पहले के वर्शन काम नहीं करेंगे. सेटअप के निर्देशों के लिए, Wear OS 7 का एम्युलेटर सेट अप करना लेख पढ़ें.
  • फ़िज़िकल डिवाइस: Wear OS का ऐसा फ़िज़िकल डिवाइस इस्तेमाल करें जिसे Google Play Store से अपने-आप अपडेट मिलते हैं. इसके अलावा, Google Play Store में साइन इन किया गया डेवलपर डिवाइस भी इस्तेमाल किया जा सकता है.

यह देखने के लिए कि आपके डिवाइस पर कौनसा वर्शन इंस्टॉल है, यह कमांड इस्तेमाल करें:

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

Gradle कॉन्फ़िगरेशन

Wear OS के विजेट की लाइब्रेरी, Google Maven पर उपलब्ध हैं.

1. SDK टूल का वर्शन कॉन्फ़िगर करना

पक्का करें कि compileSdk और targetSdk को 37 या इससे ज़्यादा पर सेट किया गया हो.

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

2. डिपेंडेंसी जोड़ना

अपने ऐप्लिकेशन की build.gradle.kts फ़ाइल में, ये डिपेंडेंसी शामिल करें:

Groovy

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

    // Tooling for previews (optional, but recommended)
    implementation "androidx.compose.remote:remote-tooling-preview:1.0.0-alpha12"
    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"
}

Kotlin

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

    // Tooling for previews (optional, but recommended)
    implementation("androidx.compose.remote:remote-tooling-preview:1.0.0-alpha12")
    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 विजेट बनाना

Wear OS के विजेट में, सेवा शामिल होती है जो GlanceWearWidgetService को बढ़ाती है और विजेट क्लास जो GlanceWearWidget को बढ़ाती है. यूज़र इंटरफ़ेस (यूआई) को @RemoteComposable फ़ंक्शन का इस्तेमाल करके तय किया जाता है. @RemoteComposable फ़ंक्शन.

सेवा तय करना

सेवा, एंट्री पॉइंट होती है जिससे सिस्टम जुड़ता है.

अपने विजेट को तय करने के लिए, GlanceWearWidgetService को बढ़ाने वाली सेवा बनाएं.

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

विजेट तय करना

विजेट क्लास, विजेट के लिए डेटा और लेआउट उपलब्ध कराती है.

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

कॉन्टेंट तय करना

कॉन्टेंट, Remote Compose कॉम्पोनेंट का इस्तेमाल करके बनाया जाता है.

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

विजेट कॉन्फ़िगरेशन एक्सएमएल बनाना

विजेट की प्रॉपर्टी और काम करने वाले साइज़ तय करने के लिए, नई फ़ाइल res/xml/hello_widget_info.xml बनाएं. <wearwidget-provider> टैग में काम करने वाले एक्सएमएल एट्रिब्यूट के बारे में पूरी जानकारी पाने के लिए, WearWidgetProviderInfo का दस्तावेज़ देखें.

<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>

AndroidManifest.xml में रजिस्टर करना

ज़रूरी इंटेंट फ़िल्टर और मेटाडेटा के साथ, अपनी AndroidManifest.xml में सेवा रजिस्टर करें.

<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>

बनाना और डिप्लॉय करना

अपनी सेवा और विजेट तय करने के बाद, अपने प्रोजेक्ट को बनाया जा सकता है और उसे किसी डिवाइस या एम्युलेटर पर डिप्लॉय किया जा सकता है.

बनाना और इंस्टॉल करना

प्रोजेक्ट बनाएं और कनेक्ट किए गए डिवाइस या एम्युलेटर पर डीबग APK इंस्टॉल करें:

./gradlew :app:installDebug

अपना विजेट जोड़ना और उसका प्रीव्यू देखना

ऐप्लिकेशन इंस्टॉल हो जाने के बाद, adb का इस्तेमाल करके, विजेट को कैरसेल में प्रोग्राम के ज़रिए जोड़ें और उसे स्क्रीन पर दिखाएं.

ध्यान दें: Wear OS के विजेट, डीबग करने के लिए टाइल के बुनियादी ढांचे का इस्तेमाल करते हैं. इसलिए, adb कमांड के लिए add-tile और show-tile कार्रवाइयों की ज़रूरत होती है.

1. विजेट को कैरसेल में जोड़ना:

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

2. विजेट दिखाना:

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

Android Studio में प्रीव्यू की सुविधा भी उपलब्ध है. इससे अलग-अलग स्क्रीन साइज़ पर अपने लेआउट की जांच की जा सकती है.