अपने यूज़र इंटरफ़ेस (यूआई) को रिस्पॉन्सिव लेआउट पर माइग्रेट करना

Android ऐप्लिकेशन के लिए ज़रूरी है कि वे डिवाइस के ऐसे नेटवर्क पर काम करें जिसमें लगातार नए जोड़े जा रहे हों फ़ैक्टर. कई तरह की स्क्रीन में फ़िट होने के लिए, ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) रिस्पॉन्सिव होना चाहिए साथ ही, अलग-अलग ओरिएंटेशन और डिवाइस की स्थिति पर ध्यान दें.

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

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

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

ऐसा करने से बचें

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

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

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

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

पिछली किसी भी रणनीति को आज़माने के बजाय, ब्रेकपॉइंट और विंडो का इस्तेमाल करें साइज़ क्लास.

ब्रेकपॉइंट और विंडो साइज़ की क्लास

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

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

स्थायी यूज़र इंटरफ़ेस (यूआई) एलिमेंट

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

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

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

कॉन्टेंट

अपने स्थायी यूज़र इंटरफ़ेस (यूआई) एलिमेंट को पोज़िशन करने के बाद, बची हुई जगह का इस्तेमाल करें जैसे, अपने ऐप्लिकेशन के नेविगेशन के साथ NavHostFragment का इस्तेमाल करना ग्राफ़. यहां जाएं: रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई) के लिए नेविगेशन देखें.

पक्का करें कि अलग-अलग साइज़ के लिए सारा डेटा उपलब्ध हो

आज-कल ज़्यादातर ऐप्लिकेशन फ़्रेमवर्क ऐसे डेटा मॉडल का इस्तेमाल करते हैं जो यूज़र इंटरफ़ेस (यूआई) में योगदान देने वाले Android कॉम्पोनेंट (गतिविधियां, फ़्रैगमेंट, और व्यू). Jetpack इस्तेमाल करने पर, यह भूमिका आम तौर पर ViewModels की मदद से पूरी की जाती है, जिसमें कॉन्फ़िगरेशन परिवर्तनों के दौरान बने रहने का अतिरिक्त लाभ (देखें ज़्यादा जानकारी के लिए, ViewModel की खास जानकारी जानकारी).

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

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

कॉन्टेंट को बड़ा करें

कैननिकल लेआउट: फ़ीड

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

कलेक्शन का साइज़ बड़ा करें. कई ऐप्लिकेशन आइटम का कलेक्शन दिखाते हैं स्क्रोलिंग कंटेनर, जैसे कि RecyclerView या ScrollView. सक्षम करने से कंटेनर का साइज़ अपने-आप बड़ा होने का मतलब है कि ज़्यादा कॉन्टेंट दिखाया जा सकता है. हालांकि, ध्यान रखें कि कंटेनर में मौजूद कॉन्टेंट फैला हुआ हो या खराब हो. उदाहरण के लिए, RecyclerView के साथ इन बातों पर ध्यान दें इस्तेमाल करके GridLayoutManager, StaggeredGridLayoutManager, या FlexboxLayout जब चौड़ाई छोटी नहीं है.

अलग-अलग आइटम दिखाने के लिए, अलग-अलग साइज़ या आकार का भी इस्तेमाल किया जा सकता है और आसानी से आइटम की सीमाओं के बीच अंतर करने के लिए कहें.

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

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

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

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

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

कॉन्टेंट जोड़ें

कैननिकल लेआउट: सहायक पैनल, सूची की जानकारी वाला व्यू

सहायक पैनल का इस्तेमाल करें. सहायक पैनल, अतिरिक्त कॉन्टेंट दिखाता है या मुख्य कॉन्टेंट से जुड़ी कार्रवाइयां, जैसे कि प्लेलिस्ट में शामिल दस्तावेज़ या आइटम. आम तौर पर, ये टेंप्लेट विस्तृत ऊंचाई के लिए स्क्रीन या विस्तृत चौड़ाई के लिए ट्रेलिंग तीसरी.

एक महत्वपूर्ण विचार यह है कि ऐसी सामग्री को वहां रखें, जब पैनल दिखाने के लिए ज़रूरी जगह. एक्सप्लोर करने के लिए यहां कुछ विकल्प दिए गए हैं:

• DrawerLayout का इस्तेमाल करके, पीछे के किनारे पर साइड पैनल
• सबसे नीचे मौजूद पैनल में BottomSheetBehavior का इस्तेमाल हो रहा है
• मेन्यू या पॉप-अप विंडो, जिसे मेन्यू आइकॉन पर टैप करके ऐक्सेस किया जा सकता है

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

इसका इस्तेमाल करें SlidingPaneLayout सूची की जानकारी वाला व्यू लागू करने के लिए खास तौर पर बना विजेट. यह विजेट यह अपने-आप हिसाब कर लेता है कि दोनों को दिखाने के लिए ज़रूरत के मुताबिक जगह है या नहीं पैनल, दोनों पैनल के लिए तय की गई layout_width वैल्यू पर आधारित होते हैं, साथ ही, बची हुई जगह को layout_weight का इस्तेमाल करके बांटा जा सकता है. जब वहां पर्याप्त जगह नहीं है, तो हर पैनल लेआउट की पूरी चौड़ाई का इस्तेमाल करता है और विवरण पैनल या तो स्क्रीन से बाहर या सूची पैनल के ऊपर स्लाइड करता है.

टू-पैन वाला लेआउट बनाएं में ज़्यादा नतीजे शामिल होते हैं SlidingPaneLayout का इस्तेमाल करने के बारे में जानकारी. साथ ही, ध्यान दें कि यह पैटर्न अपने नेविगेशन ग्राफ़ की संरचना को प्रभावित करें (देखें रिस्पॉन्सिव यूज़र इंटरफ़ेस (यूआई) के लिए नेविगेशन).

अन्य संसाधन

• मटीरियल डिज़ाइन — लेआउट लागू करना