আপনার অ্যাপ থেকে টাইলের সুবিধা দেওয়া শুরু করতে, আপনার অ্যাপের 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") }
মূল ধারণা
টাইল Android অ্যাপের মতো একই পদ্ধতিতে তৈরি করা হয় না এবং আলাদা আলাদা ধারণা ব্যবহার করে:
- লেআউট টেমপ্লেট: ডিসপ্লেতে ভিজ্যুয়াল এলিমেন্টের সামগ্রিক ব্যবস্থা
নির্ধারণ করুন।
primaryLayout()ফাংশনের মাধ্যমে এটি করা হয়। - লেআউট এলিমেন্ট: কোনও স্বতন্ত্র গ্রাফিক্যাল এলিমেন্টকে বোঝায়, যেমন বোতাম বা কার্ড অথবা এই ধরনের একাধিক এলিমেন্টকে একসাথে গ্রুপ করে কলাম, buttonGroup বা এই ধরনের কিছু ব্যবহার করা হয়। এগুলি একটি লেআউট টেমপ্লেটের মধ্যে এম্বেড করা থাকে।
- সম্পদ:
ResourceBuilders.Resourcesঅবজেক্টে Android রিসোর্সের (ছবি) কী-ভ্যালু পেয়ারের ম্যাপ থাকে যা লেআউট রেন্ডার করার জন্য প্রয়োজন হয় এবং একটি ভার্সন থাকে। - টাইমলাইন:
TimelineBuilders.Timelineঅবজেক্ট হল এক বা একাধিক লেআউট অবজেক্টের ইনস্ট্যান্সের তালিকা। আপনি বিভিন্ন মেকানিজম ও এক্সপ্রেশন প্রদান করতে পারেন যার মাধ্যমে রেন্ডারারকে কখন একটি লেআউট অবজেক্ট থেকে অন্যটিতে পরিবর্তন করতে হবে তা নির্দেশ করা যায়, যেমন নির্দিষ্ট সময়ে লেআউট দেখানো বন্ধ করা। - স্টেট:
StateBuilders.Stateধরনের ডেটা স্ট্রাকচার যা টাইল ও অ্যাপের মধ্যে পাস করা হয়, যাতে দুটি কম্পোনেন্ট একে অপরের সাথে যোগাযোগ করতে পারে। যেমন, টাইলে কোনও বোতামে ট্যাপ করা হলে, state বোতামের আইডি হোল্ড করে। এছাড়াও, আপনি ম্যাপ ব্যবহার করে ডেটা টাইপ এক্সচেঞ্জ করতে পারবেন। - টাইল: টাইলকে প্রতিনিধিত্বকারী একটি
TileBuilders.Tileঅবজেক্ট, যার মধ্যে টাইমলাইন, রিসোর্স ভার্সন আইডি, ফ্রেশনেস ইন্টারভ্যাল এবং স্টেট থাকে। - Protolayout: এই শব্দটি বিভিন্ন টাইলের সাথে সম্পর্কিত ক্লাসের নামে দেখা যায় এবং এটি Wear OS Protolayout লাইব্রেরি-কে বোঝায়, এটি একটি গ্রাফিক্স লাইব্রেরি যা বিভিন্ন Wear OS সারফেস জুড়ে ব্যবহার করা হয়।
টাইল তৈরি করা
Material3TileService ব্যবহার করুন (সাজেস্ট করা)
Material 3 টাইল (androidx.wear.tiles:tiles:1.6.0 ও তার পরের যেকোনও ভার্সন) তৈরি করার সময়,
নিম্ন-লেভেলের
TileService ক্লাসের পরিবর্তে সবসময় Material3TileService এক্সটেন্ড করুন। Material3TileService একটি মতামত-ভিত্তিক,
Kotlin-ফার্স্ট আর্কিটেকচার প্রদান করে যা টাইল ডেভেলপমেন্টকে সহজ করে তোলে:
- বিল্ট-ইন Kotlin coroutines:
ListenableFutureব্যবহার ওonTileRequest()ওভাররাইড করার পরিবর্তে একটি সাসপেন্ডিংMaterialScope.tileResponse(requestParams: TileRequest): Tileফাংশন ইমপ্লিমেন্ট করুন। - প্রি-কনফিগার করা
MaterialScope:tileResponse()এটির রিসিভার হিসেবেMaterialScope-এর সাথে রান করে (কনস্ট্রাক্টর প্যারামিটারের মাধ্যমে কনফিগার করা হয় যেমনallowDynamicThemeওdefaultColorScheme), তাই আপনাকে অপ্রয়োজনীয়materialScope()কলের মধ্যে আপনার লেআউট র্যাপ করতে হবে না। - সিঙ্গেল-কল রিসোর্স রেজিস্ট্রেশন: এর মধ্যে ইনলাইন ইমেজ রিসোর্স অটোমেটিক রেজিস্টার করা এবং একটি সিঙ্গেল সিস্টেম বাইন্ডার কলে
টাইলের লেআউট ও রিসোর্স, দুটিই রিটার্ন করা
ProtoLayoutScopeঅন্তর্ভুক্ত। কারণMaterial3TileServiceরিসোর্স অটোমেটিক ম্যানেজ করে (finalonTileResourcesRequest()),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) } ) ) ) }
আন্ডারলায়িং 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()) }
এরপরে, আপনার 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>
অনুমতি ও ইনটেন্ট ফিল্টার এই পরিষেবাকে টাইলের পরিষেবা প্রদানকারী হিসেবে রেজিস্টার করে।
ব্যবহারকারী যখন তার ফোন বা ওয়াচে টাইল কনফিগার করেন, তখন তাকে আইকন, লেবেল, বিবরণ ও প্রিভিউ রিসোর্স দেখানো হয়। মনে রাখবেন, প্রিভিউ রিসোর্স Android-এর সব স্ট্যান্ডার্ড রিসোর্স কোয়ালিফায়ার সাপোর্ট করে, তাই স্ক্রিন সাইজ ও ডিভাইসের ভাষার মতো বিভিন্ন ফ্যাক্টর অনুযায়ী প্রিভিউ আলাদা আলাদা হতে পারে। অতিরিক্ত সাজেশনের জন্য প্রিভিউ চেকলিস্ট দেখুন।
আপনার অ্যাপ ডেপ্লয় করুন এবং Tiles ক্যারোজেল-এ টাইল যোগ করুন (এছাড়াও, টাইল প্রিভিউ করার আরও ডেভেলপার-ফ্রেন্ডলি উপায় আছে, তবে এখন এটি ম্যানুয়ালি করুন)।
সম্পূর্ণ উদাহরণের জন্য, GitHub-এ কোড স্যাম্পেল বা কোডল্যাব দেখুন।
টাইলসের জন্য UI তৈরি করা
Material 3-এর এক্সপ্রেসিভ UI এলিমেন্ট একটি স্ট্রাকচারড অ্যাপ্রোচ ব্যবহার করে তৈরি করা হয় যা Kotlin-এর টাইপ-সেফ বিল্ডার প্যাটার্ন দ্বারা পরিচালিত হয়।
লেআউট
কার্যকর ও রেসপন্সিভ টাইল লেআউট তৈরি করার নেপথ্যে থাকা ডিজাইন সংক্রান্ত নীতি সম্পর্কে নির্দেশিকা পেতে, টাইল সংক্রান্ত সাধারণ লেআউট দেখুন।
আপনার লেআউট তৈরি করতে, নিম্নলিখিত কাজগুলি করুন:
মেটেরিয়াল ডিজাইন স্কোপ শুরু করা: প্রয়োজনীয়
contextওdeviceConfigurationপ্রদান করেmaterialScope()ফাংশন কল করুন। আপনিallowDynamicThemeএবংdefaultColorScheme-এর মতো ঐচ্ছিক প্যারামিটার যোগ করতে পারেন।allowDynamicThemeসাধারণতtrueথাকে এবংdefaultColorSchemeডাইনামিক কালার উপলভ্য না থাকলে—যেমন, ব্যবহারকারী ফিচারটি বন্ধ করে দিলে—অথবা ডিভাইসে কাজ না করলে বাallowDynamicThemefalseহলেColorSchemeব্যবহার করা হয়।স্কোপের মধ্যে UI তৈরি করুন: কোনও নির্দিষ্ট Tile লেআউটের জন্য সমস্ত 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() ) } ) }
স্লট
M3-তে, টাইলের লেআউট কম্পোজ-অনুপ্রাণিত পদ্ধতি ব্যবহার করে যা তিনটি আলাদা স্লট ব্যবহার করে। উপর থেকে নিচে পর্যন্ত, সেগুলি হল:
titleSlot, সাধারণত মূল শীর্ষক বা হেডার হিসেবে ব্যবহার করা হয়।- কোর কন্টেন্টের জন্য
mainSlot। bottomSlot, প্রায়শই অ্যাকশন বা অতিরিক্ত তথ্যের জন্য ব্যবহার করা হয়। এছাড়াও, এই জায়গাতেই এজ বোতাম দেখা যায়।
প্রতিটি স্লটের কন্টেন্ট নিচে দেওয়া হল:
titleSlot(ঐচ্ছিক): সাধারণতtext()-এর মাধ্যমে তৈরি করা কয়েকটি শব্দ।mainSlot(বাধ্যতামূলক): কম্পোনেন্টগুলি সারি, কলাম ও বোতামের গ্রুপ-এর মতো স্ট্রাকচারে সাজানো থাকে। এইসব কম্পোনেন্ট একে অপরের মধ্যে পুনরাবৃত্তিমূলকভাবে এম্বেড করা যেতে পারে; যেমন, একটি কলামের মধ্যে সারি থাকতে পারে।bottomSlot(ঐচ্ছিক): সাধারণত এজ-হাগিং বোতাম বা টেক্সট লেবেল দিয়ে পূরণ করা হয়।
টাইল স্ক্রল করা যায় না বলে, পেজিং, স্ক্রলিং বা কন্টেন্টের দীর্ঘ তালিকা ম্যানেজ করার জন্য কোনও কম্পোনেন্ট নেই। ফন্ট সাইজ বাড়লে বা অনুবাদের কারণে টেক্সট বড় হয়ে গেলেও কন্টেন্ট যেন দেখা যায়, তা নিশ্চিত করুন।
UI কম্পোনেন্ট
protolayout-material3 লাইব্রেরি, মেটেরিয়াল ৩ এক্সপ্রেসিভ স্পেসিফিকেশন ও ব্যবহারকারী
ইন্টারফেস সংক্রান্ত সাজেশন অনুযায়ী ডিজাইন করা অসংখ্য কম্পোনেন্ট
প্রদান করে।
বোতাম
বোতামগুলি মূলত অ্যাকশন-ভিত্তিক হয়। এগুলি নির্দিষ্ট অ্যাকশন ট্রিগার করার জন্য কাজ করে। আইকন বা ছোট টেক্সটের মতো প্রতিটি বোতামের কন্টেন্ট, অ্যাকশনকে শনাক্ত করে।
- textButton(): (ছোট) টেক্সট কন্টেন্টের জন্য একটি স্লট সহ বোতাম
- iconButton(): আইকন দেখানোর জন্য একটি স্লট সহ বোতাম
- avatarButton(): পিল-আকৃতির অবতার বোতাম যা কন্টেন্ট নেওয়ার জন্য সর্বাধিক তিনটি স্লট অফার করে। এর মধ্যে উল্লম্বভাবে স্ট্যাক করা লেবেল ও সেকেন্ডারি লেবেল এবং এর ঠিক পাশে একটি ছবি (অবতার) থাকে
- imageButton(): ক্লিক করা যায় এমন ছবি বোতাম যা অতিরিক্ত
স্লট অফার করে না, শুধুমাত্র ছবি (যেমন
backgroundImageব্যাকগ্রাউন্ড হিসেবে) - compactButton(): কম্প্যাক্ট বোতাম যা আইকন ও তার পাশে টেক্সট সহ অনুভূমিকভাবে স্ট্যাক করা কন্টেন্ট দেখানোর জন্য সর্বাধিক দুটি স্লট অফার করে
- button(): পিল শেপের বোতাম যা উল্লম্বভাবে স্ট্যাক করা লেবেল ও সেকেন্ডারি লেবেল এবং এর পাশে একটি আইকন সহ কন্টেন্ট নেওয়ার জন্য সর্বাধিক তিনটি স্লট অফার করে
এজ বোতাম
এজ বোতাম হল একটি বিশেষ ধরনের, সম্পূর্ণ-প্রস্থের বোতাম যা ওয়াচের গোলাকার স্ক্রিনের নিচের দিকে অ্যাঙ্কর করা থাকে। এটি বর্তমান টাইল স্ক্রিন থেকে নেওয়া সবচেয়ে গুরুত্বপূর্ণ অ্যাকশনকে প্রতিনিধিত্ব করে।
- iconEdgeButton(): প্রান্তের বোতাম যা আইকন বা একই ধরনের গোলাকার, ছোট কন্টেন্ট নেওয়ার জন্য একটি স্লট অফার করে
- textEdgeButton(): টেক্সট বা একই ধরনের লম্বা ও চওড়া কন্টেন্ট নেওয়ার জন্য একটি স্লট অফার করে এমন এজ বোতাম
কার্ড
কার্ডগুলি মূলত তথ্য-ভিত্তিক হয়। এগুলি সম্পর্কিত, স্ট্রাকচার্ড ডেটার সংগ্রহ দেখায়। আপনি ইন্টার্যাক্টিভ কার্ড তৈরি করতে পারলেও, সেগুলি সাধারণত তথ্যের সারসংক্ষেপ দেখায়, ব্যবহারকারী তারপরে আরও বিবরণ দেখতে বা সম্পর্কিত অ্যাকশন পারফর্ম করতে ট্যাপ করতে পারেন।
- titleCard(): টাইটেল কার্ড যাতে এক থেকে তিনটি স্লট থাকে, সাধারণত টেক্সট ভিত্তিক
- appCard(): অ্যাপ কার্ড যা সর্বাধিক পাঁচটি স্লট অফার করে, সাধারণত টেক্সট ভিত্তিক
- textDataCard(): ডেটা কার্ড যা সাধারণত টেক্সট বা সংখ্যা ভিত্তিক তিনটি পর্যন্ত উল্লম্বভাবে স্ট্যাক করা স্লট অফার করে
- iconDataCard(): আইকন সহ ডেটা কার্ড যা সাধারণত টেক্সট বা সংখ্যা ভিত্তিক, তিনটি পর্যন্ত উল্লম্বভাবে স্ট্যাক করা স্লট অফার করে
- graphicDataCard(): গ্রাফিক ডেটা কার্ড যা গ্রাফিক ডেটার জন্য একটি স্লট অফার করে, যেমন প্রগ্রেস ইন্ডিকেটর এবং সর্বাধিক দুটি উল্লম্বভাবে স্ট্যাক করা স্লট, সাধারণত টেক্সট বিবরণের জন্য
প্রগ্রেস ইন্ডিকেটর
- circularProgressIndicator(): কোনও রেডিয়াল এলিমেন্ট ব্যবহার করে কোনও লক্ষ্যের দিকে অগ্রগতি নির্দেশ করে
- segmentedCircularProgressIndicator(): স্বতন্ত্র ধাপ সহ রেডিয়াল এলিমেন্ট ব্যবহার করে লক্ষ্যের দিকে অগ্রগতি নির্দেশ করে
গ্রুপ লেআউট এলিমেন্ট
- buttonGroup(): কম্পোনেন্ট-লেআউট যা এর চাইল্ডদের অনুভূমিক সিকোয়েন্সে প্লেস করে
- primaryLayout(): একটি সাজেস্ট করা M3 লেআউট স্টাইলকে উপস্থাপন করে এমন ফুল স্ক্রিন লেআউট যা রেসপন্সিভ এবং এলিমেন্ট প্লেসমেন্টের খেয়াল রাখে, সাথে সাজেস্ট করা মার্জিন ও প্যাডিং প্রয়োগ করা হয়
থিম প্রয়োগ করা
Material 3 Expressive-এ, ২৯টি স্ট্যান্ডার্ড কালার রোলের মাধ্যমে কালার সিস্টেমকে সংজ্ঞায়িত করা হয়, যা ছয়টি গ্রুপে সাজানো হয়: প্রাথমিক, গৌণ, তৃতীয়, ত্রুটি, সারফেস এবং আউটলাইন।
ColorScheme প্রতিটি ২৯টি ভূমিকার জন্য একটি করে রঙ ম্যাপ করে এবং
যেহেতু এটি MaterialScope-এর অংশ এবং এর মধ্যেই কম্পোনেন্ট তৈরি করতে হবে,
তাই সেগুলি অটোমেটিক স্কিম থেকে রঙ নেয়। এই পদ্ধতিতে, সব UI
এলিমেন্ট অটোমেটিক Material Design স্ট্যান্ডার্ড মেনে চলে।
ব্যবহারকারীকে আপনার ব্র্যান্ডের রঙের মতো আপনার সংজ্ঞায়িত রঙের স্কিম এবং সিস্টেমের দেওয়া রঙের স্কিমের মধ্যে থেকে বেছে নিতে দিতে—ব্যবহারকারীর
বর্তমান ওয়াচফেস থেকে প্রাপ্ত বা ব্যবহারকারীর বেছে নেওয়া—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. }
আপনি এই বিকল্প বেছে নিলে, একটি মোনোক্রোম টাইল আইকন দিন যাতে যেকোনও থিমের বিপরীতে অপ্টিমাল ভিজিবিলিটির জন্য এটি সঠিকভাবে টিংট করা যায়।
আপনার দেওয়া কালার স্কিমেই টাইল দেখাতে বাধ্য করতে, allowDynamicTheme-কে false হিসেবে সেট করে ডায়নামিক থিমিংয়ের
জন্য সহায়তা বন্ধ করুন:
materialScope( context = context, deviceConfiguration = requestParams.deviceConfiguration, allowDynamicTheme = false, defaultColorScheme = myColorScheme ) { // myColorScheme is *always* used. }
রঙ
প্রতিটি স্বতন্ত্র কম্পোনেন্ট a
ColorScheme-এর দ্বারা নির্ধারিত ২৯টি কালার রোলের একটি সাবসেট ব্যবহার করে। যেমন, বোতামে সর্বাধিক চারটি রঙ ব্যবহার করা হয়, যা ডিফল্ট হিসেবে অ্যাক্টিভ ColorScheme-এর "প্রাথমিক" গ্রুপ থেকে
নেওয়া হয়:
ButtonColors কম্পোনেন্ট টোকেন |
ColorScheme ভূমিকা |
|---|---|
| containerColor | প্রাথমিক |
| iconColor | onPrimary |
| labelColor | onPrimary |
| secondaryLabelColor | onPrimary (অস্বচ্ছতা ০.৮) |
আপনার Wear OS ডিজাইনে রঙ প্রয়োগ করার ব্যাপারে বিস্তারিত নির্দেশিকা পেতে, রঙ ডিজাইন গাইড দেখুন।
নির্দিষ্ট UI
এলিমেন্টের জন্য আপনাকে ডিফল্ট কালার টোকেন থেকে সরে আসতে হতে পারে। যেমন, আপনি হয়তো চান যে একটি textEdgeButton "প্রাথমিক" গ্রুপের পরিবর্তে "সেকেন্ডারি" বা "টারশিয়ারি" গ্রুপ থেকে
রঙ ব্যবহার করুক, যাতে সেটি আলাদা করে
বোঝা যায় এবং আরও ভালো কনট্রাস্ট পাওয়া যায়।
আপনি বিভিন্ন উপায়ে কম্পোনেন্টের রঙ কাস্টমাইজ করতে পারবেন:
আগে থেকে নির্দিষ্ট করা রঙের জন্য হেল্পার ফাংশন ব্যবহার করুন। Material 3 Expressive-এর জন্য স্ট্যান্ডার্ড বোতাম স্টাইল প্রয়োগ করতে
filledTonalButtonColors()-এর মতো হেল্পার ফাংশন ব্যবহার করুন। এইসব ফাংশন আগে থেকে কনফিগার করাButtonColorsইনস্ট্যান্স তৈরি করে যা ফিল করা, টোনাল বা আউটলাইন করা সাধারণ স্টাইলকে অ্যাক্টিভColorScheme-এর মধ্যে থেকেMaterialScope-এর উপযুক্ত রোলের সাথে ম্যাপ করে। এর ফলে আপনি সাধারণ বোতামের ধরনের জন্য প্রতিটি রঙ ম্যানুয়ালি নির্ধারণ না করেই সামঞ্জস্যপূর্ণ স্টাইল প্রয়োগ করতে পারবেন।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.toInt().argb // Using a hex code for yellow ), // ... other parameters )
টাইপোগ্রাফি
আপনার ডিজাইনে টাইপোগ্রাফি কার্যকরভাবে ব্যবহার করা সম্পর্কে আরও তথ্য পেতে, টাইপোগ্রাফি ডিজাইন গাইড দেখুন।
Wear OS প্ল্যাটফর্ম জুড়ে ভিজ্যুয়াল ধারাবাহিকতা তৈরি করতে এবং পারফর্ম্যান্স অপ্টিমাইজ করতে, টাইলের সমস্ত টেক্সট সিস্টেম-প্রদত্ত ফন্ট ব্যবহার করে রেন্ডার করা হয়। অর্থাৎ, টাইলে কাস্টম টাইপফেস কাজ করে না। Wear OS 6 ও তার পরবর্তী যেকোনও ভার্সনে, এটি OEM-নির্দিষ্ট ফন্ট। বেশিরভাগ ক্ষেত্রে এটি পরিবর্তনযোগ্য ফন্ট হবে, যা আরও সাবলীল অভিজ্ঞতা ও আরও সূক্ষ্ম কন্ট্রোল প্রদান করে।
টেক্সট স্টাইল তৈরি করতে, আপনি সাধারণত টাইপোগ্রাফিক ধ্রুবক সহ text() পদ্ধতি
ব্যবহার করেন। এই কম্পোনেন্ট আপনাকে Material 3 Expressive-এ
আগে থেকে নির্দিষ্ট করা টাইপোগ্রাফি সংক্রান্ত ভূমিকা ব্যবহার করতে দেয়, যা আপনার টাইলকে
পঠনযোগ্যতা ও হায়ারার্কির জন্য প্রতিষ্ঠিত টাইপোগ্রাফিক পেশাদার পদ্ধতি মেনে চলতে সাহায্য করে।
লাইব্রেরিতে ১৮টি সিম্যান্টিক টাইপোগ্রাফি কনস্ট্যান্ট-এর একটি সেট আছে, যেমন
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: Arc-এর চারপাশে একটি বাঁকানো লাইন রেন্ডার করে।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()
স্প্যানেবল
Spannable হল এক বিশেষ ধরনের কন্টেনার যা টেক্সটের মতো একই ধরনের এলিমেন্ট
লেআউট করে। টেক্সটের বড় ব্লকে শুধুমাত্র একটি
সাবস্ট্রিংয়ে আলাদা স্টাইল প্রয়োগ করতে চাইলে এটি কাজে লাগে। এটি এমন কিছু যা
Text এলিমেন্টের মাধ্যমে সম্ভব নয়।
Span চাইল্ড এলিমেন্ট দিয়ে Spannable কন্টেনার ভর্তি করা হয়। অন্যান্য চাইল্ড বা
নেস্টেড Spannable ইনস্ট্যান্সের অনুমতি নেই।
Span শিশু দুই ধরনের হয়:
যেমন, আপনি "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()
রিসোর্স নিয়ে কাজ করা
টাইল আপনার অ্যাপের কোনও রিসোর্স অ্যাক্সেস করতে পারে না। এর অর্থ হল, আপনি 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() )
টাইল প্রিভিউ ইমেজ চেকলিস্ট
নতুন টাইল যোগ করার জন্য টাইল ক্যারোজেল এডিটরে, Android অ্যাপ ম্যানিফেস্টে রেফারেন্স করা টাইল প্রিভিউ ছবি সিস্টেম দেখায়। এই এডিটর Wear OS ডিভাইস ও ফোনে থাকা ওয়াচ কম্প্যানিয়ন অ্যাপ, দু'জায়গাতেই দেখা যায়।
এই প্রিভিউ ইমেজ থেকে ব্যবহারকারীরা যাতে সবচেয়ে বেশি সুবিধা পান, সেই জন্য আপনার টাইলের ব্যাপারে নিম্নলিখিত বিষয়গুলি যাচাই করুন:
- লেটেস্ট ডিজাইন দেখায়। প্রিভিউতে আপনার টাইলের সবচেয়ে সাম্প্রতিক ডিজাইন সঠিকভাবে দেখানো উচিত।
- সাজেস্ট করা ডাইমেনশন ব্যবহার করে। সম্ভাব্য সেরা ডিসপ্লে কোয়ালিটি এবং ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, প্রিভিউ ছবির ডাইমেনশন ৪০০px x ৪০০px হওয়া উচিত।
- স্ট্যাটিক কালার থিম ব্যবহার করে। টাইলের স্ট্যাটিক কালার থিম ব্যবহার করুন, কোনও ডায়নামিক থিম নয়।
- অ্যাপ আইকন অন্তর্ভুক্ত। প্রিভিউ ছবির সবচেয়ে উপরে আপনার অ্যাপের আইকন দেখা যাচ্ছে কিনা তা কনফার্ম করুন।
- লোড করা/লগ-ইন করা স্টেট দেখায়। প্রিভিউতে সম্পূর্ণভাবে কার্যকরী "লোড করা" বা "লগ-ইন করা" অবস্থা দেখাতে হবে, কোনও খালি বা প্লেসহোল্ডার কন্টেন্ট এড়িয়ে চলতে হবে।
- কাস্টমাইজেশনের জন্য রিসোর্স সংক্রান্ত সমস্যার সমাধান করার নিয়ম ব্যবহার করুন (ঐচ্ছিক)। ডিভাইসের ডিসপ্লে সাইজ, ভাষা বা লোকেল সেটিংসের সাথে মানানসই প্রিভিউ প্রদান করতে, Android-এর রিসোর্স রেজোলিউশন সংক্রান্ত নিয়ম ব্যবহার করার কথা বিবেচনা করুন। আপনার ডিভাইসে টাইল আলাদা আলাদা দেখতে লাগলে এটি বিশেষভাবে কাজে লাগে।