ऐप्लिकेशन विजेट की खास जानकारी

Compose को आज़माएं
Jetpack Compose, Android के लिए यूज़र इंटरफ़ेस (यूआई) का सुझाया गया टूलकिट है. Compose-स्टाइल वाले एपीआई का इस्तेमाल करके, विजेट बनाने का तरीका जानें.

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

इस दस्तावेज़ में, अलग-अलग तरह के उन विजेट के बारे में बताया गया है जिन्हें बनाया जा सकता है. साथ ही, इसमें डिज़ाइन के सिद्धांतों के बारे में भी बताया गया है जिनका पालन करना ज़रूरी है. Remote View API और XML लेआउट का इस्तेमाल करके, ऐप्लिकेशन विजेट बनाने के लिए, सामान्य विजेट बनाना लेख पढ़ें. Kotlin और Compose-स्टाइल वाले एपीआई का इस्तेमाल करके, विजेट बनाने के लिए, Jetpack Glance लेख पढ़ें.

विजेट के टाइप

अपने विजेट की योजना बनाते समय, सोचें कि आपको किस तरह का विजेट बनाना है. विजेट आम तौर पर, इनमें से किसी एक कैटगरी में आते हैं:

जानकारी देने वाले विजेट

मौसम की जानकारी देने वाले विजेट का उदाहरण. इसमें टोक्यो में ज़्यादातर बादल छाए होने की जानकारी दी गई है. साथ ही, तापमान 14 डिग्री सेल्सियस बताया गया है. इसके अलावा, शाम 4 बजे से शाम 7 बजे तक के तापमान का अनुमान दिखाया गया है
पहली इमेज. मौसम की जानकारी देने वाले ऐप्लिकेशन का एक विजेट.

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

कलेक्शन विजेट

कलेक्शन विजेट, एक ही तरह के कई एलिमेंट दिखाने में माहिर होते हैं. जैसे, गैलरी ऐप्लिकेशन से ली गई तस्वीरों का कलेक्शन, खबरों के ऐप्लिकेशन से लिए गए लेखों का कलेक्शन या बातचीत करने वाले ऐप्लिकेशन से लिए गए ईमेल या मैसेज का कलेक्शन. कलेक्शन विजेट को वर्टिकल तौर पर स्क्रोल किया जा सकता है.

कलेक्शन विजेट आम तौर पर, इन सेवाओं पर फ़ोकस करते हैं:

  • कलेक्शन ब्राउज़ करना.
  • कलेक्शन के किसी एलिमेंट को उससे जुड़े ऐप्लिकेशन में, ज़्यादा जानकारी वाले व्यू में खोलना.
  • एलिमेंट के साथ इंटरैक्ट करना. जैसे, उन्हें 'पूरा हो गया' के तौर पर मार्क करना. इसके लिए, Android 12 (एपीआई लेवल 31) में, एक साथ कई बटन इस्तेमाल करने की सुविधा उपलब्ध है.

कंट्रोल विजेट

'लाइट लिस्ट' नाम के ऐप्लिकेशन का विजेट. इसमें टॉगल स्विच दिखाए गए हैं. इन पर 'बेडरूम', 'किचन', और 'लिविंग रूम' लिखा है. पहले दो टॉगल स्विच बंद हैं
चौथी इमेज. कंट्रोल विजेट का उदाहरण.

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

कंट्रोल विजेट के साथ इंटरैक्ट करने पर, ऐप्लिकेशन में उससे जुड़ा ज़्यादा जानकारी वाला व्यू खुल सकता है. यह इस बात पर निर्भर करता है कि कंट्रोल विजेट का फ़ंक्शन कोई डेटा आउटपुट करता है या नहीं. जैसे, खोज विजेट के मामले में.

हाइब्रिड विजेट

इस इमेज में, एक सामान्य संगीत ऐप्लिकेशन दिखाया गया है. इसमें 'नापसंद करें,' पीछे जाएं, चलाएं/रोकें, आगे जाएं, और 'पसंद करें' बटन दिख रहे हैं. कलाकार और ट्रैक को क्रमशः 'कलाकार' और 'संगीत का उदाहरण' के तौर पर दिखाया गया है.
पांचवी इमेज. म्यूज़िक ऐप्लिकेशन के विजेट का उदाहरण.

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

अपने विजेट की योजना बनाते समय, किसी एक बेस टाइप के हिसाब से डिज़ाइन करें. साथ ही, ज़रूरत के हिसाब से अन्य टाइप के एलिमेंट जोड़ें.

विजेट को Google Assistant के साथ इंटिग्रेट करना

उपयोगकर्ता के बोलकर दिए गए निर्देशों के जवाब में, Google Assistant किसी भी टाइप का विजेट दिखा सकता है. अपने विजेट को ऐप्लिकेशन ऐक्शन पूरा करने के लिए कॉन्फ़िगर किया जा सकता है. इससे उपयोगकर्ताओं को Android और Android Auto जैसे Assistant के प्लैटफ़ॉर्म पर, तुरंत जवाब और इंटरैक्टिव ऐप्लिकेशन अनुभव मिल सकते हैं. Assistant के लिए विजेट पूरा करने के बारे में ज़्यादा जानने के लिए, Android विजेट के साथ ऐप्लिकेशन ऐक्शन इंटिग्रेट करना लेख पढ़ें.

विजेट इस्तेमाल करने की सीमाएं

विजेट को "मिनी ऐप्लिकेशन" के तौर पर समझा जा सकता है. हालांकि, कुछ सीमाएं हैं. अपने विजेट को डिज़ाइन करने से पहले, इनके बारे में जानना ज़रूरी है.

हाथ के जेस्चर

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

विजेट के लिए, सिर्फ़ टच और वर्टिकल स्वाइप जेस्चर उपलब्ध हैं.

एलिमेंट

विजेट के लिए उपलब्ध जेस्चर की सीमाओं को देखते हुए, यूज़र इंटरफ़ेस (यूआई) के कुछ ऐसे बिल्डिंग ब्लॉक विजेट के लिए उपलब्ध नहीं हैं जो सीमित जेस्चर पर निर्भर करते हैं. सपोर्ट किए गए बिल्डिंग ब्लॉक की पूरी सूची और लेआउट से जुड़े प्रतिबंधों के बारे में ज़्यादा जानने के लिए, देखें विजेट का लेआउट बनाना और विजेट के फ़्लेक्सिबल लेआउट उपलब्ध कराना.

डिज़ाइन के दिशा-निर्देश

विजेट का कॉन्टेंट

विजेट, आपके ऐप्लिकेशन में उपलब्ध नए और दिलचस्प कॉन्टेंट का "विज्ञापन" करके, उपयोगकर्ता को अपने ऐप्लिकेशन की ओर आकर्षित करने का एक बेहतरीन तरीका है.

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

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

विजेट पर नेविगेशन लिंक के लिए, ये विकल्प सही हैं:

  • जनरेटिव फ़ंक्शन: ये ऐसे फ़ंक्शन होते हैं जिनकी मदद से उपयोगकर्ता, किसी ऐप्लिकेशन के लिए नया कॉन्टेंट बना सकता है. जैसे, नया दस्तावेज़ या नया मैसेज बनाना.

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

विजेट का साइज़ बदलना

Google Clock का स्टैंडर्ड विजेट
छठी इमेज. Google Clock का स्टैंडर्ड विजेट.

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

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

उपयोगकर्ताओं को विजेट का साइज़ बदलने की अनुमति देने के कई फ़ायदे हैं:

  • वे हर विजेट पर, अपनी पसंद के हिसाब से जानकारी देख सकते हैं.
  • वे अपने होम पैनल पर विजेट और शॉर्टकट के लेआउट को बेहतर तरीके से मैनेज कर सकते हैं.

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

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

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

सबसे छोटे 3x2-ग्रिड साइज़ में मौसम की जानकारी देने वाला विजेट. इसमें जगह का नाम (टोक्यो), तापमान (14°), और आंशिक रूप से बादल छाए होने का सिंबल दिखाया गया है
सातवीं इमेज. मौसम की जानकारी देने वाले विजेट का उदाहरण. इसका साइज़ 3x2-ग्रिड 'छोटा' है.


5x2 'मीडियम' साइज़ में मौसम की जानकारी देने वाले विजेट का उदाहरण. इसमें 3x2-ग्रिड साइज़ के सभी यूज़र इंटरफ़ेस (यूआई) के साथ-साथ, 'ज़्यादातर बादल छाए रहेंगे' लेबल और शाम 4 बजे से शाम 7 बजे तक के तापमान का पूर्वानुमान शामिल है
आठवीं इमेज. मौसम की जानकारी देने वाले विजेट का उदाहरण. इसका साइज़ 5x2-ग्रिड 'मीडियम' है.


5x4 'बड़ा' साइज़ वाला मौसम का विजेट. इसमें 3x2 और 5x2 ग्रिड साइज़ के सभी यूज़र इंटरफ़ेस (यूआई) के साथ-साथ, मंगलवार से शुक्रवार तक के मौसम का पूर्वानुमान भी शामिल है
नौवीं इमेज. मौसम की जानकारी देने वाले विजेट का उदाहरण. इसका साइज़ 5x4-ग्रिड 'बड़ा' है.

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

लेआउट से जुड़ी ज़रूरी बातें

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

उपयोगकर्ताओं के लिए विजेट कॉन्फ़िगर करने की सुविधा

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

विजेट डिज़ाइन करने की चेकलिस्ट

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