টাইল ব্যবহার করা শুরু করা

Wear OS ভার্সনের জন্য টাইল ২.৫ ৩

---

আপনার অ্যাপ থেকে টাইল প্রদান করা শুরু করতে, আপনার অ্যাপের build.gradle ফাইলে নিম্নলিখিত ডিপেন্ডেন্সি অন্তর্ভুক্ত করুন।

গ্রোভি

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.6.2"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.4.2"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.4.2"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.4.2"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.2"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.6.2"
}

কোটলিন

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.6.2")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.4.2")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.4.2")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.4.2")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.2")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.6.2")
}

,

গ্রোভি

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.6.2"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.4.2"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.4.2"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.4.2"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.2"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.6.2"
}

কোটলিন

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.6.2")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.4.2")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.4.2")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.4.2")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.2")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.6.2")
}

গুরুত্বপূর্ণ: Material 3 টাইল তৈরি করার সময়, মূল TileService ক্লাস বা Horologist-এর SuspendingTileService-এর পরিবর্তে সবসময় Material3TileService এক্সটেন্ড করুন। Material3TileService-এ বিল্ট-ইন কোরুটিন সাপোর্ট, অটোমেটিক MaterialScope থিমিং এবং সিঙ্গেল-কল রিসোর্স ম্যানেজমেন্ট সহ একটি ওপিনিয়নেটেড, Kotlin-ফার্স্ট API প্রদান করে।

মূল ধারণা

Android অ্যাপের মতো টাইল তৈরি করা হয় না এবং বিভিন্ন ধারণা ব্যবহার করে:

• লেআউট টেমপ্লেট: ডিসপ্লেতে ভিজ্যুয়াল এলিমেন্টের সামগ্রিক বিন্যাস নির্ধারণ করুন। এটি primaryLayout() ফাংশনের মাধ্যমে করা হয়।
• লেআউট এলিমেন্ট: কোনও একটি গ্রাফিক্যাল এলিমেন্ট, যেমন বোতাম বা কার্ড অথবা কলাম, buttonGroup বা এই ধরনের কোনও এলিমেন্ট ব্যবহার করে একসাথে গ্রুপ করা একাধিক এলিমেন্টকে বোঝায়। এগুলি লেআউট টেমপ্লেট-এর মধ্যে এম্বেড করা থাকে।

• রিসোর্স: ResourceBuilders.Resources অবজেক্টে Android রিসোর্সের (ছবি) কী-ভ্যালু পেয়ারের একটি ম্যাপ থাকে যা লেআউট রেন্ডার করার জন্য প্রয়োজন হয় এবং একটি ভার্সন থাকে।
• টাইমলাইন: TimelineBuilders.Timeline অবজেক্ট হল এক বা একাধিক লেআউট অবজেক্টের তালিকা। রেন্ডারার কখন একটি লেআউট অবজেক্ট থেকে অন্যটিতে পরিবর্তন করবে তা নির্দেশ করার জন্য আপনি বিভিন্ন মেকানিজম এবং এক্সপ্রেশন প্রদান করতে পারেন, যেমন একটি নির্দিষ্ট সময়ে একটি লেআউট দেখানো বন্ধ করা।
• স্টেট: StateBuilders.State ধরনের ডেটা স্ট্রাকচার যা টাইল ও অ্যাপের মধ্যে পাস করা হয়, যাতে দুটি কম্পোনেন্ট একে অপরের সাথে যোগাযোগ করতে পারে। যেমন, টাইল-এ কোনও বোতাম ট্যাপ করা হলে, স্ট্যাটাস বোতামের আইডি হোল্ড করে। এছাড়াও, আপনি ম্যাপ ব্যবহার করে ডেটার ধরন পরিবর্তন করতে পারবেন।
• টাইল: একটি TileBuilders.Tile অবজেক্ট যা একটি টাইলকে উপস্থাপন করে, যার মধ্যে একটি টাইমলাইন, একটি রিসোর্স ভার্সন আইডি, ফ্রেশনেস ইন্টারভাল এবং স্টেট থাকে।
• Protolayout: এই শব্দটি বিভিন্ন টাইল-সম্পর্কিত ক্লাসের নামে দেখা যায় এবং এটি Wear OS Protolayout লাইব্রেরিকে বোঝায়, যা হল একটি গ্রাফিক্স লাইব্রেরি এবং বিভিন্ন Wear OS সারফেস জুড়ে ব্যবহার করা হয়।

টাইল তৈরি করুন

Material3TileService ব্যবহার করুন (সাজেস্ট করা হয়েছে)

Material 3 টাইল (androidx.wear.tiles:tiles:1.6.0 এবং তার পরবর্তী ভার্সন) তৈরি করার সময়, সবসময় Material3TileService এক্সটেন্ড করুন, লোয়ার-লেভেল TileService ক্লাস নয়। Material3TileService একটি মতামত-ভিত্তিক, Kotlin-ফার্স্ট আর্কিটেকচার প্রদান করে যা টাইল ডেভেলপমেন্টকে সহজ করে:

• বিল্ট-ইন Kotlin coroutines: ListenableFuture ব্যবহার করা এবং onTileRequest() ওভাররাইড করার পরিবর্তে MaterialScope.tileResponse(requestParams: TileRequest): Tile একটিমাত্র সাসপেন্ডিং ফাংশন ইমপ্লিমেন্ট করুন।
• প্রি-কনফিগার করা MaterialScope: tileResponse(), MaterialScope-কে রিসিভার হিসেবে নিয়ে রান করে (কনস্ট্রাক্টর প্যারামিটারের মাধ্যমে কনফিগার করা হয়, যেমন allowDynamicTheme এবং defaultColorScheme), তাই আপনাকে অপ্রয়োজনীয় materialScope() কলে আপনার লেআউট র‍্যাপ করতে হবে না।
• সিঙ্গেল-কল রিসোর্স রেজিস্ট্রেশন: ইনলাইন ইমেজ রিসোর্স অটোমেটিক রেজিস্টার করতে এবং সিঙ্গেল সিস্টেম বাইন্ডার কলে টাইল লে-আউট ও রিসোর্স, দুটিই ফেরত দিতে ProtoLayoutScope অন্তর্ভুক্ত করে। যেহেতু Material3TileService অটোমেটিক রিসোর্স ম্যানেজ করে (final onTileResourcesRequest()), তাই onTileResourcesRequest() ওভাররাইড করবেন না।

class MyTileService : Material3TileService() {

    override suspend fun MaterialScope.tileResponse(requestParams: TileRequest): Tile =
        tile(
            timeline =
            Timeline.fromLayoutElement(
                primaryLayout(
                    mainSlot = {
                        text("Hello, World!".layoutString, typography = BODY_LARGE)
                    }
                )
            )
        )
}
Tile.kt

অন্তর্নিহিত TileService আর্কিটেকচার

Material3TileService মূল TileService ক্লাসের উপরে তৈরি করা হয়, যা এই গাইডের বাকি উদাহরণগুলি লো-লেভেল ধারণা ব্যাখ্যা করার জন্য ব্যবহার করে।

আপনার অ্যাপ থেকে টাইল প্রদান করতে, TileService ধরনের পরিষেবা প্রয়োগ করুন এবং আপনার ম্যানিফেস্টে এটি রেজিস্টার করুন। এর থেকে, সিস্টেম onTileRequest()-এ কল করার সময় প্রয়োজনীয় টাইল এবং onTileResourcesRequest()-এ কল করার সময় রিসোর্স-এর অনুরোধ করে।

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        materialScope(this, requestParams.deviceConfiguration) {
                            primaryLayout(
                                mainSlot = {
                                    text("Hello, World!".layoutString, typography = BODY_LARGE)
                                }
                            )
                        }
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(Resources.Builder().setVersion(RESOURCES_VERSION).build())
}
Tile.kt

গুরুত্বপূর্ণ: TileService হল একটি বাউন্ড পরিষেবা। আপনি যদি বাউন্ড-সার্ভিস লাইফসাইকেল মেথড-এর কোনও একটি ওভাররাইড করেন, তাহলে TileService-নির্দিষ্ট লাইফসাইকেল মেথডের সাথে অনিচ্ছাকৃত ইন্টার‍্যাকশন এড়ানোর ব্যাপারে যত্নবান হন, যেগুলি আলাদা অ্যাসিঙ্ক্রোনাস থ্রেডে কল করা হয়।

এরপর, আপনার AndroidManifest.xml ফাইলের <application> ট্যাগের মধ্যে একটি পরিষেবা যোগ করুন।

<service
    android:name=".snippets.m3.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

অনুমতি ও ইনটেন্ট ফিল্টার এই পরিষেবাকে টাইল প্রদানকারী হিসেবে রেজিস্টার করে।

ব্যবহারকারী তার ফোন বা ঘড়িতে টাইল কনফিগার করার সময় আইকন, লেবেল, বিবরণ ও প্রিভিউ রিসোর্স দেখানো হয়। মনে রাখবেন যে প্রিভিউ রিসোর্স Android-এর সব স্ট্যান্ডার্ড রিসোর্স কোয়ালিফায়ার সাপোর্ট করে, তাই স্ক্রিনের সাইজ ও ডিভাইসের ভাষার মতো বিষয়ের উপর ভিত্তি করে প্রিভিউ আলাদা হতে পারে। অতিরিক্ত সাজেশন পেতে প্রিভিউ চেকলিস্ট দেখুন।

আপনার অ্যাপ ডিপ্লয় করুন এবং টাইল ক্যারোজেলে টাইল যোগ করুন (এছাড়াও টাইল প্রিভিউ করার জন্য আরও ডেভেলপার-ফ্রেন্ডলি উপায় আছে, তবে এখনকার জন্য শুধু ম্যানুয়ালি এটি করুন)।

ছবি ১. "হ্যালো ওয়ার্ল্ড" টাইল।

সম্পূর্ণ উদাহরণের জন্য, GitHub-এ কোড স্যাম্পেল অথবা কোডল্যাব দেখুন।

টাইলসের জন্য UI তৈরি করুন

Kotlin-এর টাইপ-সেফ বিল্ডার প্যাটার্ন দ্বারা পরিচালিত একটি স্ট্রাকচার্ড অ্যাপ্রোচ ব্যবহার করে Material 3 Expressive UI এলিমেন্ট তৈরি করা হয়।

মনে রাখবেন: এই গাইডে "M3" সংক্ষিপ্ত রূপটি "Material 3", "Material Design 3" এবং "Material You" শব্দগুলির পরিবর্তে ব্যবহার করা হয়েছে। "M2.5" সংক্ষিপ্ত রূপটি "Material 2.5" এবং "Material Design 2.5" শব্দ দুটির পরিবর্তে ব্যবহার করা হয়।

লেআউট

কার্যকরী ও রেসপন্সিভ টাইল লেআউট তৈরির নেপথ্যে থাকা ডিজাইন সংক্রান্ত নীতির ব্যাপারে নির্দেশিকা পেতে, টাইল সংক্রান্ত সাধারণ লেআউট দেখুন।

আপনার লেআউট তৈরি করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

1. মেটেরিয়াল ডিজাইন স্কোপ শুরু করুন: materialScope() ফাংশন কল করুন, প্রয়োজনীয় context ও deviceConfiguration প্রদান করুন। আপনি allowDynamicTheme এবং defaultColorScheme-এর মতো ঐচ্ছিক প্যারামিটার অন্তর্ভুক্ত করতে পারেন। allowDynamicTheme সাধারণত true হয় এবং defaultColorScheme, ColorScheme-কে দেখায় যা ডায়নামিক কালার উপলভ্য না থাকলে—যেমন ব্যবহারকারী ফিচারটি বন্ধ করে দিলে—অথবা ডিভাইসে কাজ না করলে অথবা allowDynamicTheme, false হলে ব্যবহার করা হয়)। কাস্টম TileService-এ backgroundImage()-এর মতো ImageResource API ব্যবহার করার সময়, পরিবর্তে materialScopeWithResources() কল করুন।

2. স্কোপের মধ্যে আপনার UI তৈরি করুন: প্রদত্ত টাইল লেআউটের জন্য সমস্ত UI কম্পোনেন্ট অবশ্যই একটি একক টপ-লেভেল materialScope() কলের ল্যাম্বডার মধ্যে সংজ্ঞায়িত করা উচিত। এইসব কম্পোনেন্ট ফাংশন, যেমন primaryLayout() এবং textEdgeButton(), হল MaterialScope-এর এক্সটেনশন ফাংশন এবং শুধুমাত্র এই রিসিভার স্কোপে কল করা হলে উপলভ্য হয়।

   materialScope(
       context = context,
       deviceConfiguration =
       requestParams.deviceConfiguration, // requestParams is passed to onTileRequest
       defaultColorScheme = myFallbackColorScheme
   ) {
       // inside the MaterialScope, you can call functions like primaryLayout()
       primaryLayout(
           titleSlot = { text(text = "Title".layoutString) },
           mainSlot = { text(text = "Main Content".layoutString) },
           bottomSlot = {
               textEdgeButton(
                   labelContent = { text("Action".layoutString) },
                   onClick = clickable()
               )
           }
       )
   }
   GetStarted.kt

স্লট

M3-তে, টাইলস লেআউট কম্পোজ-অনুপ্রাণিত পদ্ধতি ব্যবহার করে যা তিনটি স্বতন্ত্র স্লট ব্যবহার করে। উপর থেকে নিচে পর্যন্ত এগুলি হল:

1. titleSlot, সাধারণত প্রাথমিক শিরোনাম বা হেডারের জন্য।
2. মূল কন্টেন্টের জন্য mainSlot।
3. bottomSlot, প্রায়ই অ্যাকশন বা অতিরিক্ত তথ্যের জন্য ব্যবহার করা হয়। এছাড়াও, এখানেই এজ বোতাম দেখা যায়।

ছবি ২. titleSlot, mainSlot, এবং bottomSlot.

প্রতিটি স্লটের কন্টেন্ট নিচে উল্লেখ করা হল:

• titleSlot (ঐচ্ছিক): সাধারণত text()-এর মাধ্যমে তৈরি করা কয়েকটি শব্দ।
• mainSlot (বাধ্যতামূলক): কম্পোনেন্টগুলি সারি, কলাম এবং বোতাম গ্রুপ-এর মতো স্ট্রাকচারে সাজানো থাকে। এইসব কম্পোনেন্ট একে অপরের মধ্যে বারবার এম্বেড করা যেতে পারে; যেমন, একটি কলামে সারি থাকতে পারে।
• bottomSlot (ঐচ্ছিক): সাধারণত এজ-হাগিং বোতাম বা টেক্সট লেবেল দিয়ে পূরণ করা হয়।

টাইল স্ক্রল করা যায় না বলে, পেজিং, স্ক্রলিং বা কন্টেন্টের দীর্ঘ তালিকা ম্যানেজ করার জন্য কোনও কম্পোনেন্ট নেই। ফন্ট সাইজ বাড়লে বা অনুবাদের কারণে টেক্সট বড় হয়ে গেলে, কন্টেন্ট যাতে দেখা যায় সেই বিষয়ে খেয়াল রাখুন।

UI কম্পোনেন্ট

protolayout-material3 লাইব্রেরি Material 3 Expressive স্পেসিফিকেশন এবং ইউজার ইন্টারফেস সংক্রান্ত সাজেশন অনুযায়ী ডিজাইন করা প্রচুর কম্পোনেন্ট প্রদান করে।

বোতাম

বোতামগুলি মূলত অ্যাকশন-ভিত্তিক। নির্দিষ্ট অ্যাকশন ট্রিগার করার জন্য এগুলি ব্যবহার করা হয়। প্রতিটি বোতামের কন্টেন্ট, যেমন আইকন বা ছোট টেক্সট, অ্যাকশনকে শনাক্ত করে।

• textButton(): (সংক্ষিপ্ত) টেক্সট কন্টেন্টের জন্য একটি স্লট সহ বোতাম
• iconButton(): আইকন দেখানোর জন্য একটি স্লট সহ বোতাম
• avatarButton(): পিল-আকৃতির অবতার বোতাম যা উল্লম্বভাবে স্ট্যাক করা লেবেল এবং সেকেন্ডারি লেবেল এবং এর পাশে একটি ছবি (অবতার) উপস্থাপন করে কন্টেন্ট নেওয়ার জন্য তিনটি পর্যন্ত স্লট অফার করে
• imageButton(): ক্লিক করা যায় এমন ছবির বোতাম যা অতিরিক্ত স্লট অফার করে না, শুধুমাত্র ছবি (যেমন ব্যাকগ্রাউন্ড হিসেবে backgroundImage)
• compactButton(): কম্প্যাক্ট বোতাম যা অনুভূমিকভাবে স্ট্যাক করা কন্টেন্ট নেওয়ার জন্য দুটি স্লট অফার করে যা একটি আইকন এবং তার পাশে টেক্সট দেখায়
• button(): পিল আকৃতির বোতাম যা উল্লম্বভাবে স্ট্যাক করা লেবেল এবং সেকেন্ডারি লেবেল এবং এর পাশে একটি আইকন উপস্থাপন করে এমন কন্টেন্ট নেওয়ার জন্য তিনটি পর্যন্ত স্লট অফার করে

এজ বোতাম

এজ বোতাম হল একটি বিশেষ, সম্পূর্ণ-প্রস্থের বোতাম যা স্মার্টওয়াচের গোলাকার স্ক্রিনের নিচের দিকে অ্যাঙ্কর করা থাকে, যা বর্তমান টাইল স্ক্রিন থেকে নেওয়া সবচেয়ে গুরুত্বপূর্ণ অ্যাকশনকে দেখায়।

• iconEdgeButton(): এজ বোতাম যা আইকন বা একই ধরনের গোল, ছোট কন্টেন্ট নেওয়ার জন্য একটি স্লট অফার করে
• textEdgeButton(): এজ বোতাম যা টেক্সট বা একই ধরনের দীর্ঘ এবং প্রশস্ত কন্টেন্ট নেওয়ার জন্য একটি স্লট অফার করে

কার্ড

কার্ডগুলি মূলত তথ্য-ভিত্তিক। এগুলি সম্পর্কিত, স্ট্রাকচার্ড ডেটার কালেকশন দেখায়। আপনি ইন্টার‍্যাক্টিভ কার্ড তৈরি করতে পারলেও, সাধারণত সেগুলি তথ্যের সারসংক্ষেপ দেখায়, যাতে ট্যাপ করে ব্যবহারকারী আরও বিবরণ দেখতে বা সম্পর্কিত অ্যাকশন নিতে পারেন।

• titleCard(): শীর্ষক কার্ড যা এক থেকে তিনটি স্লট অফার করে, সাধারণত টেক্সট ভিত্তিক
• appCard(): অ্যাপ কার্ড যা সর্বাধিক পাঁচটি স্লট অফার করে, সাধারণত টেক্সট ভিত্তিক
• textDataCard(): ডেটা কার্ড যা তিনটি পর্যন্ত উল্লম্বভাবে স্ট্যাক করা স্লট অফার করে, সাধারণত টেক্সট বা সংখ্যা ভিত্তিক
• iconDataCard(): ডেটা কার্ড যা সাধারণত টেক্সট বা সংখ্যা ভিত্তিক, একটি আইকন সহ তিনটি পর্যন্ত উল্লম্বভাবে স্ট্যাক করা স্লট অফার করে
• graphicDataCard(): গ্রাফিক ডেটা কার্ড যা গ্রাফিক ডেটার জন্য একটি স্লট অফার করে, যেমন প্রগ্রেস ইন্ডিকেটর এবং দুটি পর্যন্ত উল্লম্বভাবে স্ট্যাক করা স্লট, সাধারণত টেক্সট বিবরণের জন্য

প্রোগ্রেস ইন্ডিকেটর

• circularProgressIndicator(): রেডিয়াল এলিমেন্ট ব্যবহার করে লক্ষ্যের দিকে অগ্রগতি নির্দেশ করে
• segmentedCircularProgressIndicator(): স্বতন্ত্র পর্যায় সহ রেডিয়াল এলিমেন্ট ব্যবহার করে লক্ষ্যের দিকে অগ্রগতি নির্দেশ করে

গ্রুপ লে-আউট এলিমেন্ট

• buttonGroup(): কম্পোনেন্ট-লেআউট যা এর চিলড্রেনকে অনুভূমিক ক্রমে রাখে
• primaryLayout(): ফুল স্ক্রিন লেআউট যা সাজেস্ট করা M3 লেআউট স্টাইলকে দেখায়, এটি রেসপন্সিভ এবং এলিমেন্টের প্লেসমেন্ট, সাজেস্ট করা মার্জিন ও প্যাডিংয়ের সাথে একসাথে দেখায়

থিম প্রয়োগ করুন

Material 3 Expressive-এ, কালার সিস্টেম ২৯টি স্ট্যান্ডার্ড কালার রোলের মাধ্যমে সংজ্ঞায়িত করা হয়, যা ছয়টি গ্রুপে সাজানো থাকে: প্রাইমারি, সেকেন্ডারি, টারশিয়ারি, এরর, সারফেস এবং আউটলাইন।

ছবি ৩. Material 3 Expressive কালার সিস্টেম।

একটি ColorScheme এই ২৯টি রোলের প্রত্যেকটিকে একটি সংশ্লিষ্ট রঙের সাথে ম্যাপ করে এবং যেহেতু এটি MaterialScope-এর অংশ এবং কম্পোনেন্টগুলি অবশ্যই এর মধ্যে তৈরি করতে হবে, তাই সেগুলি অটোমেটিক স্কিম থেকে রঙ নেয়। এই পদ্ধতি সব UI এলিমেন্টকে অটোমেটিক মেটেরিয়াল ডিজাইন স্ট্যান্ডার্ড মেনে চলতে দেয়।

ব্যবহারকারীদের আপনার সংজ্ঞায়িত রঙের স্কিম—যেমন আপনার ব্র্যান্ডের রঙ প্রতিফলিত করে এমন একটি—এবং সিস্টেম দ্বারা প্রদত্ত একটির মধ্যে বেছে নিতে দিতে—হয় ব্যবহারকারীর বর্তমান ঘড়ির ফেস থেকে প্রাপ্ত, অথবা ব্যবহারকারীর দ্বারা বেছে নেওয়া—নিম্নলিখিতভাবে MaterialScope শুরু করুন:

val myColorScheme =
    ColorScheme(
        primary = Color.rgb(0, 0, 255).argb, // Blue
        onPrimary = Color.rgb(255, 255, 255).argb, // White
        // 27 more
    )

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    defaultColorScheme = myColorScheme
) {
    // If the user selects "no theme" in settings, myColorScheme is used.
    // Otherwise, the system-provided theme is used.
}
GetStarted.kt

আপনি এই বিকল্প বেছে নিলে, একটি মনোক্রোম টাইল আইকন প্রদান করুন যাতে যেকোনও থিমের সাথে মানানসই করে এটি সঠিকভাবে টিন্ট করা যায়।

আপনার দেওয়া রঙের স্কিমে টাইল দেখাতে, allowDynamicTheme-কে false-এ সেট করে ডায়নামিক থিমিংয়ের জন্য সহায়তা বন্ধ করুন:

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    allowDynamicTheme = false,
    defaultColorScheme = myColorScheme
) {
    // myColorScheme is *always* used.
}
GetStarted.kt

রঙ

প্রতিটি স্বতন্ত্র কম্পোনেন্ট ColorScheme-এর দ্বারা সংজ্ঞায়িত ২৯টি কালার রোলের সাবসেট ব্যবহার করে। যেমন, বোতামে সর্বাধিক চারটি রঙ ব্যবহার করা হয়, যা সাধারণত অ্যাক্টিভ ColorScheme-এর "প্রাথমিক" গ্রুপ থেকে নেওয়া হয়:

ButtonColors কম্পোনেন্ট টোকেন	ColorScheme ভূমিকা
containerColor	প্রাথমিক
iconColor	onPrimary
labelColor	onPrimary
secondaryLabelColor	onPrimary (অস্বচ্ছতা ০.৮)

আপনার Wear OS ডিজাইনে রঙ প্রয়োগ করার ব্যাপারে বিস্তারিত নির্দেশিকা পেতে, রঙের ডিজাইন গাইড দেখুন।

নির্দিষ্ট UI এলিমেন্টের জন্য আপনাকে ডিফল্ট কালার টোকেন থেকে বিচ্যুত হতে হতে পারে। যেমন, আপনি হয়ত চান যে একটি textEdgeButton "প্রাথমিক" গ্রুপের পরিবর্তে "সেকেন্ডারি" বা "টার্শিয়ারি" গ্রুপ থেকে রঙ ব্যবহার করুক, যাতে সেটি আলাদা করে বোঝা যায় এবং আরও ভালো কন্ট্রাস্ট দেয়।

আপনি বিভিন্ন উপায়ে কম্পোনেন্টের রঙ কাস্টমাইজ করতে পারবেন:

1. আগে থেকে নির্ধারিত রঙের জন্য হেল্পার ফাংশন ব্যবহার করুন। Material 3 Expressive-এর জন্য স্ট্যান্ডার্ড বোতাম স্টাইল প্রয়োগ করতে filledTonalButtonColors()-এর মতো হেল্পার ফাংশন ব্যবহার করুন। এই ফাংশনগুলি আগে থেকে কনফিগার করা ButtonColors ইনস্ট্যান্স তৈরি করে যা MaterialScope-এর মধ্যে অ্যাক্টিভ ColorScheme থেকে উপযুক্ত ভূমিকায় ফিল করা, টোনাল বা আউটলাইন করা সাধারণ স্টাইল ম্যাপ করে। এটি আপনাকে সাধারণ বোতামের ধরনের জন্য প্রতিটি রঙ ম্যানুয়ালি সংজ্ঞায়িত না করেই সামঞ্জস্যপূর্ণ স্টাইল প্রয়োগ করতে দেয়।

   textEdgeButton(
       colors = filledButtonColors(), // default
       /* OR colors = filledTonalButtonColors() */
       /* OR colors = filledVariantButtonColors() */
       // ... other parameters
   )
   GetStarted.kt

   কার্ডের জন্য, সমতুল্য filledCardColors() ফ্যামিলি অফ ফাংশন ব্যবহার করুন।

   এছাড়াও, আপনি হেল্পার ফাংশন দ্বারা রিটার্ন করা ButtonColors অবজেক্টটি তার copy() পদ্ধতি ব্যবহার করে পরিবর্তন করতে পারেন, যদি আপনাকে শুধুমাত্র একটি বা দুটি টোকেন পরিবর্তন করতে হয়:

   textEdgeButton(
       colors =
       filledButtonColors()
           .copy(
               containerColor = colorScheme.tertiary,
               labelColor = colorScheme.onTertiary
           ),
       // ... other parameters
   )
   GetStarted.kt

2. স্পষ্টভাবে রিপ্লেসমেন্ট কালার রোল প্রদান করুন। আপনার নিজস্ব ButtonColors অবজেক্ট তৈরি করুন এবং কম্পোনেন্টে পাস করুন। কার্ডের জন্য, সমতুল্য CardColors অবজেক্ট ব্যবহার করুন।

   textEdgeButton(
       colors =
       ButtonColors(
           // the materialScope makes colorScheme available
           containerColor = colorScheme.secondary,
           iconColor = colorScheme.secondaryDim,
           labelColor = colorScheme.onSecondary,
           secondaryLabelColor = colorScheme.onSecondary
       ),
       // ... other parameters
   )
   GetStarted.kt

3. নির্দিষ্ট রঙ উল্লেখ করুন (সাবধানতার সাথে ব্যবহার করুন)। সাধারণত সিম্যান্টিক ভূমিকা (যেমন, colorScheme.primary) অনুযায়ী রঙ উল্লেখ করার সাজেশন দেওয়া হলেও, আপনি সরাসরি রঙের ভ্যালুও দিতে পারেন। এই পদ্ধতিটি খুব কম ব্যবহার করা উচিত, কারণ এটি সামগ্রিক থিমের সাথে অসঙ্গতি তৈরি করতে পারে, বিশেষ করে যদি থিমটি ডাইনামিকভাবে পরিবর্তিত হয়।

   textEdgeButton(
       colors = filledButtonColors().copy(
           containerColor = android.graphics.Color.RED.argb, // Using named colors
           labelColor = 0xFFFFFF00.toInt().argb // Using a hex code for yellow
       ),
       // ... other parameters
   )
   GetStarted.kt

টাইপোগ্রাফি

আপনার ডিজাইনে টাইপোগ্রাফি কার্যকরভাবে ব্যবহার করার ব্যাপারে আরও তথ্যের জন্য, টাইপোগ্রাফি ডিজাইন গাইড দেখুন।

Wear OS প্ল্যাটফর্ম জুড়ে ভিজ্যুয়াল সামঞ্জস্য তৈরি করতে এবং পারফর্ম্যান্স অপ্টিমাইজ করতে, টাইলের সব টেক্সট সিস্টেম-প্রদত্ত ফন্ট ব্যবহার করে রেন্ডার করা হয়। অর্থাৎ, টাইল কাস্টম টাইপফেস সাপোর্ট করে না। Wear OS 6 ও তার পরবর্তী ভার্সনে, এটি OEM-নির্দিষ্ট ফন্ট। বেশিরভাগ ক্ষেত্রে এটি একটি পরিবর্তনশীল ফন্ট হবে, যা আরও প্রকাশ্য অভিজ্ঞতা এবং আরও গ্রানুলার কন্ট্রোল অফার করবে।

টেক্সট স্টাইল তৈরি করতে, আপনি সাধারণত টাইপোগ্রাফিক কনস্ট্যান্টের সাথে text() পদ্ধতি ব্যবহার করেন। এই কম্পোনেন্ট আপনাকে Material 3 Expressive-এ আগে থেকে নির্ধারিত টাইপোগ্রাফি রোল ব্যবহার করতে দেয়, যা আপনার টাইলকে পঠনযোগ্যতা এবং হায়ারার্কির জন্য প্রতিষ্ঠিত টাইপোগ্রাফিক পেশাদার পদ্ধতি মেনে চলতে সাহায্য করে। লাইব্রেরি ১৮টি সেমানটিক টাইপোগ্রাফি কনস্ট্যান্টের একটি সেট অফার করে, যেমন BODY_MEDIUM। এই কনস্ট্যান্টগুলি সাইজ ছাড়াও ফন্ট অ্যাক্সিসকে প্রভাবিত করে।

text(
    text = "Hello, World!".layoutString,
    typography = BODY_MEDIUM,
)
GetStarted.kt

আরও নিয়ন্ত্রণের জন্য, আপনি অতিরিক্ত সেটিংস প্রদান করতে পারেন। Wear OS 6 এবং তার পরবর্তী ভার্সনে, একটি ভেরিয়েবল ফন্ট ব্যবহার করা হতে পারে, যা আপনি অ্যাক্সিস ইটালিক, ওয়েট, প্রস্থ এবং রাউন্ডনেস অনুযায়ী পরিবর্তন করতে পারবেন। settings প্যারামিটার ব্যবহার করে আপনি এইসব অক্ষ নিয়ন্ত্রণ করতে পারবেন:

text(
    text = "Hello, World".layoutString,
    italic = true,

    // Use elements defined in androidx.wear.protolayout.LayoutElementBuilders.FontSetting
    settings =
    listOf(
        weight(500),
        width(100F),
        roundness(100)
    ),
)
GetStarted.kt

সবশেষে, আপনাকে যদি সাইজ বা লেটার স্পেসিং (সাজেস্ট করা হয় না) নিয়ন্ত্রণ করতে হয়, তাহলে text()-এর পরিবর্তে basicText() ব্যবহার করুন এবং fontStyle() ব্যবহার করে fontStyle প্রপার্টির জন্য একটি ভ্যালু তৈরি করুন।

আকার ও মার্জিন

আপনি প্রায় প্রতিটি কম্পোনেন্টের কোণের ব্যাসার্ধ পরিবর্তন করতে পারবেন, এরshape প্রপার্টি ব্যবহার করে। MaterialScope প্রপার্টি shapes থেকে ভ্যালু পাওয়া যায়:

textButton(
    height = expand(),
    width = expand(),
    shape = shapes.medium, // OR another value like shapes.full
    colors = filledVariantButtonColors(),
    labelContent = { text("Hello, World!".layoutString) },
)
GetStarted.kt

কোনও কম্পোনেন্টের আকার পরিবর্তন করার পরে, আপনি যদি মনে করেন যে এটি ডিসপ্লের কিনারার চারপাশে খুব বেশি বা খুব কম জায়গা ছেড়ে দেয়, তাহলে primaryLayout()-এর margin প্যারামিটার ব্যবহার করে মার্জিন অ্যাডজাস্ট করুন:

primaryLayout(
    mainSlot = {
        textButton(
            shape = shapes.small,
            /* ... */
        )
    },
    // margin constants defined in androidx.wear.protolayout.material3.PrimaryLayoutMargins
    margins = MAX_PRIMARY_LAYOUT_MARGIN,
)
GetStarted.kt

মনে রাখবেন: Compose for Wear OS ব্যবহার করে এমন অ্যাপের জন্য উপলভ্য বোতামের আকারের মধ্যে শেপ মর্ফিং টাইল সাপোর্ট করে না। যেমন, IconToggleButtonShapes.

-এর সমতুল্য কোনও টাইল নেই

আর্ক

নিম্নলিখিত Arc কন্টেনার চাইল্ড আইটেম কাজ করে:

• ArcLine: Arc-এর চারপাশে একটি বাঁকা লাইন রেন্ডার করে।
• ArcText: আর্কে কার্ভড টেক্সট রেন্ডার করে।
• ArcAdapter: আর্কে একটি বেসিক লেআউট এলিমেন্ট রেন্ডার করে, যা আর্কের স্পর্শক হিসেবে আঁকা হয়।

মনে রাখবেন: ArcText আর্কের চারপাশে কার্ভড টেক্সট আঁকলেও, ArcAdapter-এ Text ব্যবহার করলে আর্কের স্পর্শক বরাবর লিনিয়ার টেক্সট আঁকা হয়।

আরও তথ্যের জন্য, প্রতিটি এলিমেন্টের ধরনের জন্য রেফারেন্স ডকুমেন্টেশন দেখুন।

পরিবর্তনকারী

উপলভ্য প্রতিটি লেআউট এলিমেন্টে ঐচ্ছিকভাবে মডিফায়ার প্রয়োগ করা যেতে পারে। নিম্নলিখিত উদ্দেশ্যে এইসব মডিফায়ার ব্যবহার করুন:

• লেআউটের ভিজ্যুয়াল অ্যাপিয়ারেন্স পরিবর্তন করুন। যেমন, আপনার লেআউট এলিমেন্টে ব্যাকগ্রাউন্ড, বর্ডার বা প্যাডিং যোগ করুন।
• লেআউট সম্পর্কে মেটাডেটা যোগ করুন। যেমন, স্ক্রিন রিডারের সাথে ব্যবহার করার জন্য আপনার লেআউট এলিমেন্টে সিম্যান্টিক্স মডিফায়ার যোগ করুন।
• ফাংশন যোগ করুন। যেমন, আপনার টাইলকে ইন্ট্যার‍্যাক্টিভ করতে, লেআউট এলিমেন্টে ক্লিক করা যায় এমন মডিফায়ার যোগ করুন। আরও তথ্যের জন্য, টাইলসের সাথে ইন্টার‍্যাক্ট করুন দেখুন।

যেমন, আমরা Image-এর ডিফল্ট লুক ও মেটাডেটা কাস্টমাইজ করতে পারি, যেমনটি নিম্নলিখিত কোড স্যাম্পেলে দেখানো হয়েছে:

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(
            Modifiers.Builder()
                .setBackground(Background.Builder().setColor(argb(0xFFFF0000.toInt())).build())
                .setPadding(ModifiersBuilders.Padding.Builder().setStart(dp(12f)).build())
                .setSemantics(Semantics.Builder().setContentDescription("Image description").build())
                .build()
        )
        .build()
Tile.kt

Spannables

Spannable হল বিশেষ ধরনের কন্টেনার যা টেক্সটের মতো এলিমেন্ট লে-আউট করে। এটি তখন উপযোগী হয় যখন আপনি টেক্সটের একটি বড় ব্লকে শুধুমাত্র একটি সাবস্ট্রিংয়ে আলাদা স্টাইল প্রয়োগ করতে চান, এমন কিছু যা Text এলিমেন্টের মাধ্যমে করা সম্ভব নয়।

একটি Spannable কন্টেনারে Span চাইল্ড আইটেম আছে। অন্যান্য বাচ্চা, বা nested Spannable ইনস্ট্যান্স, অনুমোদিত নয়।

Span-এর দুই ধরনের চাইল্ড আছে:

• SpanText: নির্দিষ্ট স্টাইলে টেক্সট রেন্ডার করে।
• SpanImage: টেক্সটের সাথে ইনলাইন ছবি রেন্ডার করে।

যেমন, আপনি "Hello world" টাইলে "world" শব্দটি ইটালিক করতে পারেন এবং শব্দ দুটির মধ্যে একটি ছবি যোগ করতে পারেন, যেমনটি নিম্নলিখিত কোড স্যাম্পেলে দেখানো হয়েছে:

private fun mySpannable(): LayoutElement =
    LayoutElementBuilders.Spannable.Builder()
        .addSpan(SpanText.Builder().setText("Hello ").build())
        .addSpan(SpanImage.Builder().setWidth(dp(24f)).setHeight(dp(24f)).setResourceId("image_id").build())
        .addSpan(
            SpanText.Builder()
                .setText("world")
                .setFontStyle(FontStyle.Builder().setItalic(true).build())
                .build()
        )
        .build()
Tile.kt

রিসোর্স নিয়ে কাজ করা

গুরুত্বপূর্ণ: Material3TileService ব্যবহার করার সময়, আপনি যখন সরাসরি icon() বা backgroundImage()-এর মতো Material 3 কম্পোনেন্টে ImageResource (যেমন imageResource(androidImageResource(R.drawable.icon))) পাস করেন, তখন এর বিল্ট-ইন ProtoLayoutScope-এর মাধ্যমে রিসোর্স অটোমেটিক রেজিস্টার হয়ে যায়। Material3TileService-এ onTileResourcesRequest() ওভাররাইড করবেন না।

আপনার অ্যাপের কোনও রিসোর্সে টাইলসের অ্যাক্সেস নেই। এর অর্থ হল, আপনি কোনও Image লেআউট এলিমেন্টে Android ইমেজ আইডি পাস করতে এবং এটি সমাধান হবে বলে আশা করতে পারবেন না। পরিবর্তে, onTileResourcesRequest() পদ্ধতি ওভাররাইড করুন এবং ম্যানুয়ালি যেকোনও রিসোর্স প্রদান করুন।

onTileResourcesRequest() পদ্ধতির মধ্যে ছবি দেওয়ার দুটি উপায় আছে:

• setAndroidResourceByResId() ব্যবহার করে ড্রয়েবল রিসোর্স প্রদান করুন।
• setInlineResource() ব্যবহার করে ByteArray হিসেবে একটি ডায়নামিক ছবি প্রদান করুন।

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
    Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping(
            "image_from_resource",
            ResourceBuilders.ImageResource.Builder()
                .setAndroidResourceByResId(
                    ResourceBuilders.AndroidImageResourceByResId.Builder()
                        .setResourceId(R.drawable.ic_walk)
                        .build()
                ).build()
        )
        .addIdToImageMapping(
            "image_inline",
            ResourceBuilders.ImageResource.Builder()
                .setInlineResource(
                    ResourceBuilders.InlineImageResource.Builder()
                        .setData(imageAsByteArray)
                        .setWidthPx(48)
                        .setHeightPx(48)
                        .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                        .build()
                ).build()
        ).build()
)
Tile.kt

টাইল প্রিভিউ ছবির চেকলিস্ট

সিস্টেমটি Android অ্যাপ ম্যানিফেস্টে রেফারেন্স করা টাইল প্রিভিউ ছবি, নতুন টাইল যোগ করার জন্য টাইল ক্যারোজেল এডিটরে দেখায়। এই এডিটর Wear OS ডিভাইস এবং ফোনে স্মার্টওয়াচ কম্প্যানিয়ন অ্যাপ, উভয় জায়গাতেই দেখা যায়।

ব্যবহারকারীদের এই প্রিভিউ ছবির সর্বাধিক সুবিধা নিতে সাহায্য করার জন্য, আপনার টাইল সম্পর্কে নিম্নলিখিত বিবরণ যাচাই করুন:

• লেটেস্ট ডিজাইন দেখায়। প্রিভিউতে আপনার টাইলসের সবচেয়ে সাম্প্রতিক ডিজাইন সঠিকভাবে দেখানো উচিত।
• সাজেস্ট করা ডাইমেনশন ব্যবহার করে। ডিসপ্লের কোয়ালিটি যথাসম্ভব ভালো করতে এবং ব্যবহারকারীকে ভালো অভিজ্ঞতা দিতে, প্রিভিউ ছবির সাইজ ৪০০px x ৪০০px হতে হবে।
• স্ট্যাটিক রঙের থিম ব্যবহার করে। টাইলের স্ট্যাটিক রঙের থিম ব্যবহার করুন, ডায়নামিক নয়।
• অ্যাপ আইকন অন্তর্ভুক্ত করে। প্রিভিউ ইমেজের উপরে আপনার অ্যাপের আইকন দেখা যাচ্ছে কিনা তা কনফার্ম করুন।
• লোড করা/লগ-ইন করা স্ট্যাটাস দেখায়। প্রিভিউতে সম্পূর্ণ কার্যকরী "লোড করা" বা "লগ-ইন করা" অবস্থা দেখানো উচিত, কোনও খালি বা প্লেসহোল্ডার কন্টেন্ট এড়িয়ে যাওয়া উচিত।
• কাস্টমাইজেশনের জন্য রিসোর্স রেজোলিউশন সংক্রান্ত নিয়ম ব্যবহার করুন (ঐচ্ছিক)। ডিভাইসের ডিসপ্লে সাইজ, ভাষা বা লোকাল সেটিংসের সাথে ম্যাচ করে এমন প্রিভিউ প্রদান করতে Android-এর রিসোর্স রেজোলিউশন সংক্রান্ত নিয়ম ব্যবহার করার কথা বিবেচনা করুন। এটি বিশেষ করে তখনই কাজে লাগে যখন আপনার টাইল বিভিন্ন ডিভাইসে আলাদা আলাদা দেখায়।