आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) का डिज़ाइन, किसी खास डिवाइस के फ़ॉर्म फ़ैक्टर से जुड़ा नहीं है. Android ऐप्लिकेशन को कई तरह के डिवाइसों के हिसाब से काम करना होता है. जैसे, 4 इंच के हैंडसेट से लेकर 50 इंच के टीवी तक और साइज़ में बदलाव की सुविधा वाले ChromeOS डिवाइसों तक.
आपके ऐप्लिकेशन का यूज़र इंटरफ़ेस, एक विंडो में दिखता है. इस विंडो का साइज़, अपनी ज़रूरत के हिसाब से बदला जा सकता है. अलग-अलग विंडो साइज़ के लिए अलग-अलग लेआउट देने के लिए, रिसॉर्स क्वालिफ़ायर का इस्तेमाल किया जाता है. ये अंतर, डिवाइस की स्क्रीन के साइज़ की सीमाओं की वजह से हो सकते हैं. इसके अलावा, उपयोगकर्ता विंडो का साइज़ बदलने के लिए, मल्टी-विंडो मोड का इस्तेमाल करके भी ये अंतर हो सकते हैं.
रिस्पॉन्सिव कॉन्टेंट डिज़ाइन करना
आपको अपने सभी उपयोगकर्ताओं को बेहतर अनुभव देना चाहिए. इसलिए, आपको अपने ऐप्लिकेशन की हर स्क्रीन पर, विंडो के उपलब्ध हिस्से का पूरा फ़ायदा लेना चाहिए.
उदाहरण के लिए, हो सकता है कि फ़ोन की स्क्रीन की पूरी चौड़ाई पर चलने वाला कोई ऐप्लिकेशन, मल्टी-विंडो मोड में जाने पर किसी कॉन्टेंट की जानकारी छिपा दे. साथ ही, ChromeOS डिवाइस की स्क्रीन की पूरी चौड़ाई पर चलने पर, ज़्यादा कॉन्टेंट दिखाने के लिए, वह अपने यूज़र इंटरफ़ेस को बड़ा कर सकता है.
उपयोगकर्ताओं की इन उम्मीदों को पूरा करने के अलावा, अक्सर बड़े डिवाइसों पर ज़्यादा कॉन्टेंट उपलब्ध कराना ज़रूरी होता है. इससे, बहुत ज़्यादा खाली जगह नहीं रहती और अनजाने में उपयोगकर्ताओं को परेशानी नहीं होती. नीचे दी गई इमेज में, बड़ी विंडो के लिए यूज़र इंटरफ़ेस डिज़ाइन को अडैप्ट करते समय आने वाली कुछ समस्याएं देखी जा सकती हैं:
पहली इमेज. बड़ी विंडो में ज़रूरत के मुताबिक कॉन्टेंट न होने पर, सफ़ेद जगह का गलत इस्तेमाल होता है और लाइन की लंबाई बहुत ज़्यादा हो जाती है.
रिस्पॉन्सिव नेविगेशन अनुभव डिज़ाइन करने के बारे में ज़्यादा जानने के लिए, रिस्पॉन्सिव यूज़र इंटरफ़ेस के लिए नेविगेशन देखें.
उपयोगकर्ताओं को उनकी पसंद के मुताबिक अनुभव देना
यह ज़रूरी है कि आप अपने कॉन्टेंट के व्यू बढ़ाने के लिए, उपलब्ध जगह को भरने के अलावा, दर्शकों को यूनीक अनुभव भी दें. यूज़र इंटरफ़ेस को अपनी ज़रूरत के मुताबिक बनाया जा सकता है, ताकि दी गई विंडो साइज़ के लिए उपयोगकर्ताओं को बेहतर अनुभव दिया जा सके. इसके लिए, पूरी तरह से अलग लेआउट और विजेट का इस्तेमाल किया जा सकता है.
दूसरे चित्र में, BottomNavigationView का इस्तेमाल टॉप-लेवल नेविगेशन के तौर पर किया गया है. ऐसा तब किया जाता है, जब वर्टिकल तौर पर ज़रूरत के मुताबिक जगह हो. जब विंडो का साइज़ कम हो जाता है, तो DrawerLayout का इस्तेमाल करके टॉप-लेवल नेविगेशन लागू किया जाता है. इसकी जानकारी, दूसरे चित्र की दाईं ओर दी गई है.
दूसरी इमेज. जब वर्टिकल स्पेस सीमित होता है, तो सबसे नीचे मौजूद नेविगेशन बार की जगह नेविगेशन ड्रॉर ले लेता है.
यहां कुछ और उदाहरण दिए गए हैं:
Toolbar, उपलब्ध जगह के हिसाब से ऐक्शन मेन्यू के आइटम दिखा या छिपा सकता है.RecyclerView.LayoutManagerअपनी विंडो के साइज़ का पूरा फ़ायदा पाने के लिए, स्पैन की संख्या बदल सकता है- कस्टम व्यू के लिए ज़्यादा जानकारी दिखाई जा सकती है, क्योंकि आपके पास ऐसा करने के लिए ज़्यादा जगह होती है.
ये सभी बेहतर तरीके हैं, जिनसे यह पक्का किया जा सकता है कि आपके उपयोगकर्ताओं को आपके ऐप्लिकेशन को कहीं भी इस्तेमाल करने पर बेहतर अनुभव मिले.
material.io पर, रिस्पॉन्सिव डिज़ाइन पैटर्न के ज़्यादा उदाहरण और अडैप्टिव लेआउट के आइडिया देखे जा सकते हैं.