উইজেট ব্যবহার করা শুরু করুন

পূর্বশর্ত ও সেট-আপ

শুরু করার আগে, আপনার এনভায়রনমেন্ট নিম্নলিখিত প্রয়োজনীয়তা পূরণ করছে কিনা তা নিশ্চিত করুন।

রানটাইম সংক্রান্ত প্রয়োজনীয়তা

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 উইজেট লাইব্রেরি Google Maven-এ উপলভ্য।

১. SDK ভার্সন কনফিগার করা

আপনার compileSdk ও targetSdk 37 বা তার বেশি সেট করা আছে কিনা তা নিশ্চিত করুন।

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

২. নির্ভরতা যোগ করুন

আপনার অ্যাপের build.gradle.kts ফাইলে নিম্নলিখিত ডিপেন্ডেন্সি যোগ করুন:

গ্রুভি 

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

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

কোটলিন 

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

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

Hello World উইজেট তৈরি করা

Wear উইজেটে একটি পরিষেবা এক্সটেন্ডিং GlanceWearWidgetService এবং একটি উইজেট ক্লাস এক্সটেন্ডিং GlanceWearWidget থাকে। আপনি @RemoteComposable ফাংশন ব্যবহার করে UI নির্ধারণ করেন।

পরিষেবা সম্পর্কে সংজ্ঞা দিন

পরিষেবা হল সেই এন্ট্রি পয়েন্ট যার সাথে সিস্টেম বাইন্ড করে।

আপনার উইজেটকে সংজ্ঞায়িত করতে, GlanceWearWidgetService এক্সটেন্ড করে এমন একটি পরিষেবা তৈরি করুন এবং উপযুক্ত GlanceWearWidget ক্লাসের সাথে পরিষেবাটি অ্যাসোসিয়েট করতে, @AssociateWithGlanceWearWidget দিয়ে এটিকে অ্যানোটেট করুন।

@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()
        }
    }
}

কন্টেন্ট সম্পর্কে সংজ্ঞা দিন

রিমোট কম্পোজ কম্পোনেন্ট ব্যবহার করে কন্টেন্ট তৈরি করা হয়।

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

Android Studio-তে আপনার উইজেটের প্রিভিউ দেখা

আপনি Android Studio-এর ডিজাইন প্যানেলে সরাসরি আপনার উইজেট লেআউটের প্রিভিউ দেখতে পারবেন। এর জন্য androidx.glance.wear:wear-tooling-preview ব্যবহার করুন।

পূর্বনির্ধারিত প্রিভিউ স্যুট

wear-tooling-preview লাইব্রেরি, বিভিন্ন কন্টেনার শেপ ও ডিভাইস কনফিগারেশন জুড়ে আপনার লেআউট পরীক্ষা করার জন্য আগে থেকে সংজ্ঞায়িত PreviewParameterProvider স্যুট প্রদান করে:

  • Squircle Suite (SquircleAllWidgetPreviewParams): বৃত্তাকার কোণবিশিষ্ট আয়তক্ষেত্র কন্টেনার।
  • রাউন্ড স্যুট (RoundAllWidgetPreviewParams): পিল-আকৃতির কন্টেনার।
  • আয়তাকার স্যুট (RectangularAllWidgetPreviewParams): নিরাপদ প্যাডিং সহ ক্রপ না করা আয়তাকার কন্টেনার। এই প্রিভিউ কনফিগারেশন ব্যবহার করে তৈরি করা ছবিগুলি উইজেট পিকারের (দেখুন প্রিভিউ ইমেজ অ্যাসেট তৈরি করুন) APK-এ এম্বেড করা প্রিভিউ ছবি হিসেবে ব্যবহার করার উপযুক্ত।

Android Studio-তে আপনার উইজেটের প্রিভিউ দেখতে, @WearWidgetPreviewব্যবহার করুন:

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

উইজেট কনফিগারেশন XML তৈরি করা

উইজেটের প্রপার্টি ও কাজ করে এমন সাইজ নির্ধারণ করতে, একটি নতুন ফাইল 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 প্রিভিউয়ের সাথে RectangularAllWidgetPreviewParams (যা ছোট ও বড়, উভয় কন্টেনারের জন্য প্রিভিউ ভেরিয়েন্ট তৈরি করে) ব্যবহার করুন এবং ৩২০ 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-তে, প্রিভিউ কম্পোজ করার উপযুক্ত আইটেমের জন্য ডিজাইন সারফেস খুলুন।
  2. প্রিভিউ উইন্ডোতে, রেন্ডার করা প্রিভিউতে মাউসের ডানদিকের বোতামে ক্লিক করুন অথবা প্রিভিউ টুলবার ব্যবহার করে ছবি কপি করুন বিকল্প বেছে নিন অথবা ছবিটি সেভ করুন। অথবা, Compose প্রিভিউ এক্সট্র্যাক্ট করতে CLI টুলিং বা অটোমেটেড স্ক্রিপ্ট ব্যবহার করুন।
  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 অপারেশন প্রয়োজন।

১. ক্যারোজেল উইজেট যোগ করুন:

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

২. উইজেট দেখুন:

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

প্রোগ্রাম্যাটিক উপায়ে উইজেট কন্টেন্ট আপডেট করা

আপনার অ্যাপের অন্তর্নিহিত ডেটা পরিবর্তন হলে (যেমন, ডেটা সিঙ্ক, পুশ বিজ্ঞপ্তি বা ব্যবহারকারীর অ্যাকশন পাওয়া), উইজেটের কন্টেন্ট রিফ্রেশ করার জন্য সিস্টেমকে বিজ্ঞপ্তি পাঠান।

আপনার উইজেটের সব অ্যাক্টিভ ইনস্ট্যান্সের জন্য আপডেট করার অনুরোধ করতে, আপনার উইজেট ক্লাসে triggerUpdateAll কল করুন:

// Request a content update for all active HelloWidget instances
HelloWidget().triggerUpdateAll(context)

সব অ্যাক্টিভ ইনস্ট্যান্স রিফ্রেশ না করেই নির্দিষ্ট কোনও উইজেট ইনস্ট্যান্স আপডেট করতে, টার্গেট ইনস্ট্যান্স আইডির সাথে triggerUpdate কল করুন।