উইজেট দিয়ে শুরু করুন

পূর্বশর্ত এবং সেটআপ

শুরু করার আগে, নিশ্চিত করুন যে আপনার পরিবেশ নিম্নলিখিত শর্তগুলো পূরণ করে।

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

টার্গেট ডিভাইসে Wear Widgets ব্যবহারের জন্য com.google.android.wearable.protolayout.renderer APK-এর ভার্সন 1.6.1 বা তার উচ্চতর সংস্করণ প্রয়োজন।

নিম্নলিখিত উপায়গুলির মধ্যে যেকোনো একটি ব্যবহার করে রেন্ডারারটির একটি সামঞ্জস্যপূর্ণ সংস্করণ সংগ্রহ করুন:

  • Wear OS 7 এমুলেটর : Wear OS 7 এমুলেটর ইমেজটি ব্যবহার করুন। 7-এর চেয়ে নিম্নতর সংস্করণগুলো উপযুক্ত নয়। সেটআপ নির্দেশাবলীর জন্য, Wear OS 7 এমুলেটর সেট আপ করুন দেখুন।
  • ফিজিক্যাল ডিভাইস : এমন একটি ফিজিক্যাল Wear OS ডিভাইস ব্যবহার করুন যেটি গুগল প্লে স্টোর থেকে স্বয়ংক্রিয়ভাবে আপডেট পায়, অথবা গুগল প্লে স্টোরে সাইন ইন করা কোনো ডেভেলপার ডিভাইস ব্যবহার করুন।

আপনার ডিভাইসে কোন সংস্করণ ইনস্টল করা আছে তা পরীক্ষা করতে, নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

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

গ্রেডল কনফিগারেশন

Wear Widget লাইব্রেরিগুলো Google Maven- এ পাওয়া যায়।

১. এসডিকে সংস্করণ কনফিগার করুন

আপনার compileSdk এবং targetSdk মান ৩৭ বা তার বেশি সেট করা আছে কিনা তা নিশ্চিত করুন।

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-alpha18"
    implementation "androidx.compose.remote:remote-core:1.0.0-alpha18"
    implementation "androidx.glance.wear:wear:1.0.0-alpha17"
    implementation "androidx.glance.wear:wear-core:1.0.0-alpha17"
    implementation "androidx.wear.compose.remote:remote-material3:1.0.0-alpha10"

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

কোটলিন 

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

    // Tooling for previews (optional, but recommended)
    implementation("androidx.compose.remote:remote-tooling-preview:1.0.0-alpha18")
    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 Widget-এ GlanceWearWidgetService এক্সটেন্ড করা একটি সার্ভিস এবং GlanceWearWidget এক্সটেন্ড করা একটি উইজেট ক্লাস থাকে। আপনি @RemoteComposable ফাংশন ব্যবহার করে UI নির্ধারণ করেন।

পরিষেবাটি সংজ্ঞায়িত করুন

সার্ভিসটি হলো সেই প্রবেশপথ যার সাথে সিস্টেম সংযুক্ত হয়।

আপনার উইজেটটি সংজ্ঞায়িত করতে, 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()
        }
    }
}

বিষয়বস্তু সংজ্ঞায়িত করুন

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

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

অ্যান্ড্রয়েড স্টুডিওতে আপনার উইজেটের প্রিভিউ দেখুন

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

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

wear-tooling-preview লাইব্রেরিটি বিভিন্ন কন্টেইনার আকার এবং ডিভাইস কনফিগারেশনে আপনার লেআউটগুলি পরীক্ষা করার জন্য পূর্বনির্ধারিত PreviewParameterProvider স্যুট সরবরাহ করে:

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

অ্যান্ড্রয়েড স্টুডিওতে আপনার উইজেটের প্রিভিউ দেখতে, @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 অ্যাট্রিবিউটটি সিস্টেম উইজেট পিকার-এ প্রদর্শিত একটি ড্রয়েবল অ্যাসেটকে রেফারেন্স করে। সঠিক বাউন্ডস এবং ডেনসিটি সহ প্রিভিউ অ্যাসেট তৈরি করতে, RectangularAllWidgetPreviewParams সহ Android Studio Previews ব্যবহার করুন (যা ছোট এবং বড় উভয় কন্টেইনারের জন্য প্রিভিউ ভ্যারিয়েন্ট তৈরি করে) এবং একটি 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. অ্যান্ড্রয়েড স্টুডিওতে, প্রিভিউ কম্পোজেবলের জন্য ডিজাইন সারফেসটি খুলুন।
  2. প্রিভিউ উইন্ডোতে, রেন্ডার করা প্রিভিউটির উপর রাইট-ক্লিক করুন অথবা প্রিভিউ টুলবার ব্যবহার করে ‘কপি ইমেজ’ নির্বাচন করুন বা ছবিটি সেভ করুন। বিকল্পভাবে, কম্পোজ প্রিভিউগুলো এক্সট্র্যাক্ট করার জন্য 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 Widgets ডিবাগিংয়ের উদ্দেশ্যে অন্তর্নিহিত টাইল পরিকাঠামো ব্যবহার করে। ফলে, 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