अडैप्टिव डिज़ाइन, लेआउट को डिज़ाइन करने का एक तरीका है. इसमें लेआउट को खास ब्रेकपॉइंट और डिवाइसों के हिसाब से अडजस्ट किया जाता है.
अडैप्टिव लेआउट को असरदार तरीके से लागू करने के लिए:
सबसे पहले, लेआउट में बदलाव करने के लिए, डिवाइस की विंडो क्लास की चौड़ाई पर विचार करें. इसके बाद, लंबाई को अडजस्ट करें. अलग-अलग स्क्रीन साइज़ के साथ काम करना.
Android, वेब डेवलपमेंट की तरह ही रिस्पॉन्सिव डिज़ाइन के कॉन्सेप्ट का इस्तेमाल करता है. इसमें फ़्लेक्सिबल ग्रिड और इमेज का इस्तेमाल करके ऐसे लेआउट बनाए जाते हैं जो अपने कॉन्टेक्स्ट के हिसाब से बेहतर तरीके से काम करते हैं.
लेआउट को अडैप्टिव तरीकों से अलग-अलग साइज़ के हिसाब से अडजस्ट होने दें: रीफ़्लो, डिसप्ले, प्रज़ेंटेशन में बदलाव.
अपने ऐप्लिकेशन को सिर्फ़ पोर्ट्रेट मोड में लॉक न करें. इससे आपके ऐप्लिकेशन का साइज़ बदलने पर लेटरबॉक्सिंग होती है.
ऐसा न करें
बड़ी स्क्रीन के हिसाब से लेआउट को अडजस्ट करने के बारे में डिज़ाइन से जुड़े दिशा-निर्देशों के लिए, Compose में अलग-अलग स्क्रीन साइज़ के साथ काम करना डेवलपर गाइड और M3 में लेआउट लागू करना पेज पढ़ें. बड़ी स्क्रीन के लेआउट के लिए प्रेरणा पाने और उन्हें लागू करने के लिए, Android की बड़ी स्क्रीन वाली कैननिकल गैलरी भी देखी जा सकती है.
अडैप्टिव तरीके से सोचें
ऐप्लिकेशन डिज़ाइन करते समय, अडैप्टिव को डिफ़ॉल्ट तौर पर सेट किया जाना चाहिए. Android मोबाइल मार्केट लगातार बदल रहा है. इसलिए, आपको सिर्फ़ हैंडसेट फ़ोन के बारे में नहीं सोचना चाहिए. इसके बजाय, इसमें हैंडसेट फ़ोन, फ़ोल्डेबल फ़ोन, टैबलेट, और इनके बीच के सभी डिवाइस शामिल होने चाहिए.
हालांकि, कुछ सुविधाएं और इस्तेमाल के उदाहरण हर स्क्रीन साइज़ या डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन के हिसाब से काम नहीं कर सकते. अडैप्टिव डिज़ाइन की मदद से, आपके उपयोगकर्ताओं को एर्गोनॉमिक्स, उपयोगिता, और ऐप्लिकेशन की क्वालिटी के बारे में ज़्यादा विकल्प मिलते हैं.
तरीके और क्वालिटी
मुख्य स्क्रीन डिज़ाइन करके शुरुआत करें. इनमें क्लास के साइज़ को ब्रेकपॉइंट के तौर पर इस्तेमाल करें, ताकि आपके ऐप्लिकेशन के बाकी हिस्सों के लिए दिशा-निर्देश तैयार किए जा सकें. इन मुख्य स्क्रीन में, अलग-अलग अडैप्टिव और फ़ॉर्म फ़ैक्टर की क्वालिटी को हाइलाइट किया जा सकता है. इसके अलावा, कॉन्टेंट को बुनियादी स्तर पर रिस्पॉन्सिव बनाने के लिए डिज़ाइन करें. इसके लिए, यह बताएं कि कॉन्टेंट को कैसे सीमित किया जाना चाहिए, बढ़ाया जाना चाहिए या फिर से फ़्लो किया जाना चाहिए.
इस उदाहरण में, बेहतर एर्गोनॉमिक नेविगेशन के लिए नेविगेशन और कॉन्टेंट को फिर से व्यवस्थित किया गया है. साथ ही, उन्हें फ़्लेक्स किया गया है और स्केल किया गया है. लेआउट ग्रिड, वर्टिकल ओरिएंटेशन से लेकर कई कॉलम तक फैलती है. ऐप्लिकेशन बार और फ़िल्टर में मौजूद पता, लेआउट ग्रिड के हिसाब से फिर से व्यवस्थित हो जाता है और फ़िट हो जाता है.
यह करें
ऐसा न करें
यह करें
यह करें
ऐसा न करें
पक्का करें कि इनपुट और बटन स्ट्रेच न किए गए हों.
कंटेनमेंट और पैन के हिसाब से सोचें.
अनुकूलित लेआउट के लिए कॉन्टेंट को ग्रुप करने के लिए, पैन के कंटेनमेंट कॉन्सेप्ट का इस्तेमाल करें. उदाहरण के लिए, यहां जानकारी वाली स्क्रीन का इस्तेमाल किया गया है. यह एक ऐसा पैन है जिसे सूची-जानकारी वाले लेआउट में दिखाया जा सकता है.
कॉम्पैक्ट साइज़ के लिए, एक ही पैन वाला लेआउट इस्तेमाल किया जाना चाहिए.
मीडियम के लिए, एक या दो पैन वाले लेआउट का इस्तेमाल किया जा सकता है.
बड़ी और बहुत बड़ी स्क्रीन पर, एक से ज़्यादा लेआउट का इस्तेमाल किया जा सकता है.
एलिमेंट को एक साथ ग्रुप करने के लिए, इंट्रिंसिक और विज़ुअल कंटेनर का इस्तेमाल करें. पेन को अंदर की ओर ले जाया जा सकता है, छिपाया जा सकता है, बड़ा किया जा सकता है, छोटा किया जा सकता है या पॉप-अप किया जा सकता है. पेन का इस्तेमाल करके, सभी मोबाइल डिवाइसों के लिए डिज़ाइन करना आसान हो जाता है.
बड़ी स्क्रीन पर पैन का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, आपको अब भी कॉन्टेंट को कंटेनमेंट ग्रुप में रखना चाहिए, ताकि उसे आसानी से व्यवस्थित किया जा सके.
एलिमेंट को शिफ़्ट और फिर से व्यवस्थित करने की अनुमति दें. इसके लिए, इस बात पर फ़ोकस करें कि एलिमेंट, ग्रिड के हिसाब से कैसे अडजस्ट होते हैं. एलिमेंट के लिए वर्टिकल बदलाव पर विचार करें. साथ ही, इसे सीमाओं और प्रज़ेंटेशन में हुए बदलावों के साथ मिलाएं.
दिखाए गए कॉन्टेंट के स्केल और मात्रा पर विचार करें.
फ़ोन पर वीडियो की छोटी ग्रिड, टैबलेट पर बहुत ज़्यादा और मुश्किल हो जाती है. स्क्रीन के साइज़, डेंसिटी, और इनपुट के आधार पर, यूज़र इंटरफ़ेस (यूआई) एलिमेंट के स्केल को अपडेट करता है.
अच्छी क्वालिटी वाले ऐप्लिकेशन को ऐप्लिकेशन की मुख्य सुविधाओं और बड़ी स्क्रीन पर ऐप्लिकेशन की क्वालिटी के दिशा-निर्देशों के तहत, अलग-अलग टियर की ज़रूरी शर्तें पूरी करनी चाहिए.
लेआउट के बारे में ज़्यादा जानने के लिए, मटीरियल डिज़ाइन 3 (M3) के लेआउट के बारे में जानकारी देने वाला पेज देखें.
अलग-अलग साइज़ वाले डिवाइसों का फ़ायदा पाएं.
छोटी स्क्रीन और अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को भी ध्यान में रखें. ऐसा इसलिए, क्योंकि Android फ़ोन अलग-अलग साइज़ में उपलब्ध होते हैं. साथ ही, फ़ोल्ड किए जा सकने वाले डिवाइसों में एक छोटी कवर स्क्रीन हो सकती है, जिस पर आपका ऐप्लिकेशन दिख सकता है.
मीडिया प्लेयर जैसे कंट्रोल पर आधारित लेआउट के लिए, कंट्रोल को फिर से फ़्लो करने और कॉन्टेंट को दिखाने की अनुमति दें.
उपयोगकर्ताओं को अडजस्ट करने में मदद करने के लिए, ऐंकर एलिमेंट का इस्तेमाल करें. जैसे, बड़े प्ले बटन का इस्तेमाल करके, आस-पास के कॉन्टेंट को अडजस्ट किया जा सकता है. साथ ही, हीरो आर्ट, कवर स्क्रीन पर बैकग्राउंड बन जाता है.
साइज़ क्लास के अलावा अन्य क्लास
हालांकि, अडैप्टिव डिज़ाइन के लिए विंडो का साइज़ एक सामान्य फ़ैक्टर है, लेकिन आपके ऐप्लिकेशन को इन चीज़ों के लिए भी तैयार रहना चाहिए:
उपयोगकर्ता मॉनिटर और इनपुट डिवाइस प्लग इन कर सकें, अलग-अलग दूरी से देख सकें, और अपने डिवाइस की स्थिति बदल सकें. mediaQuery एपीआई का इस्तेमाल करके, इन बदलावों की जांच की जा सकती है. इससे आपको यह तय करने में मदद मिलती है कि आपका ऐप्लिकेशन, यूज़र इंटरफ़ेस (यूआई) के कुछ एलिमेंट को इस्तेमाल के कुछ खास मामलों के हिसाब से कैसे अडैप्ट करता है.
अपने ऐप्लिकेशन के डिज़ाइन को कॉम्पोनेंट या पैन लेवल पर अडजस्ट करें. इसके बजाय, हर साइज़, इनपुट, फ़ॉर्म फ़ैक्टर, और पोस्चर के हिसाब से पूरी स्क्रीन डिज़ाइन न करें.
इनपुट इंटरैक्शन के बारे में ज़्यादा जानने के लिए, डेस्कटॉप पर इंटरैक्शन से जुड़ी गाइड पढ़ें.
अपनाने लायक नए एपीआई और डिज़ाइन से जुड़े दिशा-निर्देशों का इस्तेमाल करके बनाई गई, Pawparrazzi की सैंपल केस स्टडी देखें.
