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

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

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

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

विजेट के टाइप

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

विजेट को 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 विजेट, कॉन्फ़िगरेशन के विकल्प तब दिखाते हैं, जब उपयोगकर्ता विजेट को होम स्क्रीन पर छोड़ता है.

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

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