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

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

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

रनटाइम की ज़रूरी शर्तें

Wear विजेट के लिए, टारगेट डिवाइस पर 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 Widget लाइब्रेरी, 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-alpha19"
    implementation "androidx.compose.remote:remote-core:1.0.0-alpha19"
    implementation "androidx.glance.wear:wear:1.0.0-alpha18"
    implementation "androidx.glance.wear:wear-core:1.0.0-alpha18"
    implementation "androidx.wear.compose.remote:remote-material3:1.0.0-alpha11"

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

Kotlin

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

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

'हैलो वर्ल्ड' विजेट बनाना

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

सेवा के बारे में जानकारी देना

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

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

@AssociateWithGlanceWearWidget(HelloWidget::class)
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,
        )
    }
}

Android Studio में अपने विजेट की झलक देखना

androidx.glance.wear:wear-tooling-preview का इस्तेमाल करके, Android Studio के Design पैनल में जाकर, अपने विजेट लेआउट की झलक देखी जा सकती है.

पहले से तय की गई झलक देखने की सुविधा

wear-tooling-preview लाइब्रेरी में, पहले से तय की गई PreviewParameterProvider सुइट उपलब्ध हैं. इनकी मदद से, अलग-अलग कंटेनर शेप और डिवाइस कॉन्फ़िगरेशन में अपने लेआउट की जांच की जा सकती है:

  • स्क्विरकल सुइट (SquircleAllWidgetPreviewParams): गोलाकार कोनों वाले आयत कंटेनर.
  • गोल सुइट (RoundAllWidgetPreviewParams): पिल के आकार वाले कंटेनर.
  • रेक्टैंगुलर सुइट (RectangularAllWidgetPreviewParams): बिना काटे गए रेक्टैंगुलर कंटेनर, जिनमें सेफ़ पैडिंग होती है. इस प्रीव्यू कॉन्फ़िगरेशन से जनरेट की गई इमेज, एपीके में एम्बेड की गई प्रीव्यू इमेज के तौर पर इस्तेमाल की जा सकती हैं. इनका इस्तेमाल विजेट पिकर करता है. इसके बारे में जानने के लिए, प्रीव्यू इमेज ऐसेट जनरेट करना लेख पढ़ें.

Android Studio में अपने विजेट की झलक देखने के लिए, @WearWidgetPreview का इस्तेमाल करें:

@Preview
@Composable
fun HelloWidgetPreview(
    @PreviewParameter(SquircleAllWidgetPreviewParams::class) params: WearWidgetParams,
) {
    WearWidgetPreview(
        widget = HelloWidget(),
        params = params,
    )
}

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

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

झलक दिखाने वाली इमेज ऐसेट जनरेट करना

<container> एलिमेंट के previewImage एट्रिब्यूट में, ड्रॉएबल ऐसेट का रेफ़रंस होता है. यह ऐसेट, सिस्टम के विजेट पिकर में दिखती है. सही सीमाओं और घनत्व वाली झलक ऐसेट जनरेट करने के लिए, Android Studio Previews का इस्तेमाल करें. साथ ही, RectangularAllWidgetPreviewParams का इस्तेमाल करें. इससे छोटे और बड़े, दोनों कंटेनर के लिए झलक के वैरिएंट जनरेट होते हैं. इसके अलावा, स्मार्टवॉच के डिसप्ले की डेंसिटी 320 DPI पर सेट करें:

@Preview(
    name = "Widget Preview Asset",
    device = "spec:width=1000dp,height=1000dp,dpi=320",
)
@Composable
fun HelloWidgetCatalogPreview(
    @PreviewParameter(RectangularAllWidgetPreviewParams::class) params: WearWidgetParams,
) {
    WearWidgetPreview(
        widget = HelloWidget(),
        params = params,
    )
}

रेंडर की गई झलक वाली इमेज निकालने के लिए, यह तरीका अपनाएं:

  1. Android Studio में, प्रीव्यू कंपोज़ेबल के लिए Design सरफेस खोलें.
  2. झलक दिखाने वाली विंडो में, रेंडर की गई झलक पर राइट क्लिक करें. इसके अलावा, झलक दिखाने वाले टूलबार का इस्तेमाल करके, इमेज कॉपी करें को चुनें या इमेज सेव करें. इसके अलावा, Compose की झलकें निकालने के लिए, सीएलआई टूलिंग या अपने-आप काम करने वाली स्क्रिप्ट का इस्तेमाल करें.
  3. छोटी और बड़ी इमेज फ़ाइलों को अपने ऐप्लिकेशन की res/drawable-nodpi/ डायरेक्ट्री में सेव करें. जैसे, res/drawable-nodpi/widget_preview_small.png और res/drawable-nodpi/widget_preview_large.png.

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 विजेट, डीबग करने के लिए टाइल के बुनियादी ढांचे का इस्तेमाल करते हैं. इसलिए, 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