लेआउट में बदलाव करना

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

अडैप्टिव लेआउट को असरदार तरीके से लागू करने के लिए:

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

मोबाइल और टैबलेट की स्क्रीन पर, प्रॉडक्टिविटी ऐप्लिकेशन की इमेज.

बड़ी स्क्रीन के हिसाब से लेआउट को अडजस्ट करने के बारे में डिज़ाइन से जुड़े दिशा-निर्देशों के लिए, Compose में अलग-अलग स्क्रीन साइज़ के लिए सहायता डेवलपर गाइड और M3 लेआउट लागू करना पेज पढ़ें. बड़ी स्क्रीन के लेआउट को लागू करने और उनसे प्रेरणा लेने के लिए, Android की बड़ी स्क्रीन वाली कैननिकल गैलरी भी देखी जा सकती है.

अडैप्टिव तरीके से सोचें

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

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

तरीके और क्वालिटी

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

कॉन्टेंट और कॉम्पोनेंट की ज़्यादा से ज़्यादा चौड़ाई सेट करें, ताकि वे पूरी चौड़ाई में न फैलें.

कॉन्टेंट को पूरी चौड़ाई में दिखाने की अनुमति दें.

इसे कंटेनर या पैन के तौर पर समझें.

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

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

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

लेआउट के बारे में ज़्यादा जानने के लिए, Material Design 3 (M3) के लेआउट के बारे में जानकारी देने वाला पेज देखें.