कैननिकल विजेट लेआउट

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

टेक्स्ट

टेक्स्ट लेआउट, कम शब्दों में जानकारी दिखाने के लिए सबसे सही होते हैं. टेक्स्ट के साथ इमेज शामिल करके, अपने विजेट को ज़्यादा आकर्षक बनाएं.

सिर्फ़ टेक्स्ट

यह टाइटल, स्टेटस अपडेट, छोटे ब्यौरे या किसी भी ऐसे मामले के लिए सबसे सही है जहां टेक्स्ट की एक लाइन से ही मैसेज को असरदार तरीके से पहुंचाया जा सकता है.

टेक्स्ट और इमेज

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

टूलबार

टूलबार लेआउट का इस्तेमाल करें, ताकि उपयोगकर्ताओं को आपके ऐप्लिकेशन में अक्सर इस्तेमाल किए जाने वाले टास्क को तुरंत ऐक्सेस करने की सुविधा मिल सके. इसके लिए, ऐसे फ़्लेक्सिबल लेआउट का इस्तेमाल करें जो विजेट के साइज़ के हिसाब से अडजस्ट हो जाए.

Search Toolbar

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

टूलबार

टूलबार में ऐप्लिकेशन की ब्रैंडिंग मौजूद होती है. इसके बाद, सबसे ज़्यादा इस्तेमाल किए जाने वाले टास्क के बटन होते हैं. ये बटन, टॉगल की जा सकने वाली सेटिंग या टास्क के लिंक के लिए सही होते हैं. रीसाइज़ करते समय, ज़्यादातर इस्तेमाल होने वाले विकल्पों को दिखाने के लिए, कम इस्तेमाल होने वाले विकल्पों को छिपाया जा सकता है. जगह होने पर, कम से कम 48 डीपी का नया टैप किया जा सकने वाला बटन जोड़ने के लिए, ब्रेकपॉइंट का इस्तेमाल करें.

सूचियां

सूची वाले लेआउट का इस्तेमाल करके, कई आइटम को साफ़ तौर पर और आसानी से स्कैन किए जा सकने वाले फ़ॉर्मैट में व्यवस्थित करें. यह मोड, खबरों की हेडलाइन, कामों की सूची या मैसेज के लिए सबसे सही है. कॉन्टेंट को व्यवस्थित और आसानी से पढ़ी जा सकने वाली सूची में व्यवस्थित करें. अपने कॉन्टेंट की ज़रूरतों के हिसाब से, कंटेनर वाले या कंटेनर के बिना प्रज़ेंटेशन में से कोई एक चुनें.

टेक्स्ट और इमेज की सूची

स्कैन किए जा सकने वाले टेक्स्ट और इमेज की सूचियां, कई तरह के कॉन्टेंट को दिखाने के लिए सबसे सही होती हैं. जैसे, खबरों की हेडलाइन, एल्बम आर्ट वाली प्लेलिस्ट या मैसेज.

चेकलिस्ट

चेकलिस्ट लेआउट, टास्क दिखाने के लिए सबसे सही है. इससे लोगों को टैप करने के लिए साफ़ तौर पर टारगेट मिलते हैं, ताकि वे आइटम को 'हो गया' के तौर पर तुरंत मार्क कर सकें.

कार्रवाई की सूची

टास्क की सूचियों के साथ कंट्रोल ग्रुपिंग की सुविधा मिलती है. इससे आइटम की स्थिति के बारे में तुरंत जानकारी मिलती है. साथ ही, विज़ुअल को चालू या बंद किया जा सकता है.

फ़ुल ब्लीड इमेज

यह लेआउट, Android 17 और इसके बाद के वर्शन पर, पूरी स्क्रीन पर दिखने वाली इमेज दिखाने के लिए सबसे सही है. इसमें स्नैप स्क्रोलिंग का इस्तेमाल किया जाता है, ताकि हर चाइल्ड एलिमेंट, विजेट कंटेनर की ऊंचाई के साथ पूरी तरह से अलाइन हो सके.

ग्रिड

इमेज को छोटे, ज़रूरत के हिसाब से बदलने वाले, और विज़ुअल तौर पर बेहतर ग्रिड में दिखाएं. साथ ही, लेबल जोड़ने का विकल्प भी दें. ऐसे कॉलम और लाइनों का इस्तेमाल करें जो अलग-अलग स्क्रीन साइज़ के हिसाब से अपने-आप अडजस्ट हो जाती हैं.

सिर्फ़ इमेज

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

इमेज और टेक्स्ट

टेक्स्ट लेबल और ब्यौरे भी शामिल किए जा सकते हैं. इससे, इमेज ग्रिड के कॉन्टेंट में ज़्यादा जानकारी और संदर्भ जोड़ा जा सकता है.

कोड सैंपल

यहां दी गई टेबल में, हर कैननिकल लेआउट को Android Platform Samples GitHub repository में मौजूद, उससे जुड़े Jetpack Glance के साथ मैप किया गया है.

कैननिकल लेआउट रेफ़रंस फ़ाइलें दिशा-निर्देश
ऐक्शन की सूची का लेआउट
  • Glance ऐक्शन कॉलबैक की मदद से, सूची के आइटम की कार्रवाइयों को मैनेज करें. साथ ही, यह पक्का करें कि स्थिति सही तरीके से अपडेट हो.
चेक लिस्ट का लेआउट
  • ऐक्शन पैरामीटर या कॉलबैक का इस्तेमाल करके, चेकबॉक्स की स्थिति को टॉगल करने की सुविधा लागू करें. इससे कलेक्शन आइटम अपडेट किए जा सकेंगे.
  • विजेट के `onClick` पैरामीटर के लिए, Glance ऐक्शन कॉलबैक का इस्तेमाल करें. जैसे, `actionRunCallback`, `ActionCallback(actionParametersOf(...))` या `actionStartActivity(...)`. इससे चेकबॉक्स पर टैप करने जैसे क्लिक इवेंट को मैनेज किया जा सकता है.
इमोशन दिखाने वाले टूलबार का लेआउट
  • `ColorProvider` इंपोर्ट करने से जुड़ी गड़बड़ियों से बचें: `androidx.glance.unit.ColorProvider` इंपोर्ट करें और `androidx.glance.color.ColorProvider(dayColor, nightColor)` का इस्तेमाल करें.
  • ठोस बैकग्राउंड के रंगों के लिए, `ColorProvider` के बजाय सीधे तौर पर `GlanceModifier.background(Color)` का इस्तेमाल करें.
इमेज ग्रिड लेआउट
  • इमेज आइटम के लिए, एक जैसे रंग (`GlanceModifier.background`) या लोकल ड्रॉएबल का इस्तेमाल करें. ऐसा तब तक करें, जब तक इमेज लोड करने वाली लाइब्रेरी कॉन्फ़िगर न हो जाए या उसके लिए अनुरोध न किया जाए.
इमेज और टेक्स्ट की सूची वाला लेआउट
  • इस्तेमाल के सामान्य उदाहरण: न्यूज़ फ़ीड, लेखों की सूचियां, कसरत का इतिहास, मैसेज फ़ीड, और वर्टिकल थंबनेल की सूचियां.
  • थंबनेल इमेज को प्राइमरी/सेकंडरी टेक्स्ट के साथ जोड़ते समय, सूची की लाइन की ऊंचाई और टेक्स्ट के कटने की समस्या को ठीक करें.
लंबे टेक्स्ट वाला लेआउट
  • अगर आपको `Dp` वैल्यू को गुणा करना है, जैसे कि `2 * padding`, तो `androidx.compose.ui.unit.times` को इंपोर्ट करें.
  • साइज़िंग के नियमों का पालन करें: पक्का करें कि `dimens.xml` से मिले डाइमेंशन का इस्तेमाल, पैडिंग और टाइपोग्राफ़ी स्केलिंग के लिए किया गया हो.
Search Toolbar Layout
  • `ColorProvider` इंपोर्ट करने से जुड़ी गड़बड़ियों से बचें: `androidx.glance.unit.ColorProvider` इंपोर्ट करें और `androidx.glance.color.ColorProvider(dayColor, nightColor)` का इस्तेमाल करें.
  • ColorProvider के बजाय, सॉलिड बैकग्राउंड के रंगों के लिए सीधे तौर पर `GlanceModifier.background(Color)` का इस्तेमाल करें.
फ़ुल-ब्लीड इमेज लेआउट / स्नैप स्क्रोलिंग
  • स्नैप स्क्रोलिंग के लिए, LazyColumn पर `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` सेट करें.
  • स्नैप स्क्रोलिंग की सुविधा लागू करने के लिए, Glance 1.3.0-alpha02 या इसके बाद का वर्शन, कंपाइल SDK 37 (Baklava) या इसके बाद का वर्शन, और Android Gradle प्लगिन (AGP) 9.1.0 या इसके बाद का वर्शन होना ज़रूरी है.
  • विजेट प्रोवाइडर क्लास में, `override val sizeMode: SizeMode = SizeMode.Exact` सेट करें.
स्टैंडर्ड टूलबार लेआउट
  • `ColorProvider` इंपोर्ट करने से जुड़ी गड़बड़ियों से बचने के लिए, समस्या हल करने का तरीका देखें: `androidx.glance.color.ColorProvider(dayColor, nightColor)` का इस्तेमाल करें.
  • ठोस बैकग्राउंड के रंगों के लिए, `ColorProvider` के बजाय सीधे तौर पर `GlanceModifier.background(Color)` का इस्तेमाल करें.
इमेज लेआउट के साथ टेक्स्ट
  • रिस्पॉन्सिव लेआउट के साइज़ से जुड़े नियमों का पालन करें, ताकि उपलब्ध विजेट के डाइमेंशन के आधार पर टेक्स्ट और इमेज को अगल-बगल या एक के ऊपर एक रखा जा सके.