टाइल का इस्तेमाल शुरू करना

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

अपने ऐप्लिकेशन से टाइल उपलब्ध कराने के लिए, अपने ऐप्लिकेशन की 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")
}

वीडियो से जुड़े मुख्य कॉन्सेप्ट

टाइल, Android ऐप्लिकेशन की तरह नहीं बनाई जाती हैं. साथ ही, इनमें अलग-अलग कॉन्सेप्ट का इस्तेमाल किया जाता है:

• लेआउट टेंप्लेट: डिसप्ले पर विज़ुअल एलिमेंट के पूरे क्रम को तय करें. यह primaryLayout() फ़ंक्शन की मदद से किया जाता है.
• लेआउट एलिमेंट: इनका इस्तेमाल करके, किसी एक ग्राफ़िक एलिमेंट, जैसे कि बटन या कार्ड को दिखाया जा सकता है. इसके अलावा, कॉलम, buttonGroup या मिलते-जुलते एलिमेंट का इस्तेमाल करके, कई एलिमेंट को एक साथ ग्रुप भी किया जा सकता है. इन्हें लेआउट टेंप्लेट में एम्बेड किया जाता है.

• संसाधन: ResourceBuilders.Resources ऑब्जेक्ट में, Android संसाधनों (इमेज) के ऐसे की-वैल्यू पेयर का मैप होता है जिनकी ज़रूरत लेआउट को रेंडर करने के लिए होती है. साथ ही, इसमें एक वर्शन भी होता है.
• टाइमलाइन: TimelineBuilders.Timeline ऑब्जेक्ट, लेआउट ऑब्जेक्ट के एक या उससे ज़्यादा इंस्टेंस की सूची होती है. रेंडरर को किसी एक लेआउट ऑब्जेक्ट से दूसरे पर कब स्विच करना चाहिए, यह बताने के लिए कई तरह के तरीके और एक्सप्रेशन दिए जा सकते हैं. जैसे, किसी खास समय पर लेआउट दिखाना बंद करना.
• स्टेटस: StateBuilders.State टाइप का डेटा स्ट्रक्चर, जिसे टाइल और ऐप्लिकेशन के बीच पास किया जाता है, ताकि दोनों कॉम्पोनेंट एक-दूसरे से कम्यूनिकेट कर सकें. उदाहरण के लिए, अगर टाइल पर किसी बटन पर टैप किया जाता है, तो स्टेटस में बटन का आईडी सेव होता है. मैप का इस्तेमाल करके भी डेटा टाइप एक्सचेंज किए जा सकते हैं.
• टाइल: टाइल को दिखाने वाला TileBuilders.Tile ऑब्जेक्ट, जिसमें टाइमलाइन, रिसॉर्स वर्शन आईडी, अप-टू-डेट होने के अंतराल, और स्थिति शामिल होती है.
• Protolayout: यह शब्द, टाइल से जुड़ी अलग-अलग क्लास के नाम में दिखता है. यह Wear OS Protolayout लाइब्रेरी का रेफ़रंस देता है. यह एक ग्राफ़िक लाइब्रेरी है, जिसका इस्तेमाल 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

अनुमति और इंटेंट फ़िल्टर, इस सेवा को टाइल उपलब्ध कराने वाली सेवा के तौर पर रजिस्टर करते हैं.

जब उपयोगकर्ता अपने फ़ोन या स्मार्टवॉच पर टाइल कॉन्फ़िगर करते हैं, तब उन्हें आइकॉन, लेबल, ब्यौरा, और टाइल की झलक दिखाने वाला संसाधन दिखता है. ध्यान दें कि झलक दिखाने वाले संसाधन में, Android के सभी स्टैंडर्ड रिसॉर्स क्वालिफ़ायर काम करते हैं. इसलिए, स्क्रीन साइज़ और डिवाइस की भाषा जैसे फ़ैक्टर के हिसाब से, झलक में बदलाव किया जा सकता है. ज़्यादा सुझावों के लिए, झलक की चेकलिस्ट देखें.

अपना ऐप्लिकेशन डिप्लॉय करें और टाइल कैरसेल में टाइल जोड़ें. टाइल की झलक देखने का एक और तरीका है, जो डेवलपर के लिए ज़्यादा आसान है. हालांकि, फ़िलहाल इसे मैन्युअल तरीके से ही करें.

पूरा उदाहरण देखने के लिए, GitHub पर कोड का सैंपल या कोडलैब देखें.

टाइल के लिए यूज़र इंटरफ़ेस (यूआई) बनाना

Material 3 के एक्सप्रेशनिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट, स्ट्रक्चर्ड तरीके का इस्तेमाल करके बनाए जाते हैं. यह तरीका, Kotlin के टाइप-सेफ़ बिल्डर पैटर्न पर आधारित है.

लेआउट

अपना लेआउट बनाने के लिए, यह तरीका अपनाएं:

1. Material Design स्कोप शुरू करना: ज़रूरी context और deviceConfiguration को उपलब्ध कराकर, materialScope() फ़ंक्शन को कॉल करें. आपके पास allowDynamicTheme और defaultColorScheme जैसे वैकल्पिक पैरामीटर शामिल करने का विकल्प है. allowDynamicTheme डिफ़ॉल्ट रूप से true होता है और defaultColorScheme, ColorScheme को दिखाता है. इसका इस्तेमाल तब किया जाता है, जब डाइनैमिक रंग उपलब्ध न हों. जैसे, जब उपयोगकर्ता ने इस सुविधा को बंद कर दिया हो या डिवाइस पर यह सुविधा काम न करती हो या allowDynamicTheme false हो.

2. दायरे में अपना यूज़र इंटरफ़ेस (यूआई) बनाएं: किसी टाइल लेआउट के सभी यूआई कॉम्पोनेंट, एक टॉप लेवल 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(text = "Action".layoutString) }
       )
   }
   

कसीनो स्लॉट मशीन की नकल वाले गेम

M3 में, टाइल लेआउट में Compose से प्रेरित एक तरीके का इस्तेमाल किया जाता है. इसमें तीन अलग-अलग स्लॉट का इस्तेमाल किया जाता है. ऊपर से नीचे की ओर, ये हैं:

1. titleSlot, आम तौर पर मुख्य टाइटल या हेडर के लिए.
2. मुख्य कॉन्टेंट के लिए mainSlot.
3. bottomSlot का इस्तेमाल, अक्सर कार्रवाइयों या अतिरिक्त जानकारी के लिए किया जाता है. यहीं पर ऐज बटन भी दिखता है.

हर स्लॉट में ये कॉन्टेंट शामिल होते हैं:

• titleSlot (ज़रूरी नहीं): आम तौर पर, text() से जनरेट किए गए कुछ शब्द.
• mainSlot (ज़रूरी है): लाइन, कॉलम, और बटन ग्रुप जैसे स्ट्रक्चर में व्यवस्थित किए गए कॉम्पोनेंट. इन कॉम्पोनेंट को एक-दूसरे के अंदर बार-बार एम्बेड भी किया जा सकता है. उदाहरण के लिए, किसी कॉलम में पंक्तियां हो सकती हैं.
• bottomSlot (ज़रूरी नहीं): आम तौर पर, इसमें किनारे के हिसाब से साइज़ में बदलने वाला बटन या टेक्स्ट लेबल होता है.

टाइल को स्क्रोल नहीं किया जा सकता. इसलिए, पेजिंग, स्क्रोल करने या कॉन्टेंट की लंबी सूचियों को मैनेज करने के लिए कोई कॉम्पोनेंट नहीं है. ध्यान रखें कि अनुवाद की वजह से, फ़ॉन्ट का साइज़ बढ़ने या टेक्स्ट के लंबे होने पर भी कॉन्टेंट दिखता रहे.

यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट

protolayout-material3 लाइब्रेरी में, बड़ी संख्या में ऐसे कॉम्पोनेंट उपलब्ध हैं जिन्हें Material 3 एक्सप्रेशन की खास बातों और यूज़र इंटरफ़ेस के सुझावों के हिसाब से डिज़ाइन किया गया है.

बटन

• textButton(): टेक्स्ट कॉन्टेंट (छोटा) के लिए एक स्लॉट वाला बटन
• iconButton(): आइकॉन दिखाने के लिए एक स्लॉट वाला बटन
• avatarButton(): यह गोल आकार का अवतार बटन है. इसमें तीन स्लॉट होते हैं. इनमें वर्टिकल तौर पर स्टैक किए गए लेबल और सेकंडरी लेबल के साथ-साथ, उनके बगल में एक इमेज (अवतार) भी हो सकती है
• imageButton(): क्लिक किया जा सकने वाला इमेज बटन, जो अतिरिक्त स्लॉट नहीं देता. इसमें सिर्फ़ इमेज होती है. उदाहरण के लिए, बैकग्राउंड के तौर पर backgroundImage
• compactButton(): यह एक कॉम्पैक्ट बटन है, जिसमें आइकॉन और उसके बगल में टेक्स्ट के साथ, हॉरिज़ॉन्टल तौर पर स्टैक किए गए कॉन्टेंट के लिए दो स्लॉट होते हैं
• button(): यह गोल आकार का बटन है. इसमें वर्टिकल तौर पर स्टैक किए गए लेबल और सेकंडरी लेबल के साथ-साथ, उसके बगल में मौजूद आइकॉन को दिखाने के लिए, ज़्यादा से ज़्यादा तीन स्लॉट होते हैं

किनारे पर बटन

• iconEdgeButton(): एक स्लॉट वाला ऐज बटन, जिसमें आइकॉन या इसी तरह का छोटा और गोल कॉन्टेंट डाला जा सकता है
• textEdgeButton(): ऐसा किनारा बटन जिसमें टेक्स्ट या इसी तरह के लंबे और चौड़े कॉन्टेंट को डालने के लिए एक स्लॉट होता है

कार्ड

• titleCard(): एक से तीन स्लॉट वाला टाइटल कार्ड, आम तौर पर टेक्स्ट पर आधारित
• appCard(): ऐप्लिकेशन कार्ड, जिसमें ज़्यादा से ज़्यादा पांच स्लॉट होते हैं. आम तौर पर, ये स्लॉट टेक्स्ट पर आधारित होते हैं
• textDataCard(): डेटा कार्ड, जिसमें वर्टिकल तौर पर तीन स्लॉट होते हैं. आम तौर पर, ये स्लॉट टेक्स्ट या अंकों पर आधारित होते हैं
• iconDataCard(): यह एक ऐसा डेटा कार्ड है जिसमें वर्टिकल तौर पर स्टैक किए गए ज़्यादा से ज़्यादा तीन स्लॉट होते हैं. आम तौर पर, ये स्लॉट आइकॉन के साथ टेक्स्ट या अंकों पर आधारित होते हैं
• graphicDataCard(): ग्राफ़िक डेटा कार्ड, जिसमें ग्राफ़िक डेटा के लिए एक स्लॉट होता है. जैसे, प्रोग्रेस इंडिकेटर. साथ ही, इसमें वर्टिकल तौर पर दो स्लॉट होते हैं, जिनमें आम तौर पर टेक्स्ट की जानकारी होती है

प्रोग्रेस इंडिकेटर

• circularProgressIndicator(): रेडियल एलिमेंट का इस्तेमाल करके, किसी लक्ष्य की प्रोग्रेस दिखाता है
• segmentedCircularProgressIndicator(): अलग-अलग चरणों वाले रेडियल एलिमेंट का इस्तेमाल करके, किसी लक्ष्य की प्रोग्रेस दिखाता है

लेआउट एलिमेंट को ग्रुप करना

• buttonGroup(): यह एक ऐसा कॉम्पोनेंट-लेआउट है जो अपने चाइल्ड को हॉरिज़ॉन्टल क्रम में रखता है
• primaryLayout(): फ़ुल स्क्रीन लेआउट, जो सुझाए गए M3 लेआउट स्टाइल को दिखाता है. यह रिस्पॉन्सिव होता है और एलिमेंट के प्लेसमेंट का ध्यान रखता है. साथ ही, सुझाए गए मार्जिन और पैडिंग लागू करता है

थीम बनाई जा रही है

Material 3 Expressive में, कलर सिस्टम को 29 स्टैंडर्ड कलर रोल के हिसाब से तय किया गया है. इन्हें छह ग्रुप में बांटा गया है: प्राइमरी, सेकंडरी, टियररी, गड़बड़ी, सर्फ़ेस, और आउटलाइन.

ColorScheme, इन 29 भूमिकाओं में से हर भूमिका को उससे जुड़े रंग से मैप करता है. साथ ही, यह MaterialScope का हिस्सा है और इसके अंदर कॉम्पोनेंट बनाने ज़रूरी हैं. इसलिए, ये स्कीम से अपने-आप रंग लेते हैं. इस तरीके से, सभी यूज़र इंटरफ़ेस (यूआई) एलिमेंट, Material Design के स्टैंडर्ड का अपने-आप पालन करते हैं.

उपयोगकर्ताओं को आपके तय किए गए रंगों के पैलेट और सिस्टम के उपलब्ध कराए गए रंगों के पैलेट में से किसी एक को चुनने की सुविधा देने के लिए, 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 के "प्राइमरी" ग्रुप से लिए जाते हैं:

आपको कुछ यूज़र इंटरफ़ेस एलिमेंट के लिए, डिफ़ॉल्ट कलर टोकन से अलग रंग चुनने पड़ सकते हैं. उदाहरण के लिए, हो सकता है कि आप किसी textEdgeButton के लिए "प्राइमरी" के बजाय, "सेकंडरी" या "टertiary" ग्रुप के रंगों का इस्तेमाल करना चाहें, ताकि वह अलग दिखे और बेहतर कंट्रास्ट दे.

कॉम्पोनेंट के रंगों को कई तरीकों से पसंद के मुताबिक बनाया जा सकता है:

1. पहले से तय किए गए रंगों के लिए, हेल्पर फ़ंक्शन का इस्तेमाल करें. Material 3 Expressive के लिए स्टैंडर्ड बटन स्टाइल लागू करने के लिए, 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
   )
   

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
   )
   

3. पहले से तय रंगों का इस्तेमाल करें (सावधानी से इस्तेमाल करें). आम तौर पर, रंगों को उनकी सेमेटिक भूमिका के हिसाब से तय करने का सुझाव दिया जाता है. उदाहरण के लिए, 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() तरीके का इस्तेमाल किया जाता है. इस कॉम्पोनेंट की मदद से, Material 3 Expressive में पहले से तय टाइपोग्राफ़ी की भूमिकाओं का इस्तेमाल किया जा सकता है. इससे आपकी टाइल को पढ़ने और क्रम से लगाने के लिए, टाइपोग्राफ़ी के सबसे सही तरीकों का पालन करने में मदद मिलती है. लाइब्रेरी में 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: टेक्स्ट के साथ-साथ इमेज को रेंडर करता है.

उदाहरण के लिए, "Hello world" टाइल में "world" को इटैलिक में लिखा जा सकता है और शब्दों के बीच इमेज डाली जा सकती है, जैसा कि नीचे दिए गए कोड सैंपल में दिखाया गया है:

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 लेआउट एलिमेंट में Android इमेज आईडी को पास नहीं किया जा सकता और उम्मीद नहीं की जा सकती कि वह ठीक हो जाएगा. इसके बजाय, 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 के रिसॉर्स रिज़ॉल्यूशन के नियमों का इस्तेमाल करें. यह सुविधा तब खास तौर पर मददगार होती है, जब आपके टाइल का रंग-रूप अलग-अलग डिवाइसों पर अलग-अलग दिखता है.