अलग-अलग स्क्रीन साइज़ के लिए टाइल बनाएं

आपके ऐप्लिकेशन की टाइल, Wear OS डिवाइसों के सभी साइज़ पर अच्छी तरह से काम करनी चाहिए. साथ ही, जहां भी ज़्यादा जगह उपलब्ध हो, वहां अतिरिक्त जगह का फ़ायदा उठाना चाहिए. इसके बावजूद, ये टाइल छोटी स्क्रीन पर भी अच्छी दिखनी चाहिए. इस गाइड में, उपयोगकर्ताओं को बेहतर अनुभव देने के सुझाव दिए गए हैं.

अडैप्टिव लेआउट के डिज़ाइन के सिद्धांतों के बारे में ज़्यादा जानने के लिए, डिज़ाइन से जुड़े दिशा-निर्देश पढ़ें.

ProtoLayout का इस्तेमाल करके रिस्पॉन्सिव लेआउट बनाना

ProtoLayout Material लाइब्रेरी में पहले से तय लेआउट मौजूद होते हैं. इनकी मदद से, टाइल बनाई जा सकती हैं. ये लेआउट, स्क्रीन के साइज़ के हिसाब से पहले से डिज़ाइन किए गए होते हैं.

Figma डिज़ाइन लेआउट देखें. इनमें, कैननिकल लेआउट और उनका इस्तेमाल करके डिज़ाइन बनाने का तरीका बताया गया है:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

हमारा सुझाव है कि ज़्यादातर इस्तेमाल के उदाहरणों के लिए, टॉप लेवल लेआउट के तौर पर PrimaryLayout या EdgeContentLayout का इस्तेमाल करें. setResponsiveContentInsetEnabled का इस्तेमाल करके, रिस्पॉन्सिव व्यवहार सेट करें. उदाहरण के लिए:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

ब्रेकपॉइंट की मदद से अलग-अलग अनुभव देना

ProtoLayout Material लाइब्रेरी के लेआउट पहले से ही रिस्पॉन्सिव होते हैं. साथ ही, इनमें एलिमेंट को सही जगह पर रखने और उसे दिखाने का ध्यान रखा जाता है. हालांकि, कुछ मामलों में बेहतर नतीजों के लिए, दिखने वाले एलिमेंट की संख्या में बदलाव किया जा सकता है. उदाहरण के लिए, हो सकता है कि आपको छोटी स्क्रीन पर तीन बटन और बड़ी स्क्रीन पर पांच बटन चाहिए हों.

अलग-अलग तरह के अनुभव देने के लिए, स्क्रीन साइज़ के ब्रेकपॉइंट का इस्तेमाल करें. स्क्रीन का साइज़ 225 dp से ज़्यादा होने पर, दूसरा लेआउट दिखाने के लिए:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

डिज़ाइन से जुड़े दिशा-निर्देश में अतिरिक्त अवसरों के बारे में बताया गया है.

झलक की सुविधा का इस्तेमाल करके, अलग-अलग स्क्रीन साइज़ पर टाइल की जांच करना

अपने लेआउट को अलग-अलग स्क्रीन साइज़ पर टेस्ट करना ज़रूरी है. TilePreviewHelper और TilePreviewData क्लास के साथ, टाइल की झलक वाले एनोटेशन का इस्तेमाल करें:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

इससे, Android Studio में टाइल लेआउट की झलक देखी जा सकती है. पिछले ब्रेकपॉइंट के उदाहरण में, यह दिखाया गया है कि झलक दिखाने के दौरान स्क्रीन स्पेस की अनुमति होने पर, अतिरिक्त बटन कैसे दिखाए जाते हैं:

पूरा उदाहरण देखने के लिए, GitHub पर मीडिया टाइल का सैंपल देखें.