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

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

इस दस्तावेज़ में, अलग-अलग तरह के विजेट बनाने और डिज़ाइन के सिद्धांतों के बारे में बताया गया है. रिमोट व्यू एपीआई और एक्सएमएल लेआउट का इस्तेमाल करके ऐप्लिकेशन विजेट बनाने के लिए, एक आसान विजेट बनाएं लेख पढ़ें. 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 12 से, साइज़ के बेहतर एट्रिब्यूट और ज़्यादा सुविधाजनक लेआउट दिए जा सकते हैं. इसमें ये चीज़ें शामिल हैं:
    • विजेट के साइज़ से जुड़ी पाबंदियां तय करना. उदाहरण के लिए, आपके पास अपने विजेट के लिए टारगेट साइज़ तय करने का विकल्प होता है. यह साइज़, ग्रिड सेल में तय किया जाता है. साथ ही, विजेट का ज़्यादा से ज़्यादा साइज़ भी तय किया जा सकता है.
    • रिस्पॉन्सिव लेआउट उपलब्ध कराना, जो विजेट के साइज़ के हिसाब से बदलते हैं.
    • सटीक साइज़ वाले लेआउट उपलब्ध कराएं. इनकी मदद से, फ़ोन के लिए पोर्ट्रेट और लैंडस्केप मोड में, स्क्रीन के साइज़ के विकल्पों के साथ लॉन्चर को जवाब दिया जा सकता है. इसके अलावा, फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, चार साइज़ के विकल्पों के साथ जवाब दिया जा सकता है.
    • अपने विजेट के लिए सही साइज़ तय करने के लिए, अपडेट किए गए दिशा-निर्देशों और नए एपीआई का इस्तेमाल करें.

उपयोगकर्ताओं के हिसाब से विजेट कॉन्फ़िगरेशन

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

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

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