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

টাইলস দিয়ে শুরু করুন
সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

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

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

গ্রোভি

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

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

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

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

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

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

কোটলিন

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

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

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

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

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

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

গ্রোভি

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

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

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

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

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

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

কোটলিন

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

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

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

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

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

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

মূল ধারণা

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

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

সম্পদ: ResourceBuilders.Resources অবজেক্টে Android রিসোর্স (ছবি) এর মূল-মান জোড়ার একটি মানচিত্র থাকে যা একটি লেআউট এবং একটি সংস্করণ রেন্ডার করার জন্য প্রয়োজন।
টাইমলাইন: একটি 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

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

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

আপনার অ্যাপ স্থাপন করুন, এবং টাইলস ক্যারোজেলে টাইল যুক্ত করুন ( একটি টাইলের পূর্বরূপ দেখার আরও বিকাশকারী-বান্ধব উপায় রয়েছে, তবে আপাতত এটি ম্যানুয়ালি করুন)।

'হ্যালো ওয়ার্ল্ড' টাইল। — **চিত্র 1.** "হ্যালো ওয়ার্ল্ড" টাইল।

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

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

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

লেআউট

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

একটি মেটেরিয়াল ডিজাইনের সুযোগ শুরু করুন: প্রয়োজনীয় context এবং deviceConfiguration প্রদান করে materialScope() ফাংশনটি কল করুন। আপনি ঐচ্ছিক পরামিতি অন্তর্ভুক্ত করতে পারেন, যেমন allowDynamicTheme এবং defaultColorScheme । allowDynamicTheme ডিফল্টভাবে true , এবং defaultColorScheme ColorScheme সেই ColorScheme উপস্থাপন করে যখন ডায়নামিক রং পাওয়া যায় না—যেমন ব্যবহারকারী যখন বৈশিষ্ট্যটি বন্ধ করে দেন—অথবা যখন এটি ডিভাইস দ্বারা সমর্থিত হয় না, বা allowDynamicTheme false )।
সুযোগের মধ্যে আপনার UI তৈরি করুন: একটি প্রদত্ত টাইল লেআউটের জন্য সমস্ত UI উপাদানগুলিকে একটি একক শীর্ষ-স্তরের ম্যাটেরিয়ালস্কোপ() কলের ল্যাম্বডার মধ্যে সংজ্ঞায়িত করতে হবে। এই কম্পোনেন্ট ফাংশন, যেমন 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(text = "Action".layoutString) }
    )
}
```

স্লট

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

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

টাইলস লেআউট শিরোনাম স্লট, প্রধান স্লট এবং বটমস্লট দেখাচ্ছে — **চিত্র 2.** শিরোনাম স্লট, প্রধান স্লট এবং নীচের স্লট।

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

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

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

UI উপাদান

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

বোতাম

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

এজ বোতাম

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

কার্ড

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

অগ্রগতি সূচক

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

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

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

থিমিং

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

উপাদান 3 অভিব্যক্তিপূর্ণ রঙ সিস্টেম — **চিত্র 3.** উপাদান 3 এক্সপ্রেসিভ কালার সিস্টেম।

একটি ColorScheme এই 29টি ভূমিকার প্রতিটিকে একটি সংশ্লিষ্ট রঙে ম্যাপ করে এবং যেহেতু এটি MaterialScope এর অংশ এবং এর মধ্যে উপাদানগুলি তৈরি করা আবশ্যক, তাই তারা স্বয়ংক্রিয়ভাবে স্কিম থেকে রং নেয়। এই পদ্ধতিটি সমস্ত UI উপাদানগুলিকে স্বয়ংক্রিয়ভাবে উপাদান ডিজাইনের মানগুলি মেনে চলতে দেয়৷

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

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

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

আপনার প্রদত্ত রঙের স্কিমে আপনার টাইলগুলিকে দেখাতে বাধ্য করতে, allowDynamicTheme সেট করে ডাইনামিক থিমিংয়ের জন্য সমর্থন অক্ষম করুন false

materialScope(
  allowDynamicTheme = false,
  defaultColorScheme = myColorScheme
) {
  // myColorScheme is *always* used.
}

রঙ

প্রতিটি পৃথক উপাদান একটি ColorScheme দ্বারা সংজ্ঞায়িত 29টি রঙের ভূমিকার একটি উপসেট ব্যবহার করে। উদাহরণস্বরূপ, বোতামগুলি চারটি রঙ পর্যন্ত ব্যবহার করে, যা ডিফল্টরূপে সক্রিয় ColorScheme এর "প্রাথমিক" গ্রুপ থেকে নেওয়া হয়:

`ButtonColors` উপাদান টোকেন	`ColorScheme` ভূমিকা
ধারক রঙ	প্রাথমিক
আইকন রঙ	প্রাথমিক উপর
লেবেল রঙ	প্রাথমিক
সেকেন্ডারি লেবেল কালার	অনপ্রাথমিক (অস্বচ্ছতা 0.8)

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

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

পূর্বনির্ধারিত রঙের জন্য একটি সহায়ক ফাংশন ব্যবহার করুন। উপাদান 3 এক্সপ্রেসিভের জন্য স্ট্যান্ডার্ড বোতাম শৈলী প্রয়োগ করতে filledTonalButtonColors() এর মত সহায়ক ফাংশন ব্যবহার করুন। এই ফাংশনগুলি পূর্ব-কনফিগার করা ButtonColors ইন্সট্যান্স তৈরি করে যা MaterialScope মধ্যে সক্রিয় ColorScheme থেকে ভরা, টোনাল বা উপযুক্ত ভূমিকার রূপরেখার মতো সাধারণ শৈলীগুলিকে ম্যাপ করে। এটি আপনাকে সাধারণ বোতাম প্রকারের জন্য প্রতিটি রঙকে ম্যানুয়ালি সংজ্ঞায়িত না করেই ধারাবাহিক শৈলী প্রয়োগ করতে দেয়।
```
textEdgeButton(
    colors = filledButtonColors() // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)
```
কার্ডের জন্য, সমতুল্য filledCardColors() ফাংশন পরিবার ব্যবহার করুন।
আপনি যদি শুধুমাত্র একটি বা দুটি টোকেন পরিবর্তন করতে চান তবে আপনি তাদের copy() পদ্ধতি ব্যবহার করে সাহায্যকারী ফাংশন দ্বারা প্রত্যাবর্তিত ButtonColors অবজেক্ট পরিবর্তন করতে পারেন:
```
textEdgeButton(
    colors =
        filledButtonColors()
            .copy(
                containerColor = colorScheme.tertiary,
                labelColor = colorScheme.onTertiary
            )
    // ... other parameters
)
```

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

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

নির্দিষ্ট রং নির্দিষ্ট করুন (সতর্কতার সাথে ব্যবহার করুন)। যদিও সাধারণত রংগুলিকে তাদের শব্দার্থিক ভূমিকা দ্বারা নির্দিষ্ট করার সুপারিশ করা হয় (যেমন, colorScheme.primary ), আপনি সরাসরি রঙের মানও দিতে পারেন। এই পদ্ধতিটি সামান্য ব্যবহার করা উচিত, কারণ এটি সামগ্রিক থিমের সাথে অসঙ্গতি সৃষ্টি করতে পারে, বিশেষ করে যদি থিমটি গতিশীলভাবে পরিবর্তিত হয়।
```
textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.argb // Using a hex code for yellow
    )
    // ... other parameters
)
```

টাইপোগ্রাফি

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

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

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

আরও নিয়ন্ত্রণের জন্য, আপনি অতিরিক্ত সেটিংস প্রদান করতে পারেন। 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)),
)

অবশেষে, যদি আপনার আকার বা অক্ষর ব্যবধান নিয়ন্ত্রণ করতে হয় (প্রস্তাবিত নয়), 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) },
)

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

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

আর্কস

নিম্নলিখিত Arc ধারক শিশুদের সমর্থিত:

ArcLine : আর্কের চারপাশে একটি বাঁকা রেখা রেন্ডার করে।
ArcText : আর্কে বাঁকা পাঠ রেন্ডার করে।
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)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

জাভা

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

স্প্যানেবল

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

একটি Spannable পাত্রে Span শিশুদের দ্বারা পূর্ণ। অন্যান্য শিশু, বা নেস্টেড Spannable দৃষ্টান্তগুলি অনুমোদিত নয়৷

দুটি ধরণের Span শিশু রয়েছে:

SpanText : একটি নির্দিষ্ট শৈলীর সাথে পাঠ্য রেন্ডার করে।
SpanImage : টেক্সট সহ একটি ইমেজ ইনলাইন রেন্ডার করে।

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

কোটলিন

private fun mySpannable(): LayoutElement =
    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()

জাভা

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

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

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

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

setAndroidResourceByResId() ব্যবহার করে একটি অঙ্কনযোগ্য সম্পদ প্রদান করুন।
setInlineResource() ব্যবহার করে একটি ByteArray হিসাবে একটি গতিশীল চিত্র প্রদান করুন।

কোটলিন

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

জাভা

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

টাইল প্রিভিউ ইমেজ চেকলিস্ট

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

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

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