এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

টাইলস দিয়ে শুরু করুন

Wear OS সংস্করণের জন্য টাইলস

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

গ্রোভি

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

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

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

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

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

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

কোটলিন

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

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

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

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

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

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

গ্রোভি

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

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

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

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

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

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

কোটলিন

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

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

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

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

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

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

মূল ধারণা

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

লেআউট টেমপ্লেট: ডিসপ্লেতে ভিজ্যুয়াল উপাদানগুলোর সামগ্রিক বিন্যাস নির্ধারণ করে। এটি primaryLayout() ফাংশনের মাধ্যমে সম্পন্ন করা হয়।
লেআউট এলিমেন্ট: এগুলি একটি স্বতন্ত্র গ্রাফিক্যাল এলিমেন্ট, যেমন একটি বাটন বা কার্ড , অথবা কলাম , বাটনগ্রুপ বা অনুরূপ কিছু ব্যবহার করে একত্রে গোষ্ঠীভুক্ত একাধিক এলিমেন্টকে উপস্থাপন করে। এগুলি একটি লেআউট টেমপ্লেটের মধ্যে এমবেড করা থাকে।

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

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

আপনার অ্যাপ থেকে একটি টাইল সরবরাহ করতে, 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

এরপরে, আপনার 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

অনুমতি এবং অভিপ্রায় ফিল্টার এই পরিষেবাটিকে একটি টাইল প্রদানকারী হিসাবে নিবন্ধন করে।

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

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

Material 3 দিয়ে তৈরি একটি Wear OS টাইল, যেখানে 'Hello World' লেখাটি প্রদর্শিত হচ্ছে। — **চিত্র ১.** "হ্যালো ওয়ার্ল্ড" টাইল।

সম্পূর্ণ উদাহরণের জন্য গিটহাবে থাকা কোড স্যাম্পল অথবা কোডল্যাব দেখুন।

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

কোটলিনের টাইপ-সেফ বিল্ডার প্যাটার্ন দ্বারা চালিত একটি কাঠামোগত পদ্ধতি ব্যবহার করে মেটেরিয়াল ৩-এর এক্সপ্রেসিভ UI এলিমেন্টগুলো তৈরি করা হয়।

লেআউট

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

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

একটি ম্যাটেরিয়াল ডিজাইন স্কোপ শুরু করতে: প্রয়োজনীয় context এবং deviceConfiguration প্রদান করে materialScope() ফাংশনটি কল করুন। আপনি ঐচ্ছিক প্যারামিটার অন্তর্ভুক্ত করতে পারেন, যেমন allowDynamicTheme এবং defaultColorScheme । allowDynamicTheme ডিফল্টরূপে true থাকে, এবং defaultColorScheme সেই ColorScheme বোঝায় যা তখন ব্যবহৃত হয় যখন ডাইনামিক কালার উপলব্ধ থাকে না—যেমন যখন ব্যবহারকারী ফিচারটি বন্ধ করে রেখেছেন—অথবা যখন এটি ডিভাইস দ্বারা সমর্থিত নয়, বা allowDynamicTheme false থাকে।
আপনার 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-তে, টাইলগুলির বিন্যাস কম্পোজ-অনুপ্রাণিত একটি পদ্ধতি ব্যবহার করে, যেখানে তিনটি স্বতন্ত্র স্লট থাকে। উপর থেকে নিচে, সেগুলি হলো:

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

টাইটেল স্লট, মেইন স্লট এবং বটম স্লট দেখানো টাইলস লেআউট। — **চিত্র ২.** টাইটেল স্লট, মেইন স্লট এবং বটম স্লট।

প্রতিটি স্লটের বিষয়বস্তু নিম্নরূপ:

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

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

UI উপাদান

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

বোতাম

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

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

প্রান্তের বোতাম

An edge button is a specialized, full-width button anchored to the bottom of a watch's round screen, representing the most important action to take from the current tile screen.

iconEdgeButton() : এজ বাটন যা একটি আইকন বা অনুরূপ গোলাকার, ছোট কন্টেন্ট রাখার জন্য একটিমাত্র স্লট প্রদান করে।
textEdgeButton() : একটি এজ বাটন যা টেক্সট বা অনুরূপ লম্বা ও চওড়া কন্টেন্ট রাখার জন্য একটিমাত্র স্লট প্রদান করে।

কার্ড

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

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

অগ্রগতি সূচক

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

গ্রুপ লেআউট উপাদান

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

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

ম্যাটেরিয়াল ৩ এক্সপ্রেসিভ-এ, রঙ ব্যবস্থাটি ২৯টি প্রমিত রঙের ভূমিকা দ্বারা সংজ্ঞায়িত করা হয়েছে, যা ছয়টি গ্রুপে বিভক্ত: প্রাথমিক, মাধ্যমিক, তৃতীয়, ত্রুটি, পৃষ্ঠ এবং রূপরেখা।

ম্যাটেরিয়াল ৩ এক্সপ্রেসিভ কালার সিস্টেম, যা রঙের ভূমিকাগুলোকে প্রাইমারি, সেকেন্ডারি, টারশিয়ারি, এরর, সারফেস এবং আউটলাইনের মতো গ্রুপে বিভক্ত করে দেখায়। — **চিত্র ৩.** উপাদান ৩-এর অভিব্যক্তিপূর্ণ রঙ ব্যবস্থা।

একটি 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` ভূমিকা
কন্টেইনারের রঙ	প্রাথমিক
আইকনের রঙ	প্রাথমিক
লেবেলের রঙ	প্রাথমিক
সেকেন্ডারি লেবেল রঙ	onPrimary (স্বচ্ছতা ০.৮)

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

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

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

পূর্বনির্ধারিত রঙের জন্য একটি হেল্পার ফাংশন ব্যবহার করুন। Material 3 Expressive-এর জন্য স্ট্যান্ডার্ড বাটন স্টাইল প্রয়োগ করতে filledTonalButtonColors() এর মতো হেল্পার ফাংশন ব্যবহার করুন। এই ফাংশনগুলো আগে থেকে কনফিগার করা ButtonColors ইনস্ট্যান্স তৈরি করে, যা MaterialScope মধ্যে থাকা সক্রিয় ColorScheme থেকে filled, tonal, বা outlined-এর মতো সাধারণ স্টাইলগুলোকে উপযুক্ত রোলের সাথে ম্যাপ করে। এর ফলে আপনি সাধারণ বাটন টাইপগুলোর জন্য প্রতিটি রঙ ম্যানুয়ালি সংজ্ঞায়িত না করেই সামঞ্জস্যপূর্ণ স্টাইল প্রয়োগ করতে পারেন।
```
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
```
সুস্পষ্টভাবে প্রতিস্থাপন রঙের ভূমিকা প্রদান করুন। আপনার নিজস্ব 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
```
নির্দিষ্ট রং উল্লেখ করুন (সাবধানতার সাথে ব্যবহার করুন)। যদিও সাধারণত রংগুলোকে তাদের অর্থগত ভূমিকা (যেমন, 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 shapes থেকে আসে।

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

After you alter the shape of a component, if you think that it leaves too much or too little space around the edge of the display, adjust the margins using the margin parameter of primaryLayout() :

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

আর্কস

নিম্নলিখিত Arc কন্টেইনার চাইল্ডগুলো সমর্থিত:

ArcLine : আর্কের চারপাশে একটি বাঁকা রেখা রেন্ডার করে।
ArcText : Arc-এর মধ্যে বক্রাকার টেক্সট প্রদর্শন করে।
ArcAdapter : আর্কের মধ্যে একটি বেসিক লেআউট এলিমেন্ট রেন্ডার করে, যা আর্কের স্পর্শক বরাবর অঙ্কিত হয়।

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

সংশোধক

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

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

উদাহরণস্বরূপ, আমরা একটি 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

স্প্যানেবল

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

একটি Spannable কন্টেইনার Span চাইল্ড দ্বারা পূর্ণ থাকে। অন্য কোনো চাইল্ড, বা নেস্টেড 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

সম্পদ নিয়ে কাজ করুন

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

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

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

 )                       )override fun onTileResourcesRequest( requestParams: ResourcesRequest class="devsite-syntax-w"> = 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() class="devsite-github-link nocode no-select nocontent">Tile.kt

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

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

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

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