आज के समय में, बड़ी स्क्रीन वाले 30 करोड़ से ज़्यादा Android डिवाइस इस्तेमाल किए जा रहे हैं. इनमें टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइस, Googlebook, ChromeOS डिवाइस, कार के डिसप्ले, और टीवी शामिल हैं. साथ ही, इनकी संख्या लगातार बढ़ रही है. बड़ी स्क्रीन वाले डिवाइसों की बढ़ती संख्या और विविधता के साथ-साथ स्टैंडर्ड फ़ोन पर उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, अडैप्टिव ऐप्लिकेशन बनाएं.
अडैप्टिव ऐप्लिकेशन क्या होते हैं?
अडैप्टिव ऐप्लिकेशन, ऐप्लिकेशन के डिसप्ले में होने वाले बदलावों के आधार पर लेआउट बदलते हैं. मुख्य रूप से, ऐप्लिकेशन विंडो के साइज़ के आधार पर. हालांकि, अडैप्टिव ऐप्लिकेशन, फ़ोल्ड किए जा सकने वाले डिवाइसों के पॉस्चर में होने वाले बदलावों के हिसाब से भी काम करते हैं. जैसे, टेबलटॉप या बुक पॉस्चर. साथ ही, स्क्रीन डेंसिटी और फ़ॉन्ट साइज़ में होने वाले बदलावों के हिसाब से भी काम करते हैं.
अलग-अलग विंडो साइज़ के हिसाब से यूज़र इंटरफ़ेस (यूआई) एलिमेंट को छोटा या बड़ा करने के बजाय, अडैप्टिव ऐप्लिकेशन लेआउट कॉम्पोनेंट को बदल देते हैं. साथ ही, कॉन्टेंट को दिखाते या छिपाते हैं. उदाहरण के लिए, स्टैंडर्ड फ़ोन पर अडैप्टिव ऐप्लिकेशन, पेज या स्क्रीन के नीचे मौजूद नेविगेशन बार दिखा सकता है. हालांकि, बड़ी स्क्रीन पर नेविगेशन रेल दिख सकती है. बड़ी स्क्रीन पर, अडैप्टिव ऐप्लिकेशन ज़्यादा कॉन्टेंट दिखाते हैं. जैसे, दो पैनल वाला लिस्ट-डिटेल लेआउट. छोटी स्क्रीन पर, कम कॉन्टेंट दिखता है. जैसे, सूची या जानकारी.
पहले, ऐप्लिकेशन आम तौर पर फ़ुल स्क्रीन मोड में चलते थे. आज-कल, ऐप्लिकेशन मल्टी-विंडो मोड में चलते हैं. इनमें विंडो का साइज़, डिवाइस के स्क्रीन साइज़ के हिसाब से नहीं होता. उपयोगकर्ता किसी भी समय विंडो का साइज़ बदल सकते हैं. इसलिए, एक ही तरह के डिवाइस पर भी, ऐप्लिकेशन को अडैप्टिव होना चाहिए.
अडैप्टिव ऐप्लिकेशन, किसी भी डिवाइस पर किसी भी कॉन्फ़िगरेशन में शानदार दिखते हैं और अच्छी तरह से काम करते हैं.
अडैप्टिव यूज़र इंटरफ़ेस क्यों बनाएं?
उपयोगकर्ता चाहते हैं कि आपका ऐप्लिकेशन उनके सभी डिवाइसों पर बिना किसी रुकावट के काम करे और बड़ी स्क्रीन पर बेहतर सुविधाएं दे. उपयोगकर्ता, मल्टी-विंडो मोड में एक साथ कई काम कर सकते हैं. इससे उन्हें ऐप्लिकेशन इस्तेमाल करने का बेहतर अनुभव मिलता है और उनकी प्रॉडक्टिविटी बढ़ती है.
स्टैंडर्ड फ़ोन पर एक समय में एक ही टास्क करने वाले ऐप्लिकेशन, उपयोगकर्ताओं की बढ़ती संख्या और अलग-अलग संभावनाओं का फ़ायदा नहीं उठा पाते.
Google Play
Google Play, टैबलेट और फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, ऐप्लिकेशन के खास कलेक्शन और सुझाव उपलब्ध कराता है. इससे उपयोगकर्ताओं को अच्छी क्वालिटी वाले ऐप्लिकेशन खोजने में मदद मिलती है.
Google Play, बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किए गए ऐप्लिकेशन और गेम को, ऑप्टिमाइज़ नहीं किए गए ऐप्लिकेशन के मुकाबले ज़्यादा रैंक देता है. Play, बड़ी स्क्रीन वाले डिवाइसों के लिए ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों के आधार पर रैंकिंग तय करता है. बेहतर रैंकिंग से, ऐप्लिकेशन को खोजने लायक बनाने में मदद मिलती है. इससे, एक से ज़्यादा डिवाइसों का इस्तेमाल करने वाले लोगों को अपने फ़ोन पर, बड़ी स्क्रीन वाले डिवाइसों के लिए दी गई रेटिंग और समीक्षाएं देखने की सुविधा मिलती है.
जो ऐप्लिकेशन, बड़ी स्क्रीन के लिए Google Play Store के क्वालिटी स्टैंडर्ड को पूरा नहीं करते हैं उनके ज़्यादा जानकारी वाले पेज पर चेतावनी दिखती है. इस चेतावनी में उपयोगकर्ताओं को बताया जाता है कि हो सकता है कि ऐप्लिकेशन, बड़ी स्क्रीन वाले उनके डिवाइसों पर ठीक से काम न करे.
अलग-अलग डिवाइसों के हिसाब से काम करने वाले ऐप्लिकेशन बनाएं, ताकि Google Play पर उन्हें ज़्यादा से ज़्यादा लोग खोज सकें. साथ ही, ज़्यादा से ज़्यादा डिवाइसों पर आपका ऐप्लिकेशन डाउनलोड किया जा सके.
शुरू करने का तरीका
ऐप्लिकेशन डेवलपमेंट के सभी चरणों में अडैप्टिव डिज़ाइन के बारे में सोचें. जैसे, प्लानिंग से लेकर डिप्लॉयमेंट तक. ग्राफ़िक डिज़ाइनर को अडैप्टिव डिज़ाइन के बारे में जानकारी देना. अपने ऐप्लिकेशन को अडैप्टिव बनाएं. इससे आपको एक ऐसा ऐप्लिकेशन बनाने में मदद मिलेगी जिसे मैनेज करना और बड़ा करना आसान होगा. साथ ही, वह आने वाले समय में डिवाइस के नाप या आकार और विंडो मोड के लिए तैयार होगा.
सभी डिसप्ले साइज़ और कॉन्फ़िगरेशन के साथ काम करने वाला अडैप्टिव ऐप्लिकेशन बनाने के लिए, यह तरीका अपनाएं:
- लेआउट से जुड़े फ़ैसले लेने के लिए, विंडो साइज़ क्लास का इस्तेमाल करना
- Compose Material 3 Adaptive लाइब्रेरी की मदद से ऐप्लिकेशन बनाना
- टच के अलावा, अन्य इनपुट के लिए सहायता देना
- सभी तरह के डिवाइसों पर टेस्ट करना
Android स्किल
GitHub पर देखेंअपने ऐप्लिकेशन को अडैप्टिव बनाना
adaptive Android स्किल का इस्तेमाल करें. इससे आपका ऐप्लिकेशन, अलग-अलग Android डिवाइसों और डिसप्ले के हिसाब से काम कर पाएगा.android skills add adaptiveविंडो साइज़ क्लास
अलग-अलग डिवाइसों पर, ऐप्लिकेशन विंडो के डाइमेंशन अलग-अलग हो सकते हैं. फ़ोल्ड किए जा सकने वाले डिवाइसों पर भी ऐसा हो सकता है. भले ही, ऐप्लिकेशन फ़ुल स्क्रीन मोड में हो. डिवाइस के अलग-अलग ओरिएंटेशन (स्क्रीन की दिशा) से, अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) जनरेट होते हैं. मल्टी-विंडो मोड में, ऐप्लिकेशन विंडो का साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और ओरिएंटेशन, डिवाइस की स्क्रीन से अलग हो सकता है.
अडैप्टिव ऐप्लिकेशन, विंडो के साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और ओरिएंटेशन को तय करने और मैनेज करने की समस्या को आसान और सामान्य बनाते हैं. इसके लिए, लेआउट रेंडर करते समय सिर्फ़ ऐप्लिकेशन विंडो को ध्यान में रखा जाता है. यह तब भी काम करता है, जब ऐप्लिकेशन विंडो फ़ुल स्क्रीन पर हो.
विंडो साइज़ क्लास, ऐप्लिकेशन विंडो को विंडो की चौड़ाई या ऊंचाई के आधार पर कॉम्पैक्ट, मीडियम या बड़ी कैटगरी में बांटती हैं.
Compose Material 3 Adaptive लाइब्रेरी के currentWindowAdaptiveInfo() टॉप-लेवल फ़ंक्शन का इस्तेमाल करके, अपने ऐप्लिकेशन के WindowSizeClass का हिसाब लगाएं. यह फ़ंक्शन, WindowAdaptiveInfo का एक इंस्टेंस दिखाता है. इसमें windowSizeClass शामिल होता है. विंडो साइज़ क्लास में बदलाव होने पर, आपके ऐप्लिकेशन को अपडेट मिलते हैं:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
कॉन्टेंट पैनल
किसी गतिविधि के लेआउट को कभी-कभी स्क्रीन भी कहा जाता है. उदाहरण के लिए, आपके ऐप्लिकेशन में होम स्क्रीन, सूची वाली स्क्रीन, और आइटम की जानकारी वाली स्क्रीन हो सकती है. इस शब्दावली का मतलब है कि हर गतिविधि, डिवाइस की स्क्रीन को भर देती है.
हालांकि, जिन डिवाइसों की स्क्रीन इतनी बड़ी होती हैं कि उन पर एक्सपैंडेड विड्थ विंडो साइज़ क्लास काम कर सके, उन पर एक साथ कई गतिविधि स्क्रीन देखी जा सकती हैं. Pane, अलग-अलग गतिविधियों के कॉन्टेंट को दिखाने के लिए ज़्यादा सटीक शब्द है.
विंडो साइज़ क्लास की मदद से, यह तय किया जा सकता है कि मल्टी-पैन लेआउट में कितने कॉन्टेंट पैन दिखाने हैं. इस बारे में मटीरियल डिज़ाइन में बताया गया है.
पैनल में नेविगेट किया जा सकता है. कॉम्पैक्ट और मीडियम विंडो साइज़ क्लास वाले डिवाइसों पर, ऐप्लिकेशन एक ही पैनल दिखाते हैं. इसलिए, किसी भी डेस्टिनेशन पर जाने पर एक ही पैनल दिखता है.
एक्सपैंडेड विंडो साइज़ क्लास में, ऐप्लिकेशन एक से ज़्यादा पैनल में मिलता-जुलता कॉन्टेंट दिखा सकते हैं. जैसे, सूची और जानकारी वाला लेआउट. किसी भी पैनल पर जाने से, दो पैनल वाला लेआउट दिखता है. अगर विंडो का साइज़ छोटा या मीडियम हो जाता है, तो अडैप्टिव ऐप्लिकेशन सिर्फ़ एक पैनल दिखाते हैं. यह पैनल, नेविगेशन डेस्टिनेशन, सूची या जानकारी वाला पैनल हो सकता है.
|
|
|
Compose Material 3 Adaptive
Jetpack Compose, अडैप्टिव ऐप्लिकेशन बनाने का एक आधुनिक और डिक्लेरेटिव तरीका है. इसमें कई लेआउट फ़ाइलों को डुप्लीकेट करने और उन्हें मैनेज करने की ज़रूरत नहीं पड़ती.
Compose Material 3 Adaptive लाइब्रेरी में ऐसे कंपोज़ेबल होते हैं जो विंडो साइज़ क्लास, नेविगेशन कॉम्पोनेंट, मल्टी-पैन लेआउट, फ़ोल्ड किए जा सकने वाले डिवाइसों के पॉस्चर, और हिंज की जगह को मैनेज करते हैं. उदाहरण के लिए:
NavigationSuiteScaffold: ऐप्लिकेशन विंडो के साइज़ की क्लास और डिवाइस के पॉस्चर के आधार पर, नेविगेशन बार और नेविगेशन रेल के बीच अपने-आप स्विच होता है.ListDetailPaneScaffold: यह सूची-जानकारी वाला कैननिकल लेआउट लागू करता है.ऐप्लिकेशन विंडो के साइज़ के हिसाब से लेआउट को अडजस्ट करता है. यह विंडो साइज़ क्लास, बड़ी विंडो साइज़ क्लास में एक सूची और सूची के किसी आइटम की जानकारी को अगल-बगल के पैनल में दिखाती है. हालांकि, छोटी और मीडियम विंडो साइज़ क्लास में, सिर्फ़ सूची या जानकारी दिखाती है.
SupportingPaneScaffold: यह सपोर्टिंग पैनल वाले कैननिकल लेआउट को लागू करता है.यह विंडो साइज़ क्लास के बड़े साइज़ में, मुख्य कॉन्टेंट वाला पैनल और एक सहायक पैनल दिखाता है. हालांकि, विंडो साइज़ क्लास के छोटे और मीडियम साइज़ में, सिर्फ़ मुख्य कॉन्टेंट वाला पैनल दिखाता है.
Compose Material 3 Adaptive लाइब्रेरी, अडैप्टिव ऐप्लिकेशन डेवलप करने के लिए एक मुख्य डिपेंडेंसी है.
कॉन्फ़िगरेशन और निरंतरता
अडैप्टिव ऐप्लिकेशन, कॉन्फ़िगरेशन में बदलाव के दौरान भी काम करते रहते हैं.
कॉन्फ़िगरेशन में बदलाव तब होता है, जब ऐप्लिकेशन विंडो का साइज़ बदला जाता है, फ़ोल्ड किए जा सकने वाले डिवाइस का पॉस्चर बदलता है या स्क्रीन डेंसिटी या फ़ॉन्ट में बदलाव होता है.
डिफ़ॉल्ट रूप से, कॉन्फ़िगरेशन में बदलाव करने पर ऐप्लिकेशन की गतिविधि फिर से शुरू हो जाती है. साथ ही, गतिविधि की पूरी स्थिति मिट जाती है. अलग-अलग स्क्रीन साइज़ के हिसाब से काम करने वाले ऐप्लिकेशन, अपनी स्थिति को गतिविधि के onSaveInstanceState() तरीके या ViewModel में सेव करते हैं, ताकि वे बिना किसी रुकावट के काम करते रहें.
पोस्चर
अडैप्टिव ऐप्लिकेशन, फ़ोल्ड किए जा सकने वाले डिवाइसों के पॉस्चर में होने वाले बदलावों के हिसाब से काम करते हैं. इनमें टेबलटॉप और बुक पॉस्चर शामिल हैं.
Jetpack WindowManager में मौजूद WindowInfoTracker इंटरफ़ेस की मदद से, डिवाइस के लिए DisplayFeature ऑब्जेक्ट की सूची देखी जा सकती है. डिसप्ले की सुविधाओं में FoldingFeature.State शामिल है. इससे पता चलता है कि डिवाइस पूरी तरह से खुला है या आधा खुला है.
Compose Material 3 Adaptive लाइब्रेरी, currentWindowAdaptiveInfo() टॉप-लेवल फ़ंक्शन उपलब्ध कराती है. यह फ़ंक्शन, WindowAdaptiveInfo का एक इंस्टेंस दिखाता है, जिसमें windowPosture शामिल होता है.
टच के अलावा अन्य इनपुट
उपयोगकर्ता अक्सर बड़ी स्क्रीन वाले डिवाइसों से बाहरी कीबोर्ड, ट्रैकपैड, माउस, और स्टाइलस कनेक्ट करते हैं. पेरिफ़ेरल डिवाइसों से, उपयोगकर्ता की प्रॉडक्टिविटी, इनपुट की सटीक जानकारी, अपनी पसंद के मुताबिक काम करने की सुविधा, और सुलभता को बेहतर बनाया जा सकता है. ज़्यादातर ChromeOS डिवाइसों में, कीबोर्ड और ट्रैकपैड पहले से मौजूद होते हैं.
अडैप्टिव ऐप्लिकेशन, बाहरी इनपुट डिवाइसों के साथ काम करते हैं. हालांकि, Android फ़्रेमवर्क आपके लिए ज़्यादातर काम करता है:
Jetpack Compose 1.7 और इसके बाद के वर्शन: कीबोर्ड टैब नेविगेशन और माउस या ट्रैकपैड से क्लिक करने, चुनने, और स्क्रोल करने की सुविधा डिफ़ॉल्ट रूप से काम करती है.
Jetpack
androidx.compose.material3लाइब्रेरी: इसकी मदद से, उपयोगकर्ता स्टाइलस का इस्तेमाल करके किसी भीTextFieldकॉम्पोनेंट में लिख सकते हैं.कीबोर्ड शॉर्टकट हेल्पर: इससे उपयोगकर्ता, Android प्लैटफ़ॉर्म और ऐप्लिकेशन के कीबोर्ड शॉर्टकट खोज सकते हैं.
onProvideKeyboardShortcuts()विंडो कॉलबैक को ओवरराइड करके, Keyboard Shortcuts Helper में अपने ऐप्लिकेशन के कीबोर्ड शॉर्टकट पब्लिश करें.
अलग-अलग साइज़ के डिवाइसों पर सही तरीके से काम करने के लिए, अडैप्टिव ऐप्लिकेशन हर तरह के इनपुट के साथ काम करते हैं.
अडैप्टिव ऐप्लिकेशन को टेस्ट करने का तरीका
अलग-अलग स्क्रीन और विंडो साइज़ के साथ-साथ, अलग-अलग डिवाइस कॉन्फ़िगरेशन की जांच करें. अपने ऐप्लिकेशन के लेआउट की जांच करने के लिए, होस्ट की ओर से लिए गए स्क्रीनशॉट और Compose की झलक का इस्तेमाल करें. Google के डेटा सेंटर में होस्ट किए गए Android Studio एम्युलेटर और रिमोट Android डिवाइसों पर अपना ऐप्लिकेशन चलाएं.
बड़ी स्क्रीन वाले डिवाइसों के लिए, ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देश
बड़ी स्क्रीन वाले डिवाइसों के लिए ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों की मदद से, यह पुष्टि की जा सकती है कि आपका अडैप्टिव ऐप्लिकेशन, टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइसों, और ChromeOS डिवाइसों पर ठीक से काम करता है या नहीं. इन दिशा-निर्देशों में ऐसे टेस्ट शामिल हैं जिनकी मदद से, क्रिटिकल यूज़र जर्नी के लिए ऐप्लिकेशन की मुख्य सुविधाओं और उनके काम करने के तरीके की पुष्टि की जा सकती है. हालांकि, ये दिशा-निर्देश बड़ी स्क्रीन पर फ़ोकस करते हैं, लेकिन ये सभी स्क्रीन साइज़ के साथ काम करते हैं.
एक से ज़्यादा कॉन्फ़िगरेशन
Compose 1.7 और इसके बाद के वर्शन में मौजूद DeviceConfigurationOverride इंटरफ़ेस की मदद से, डिवाइस कॉन्फ़िगरेशन के अलग-अलग पहलुओं को बदला जा सकता है. यह एपीआई, स्थानीय भाषा में अलग-अलग डिवाइस कॉन्फ़िगरेशन को सिम्युलेट करता है. इससे, आपको जिस भी कंपोज़ेबल कॉन्टेंट की जांच करनी है उसे टेस्ट किया जा सकता है. उदाहरण के लिए, किसी एक डिवाइस या एम्युलेटर पर टेस्ट सुइट को एक बार चलाकर, यूज़र इंटरफ़ेस (यूआई) के कई साइज़ टेस्ट किए जा सकते हैं.
DeviceConfigurationOverride.then() एक्सटेंशन फ़ंक्शन की मदद से, कई कॉन्फ़िगरेशन पैरामीटर को एक साथ टेस्ट किया जा सकता है. जैसे, फ़ॉन्ट साइज़, स्थान-भाषा, थीम, और लेआउट का साइज़.
होस्ट की ओर से लिए गए स्क्रीनशॉट
होस्ट-साइड स्क्रीनशॉट टेस्ट, आपके ऐप्लिकेशन के लेआउट के विज़ुअल अपियरेंस की पुष्टि करने का एक तेज़ और स्केलेबल तरीका है. अलग-अलग डिसप्ले साइज़ के लिए अपने यूज़र इंटरफ़ेस (यूआई) की जांच करने के लिए, होस्ट-साइड स्क्रीनशॉट का इस्तेमाल करें.
ज़्यादा जानकारी के लिए, Compose की झलक वाले स्क्रीनशॉट की जांच करना लेख पढ़ें.
झलक कंपोज़ करना
Compose की झलक की मदद से, Android Studio के डिज़ाइन व्यू में अपने ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) देखा जा सकता है. झलक दिखाने के लिए, @PreviewScreenSizes, @PreviewFontScale, और @PreviewLightDark जैसे एनोटेशन का इस्तेमाल किया जाता है. इससे आपको अलग-अलग कॉन्फ़िगरेशन में, कंपोज़ किए जा सकने वाले कॉन्टेंट को देखने में मदद मिलती है. झलकियों के साथ इंटरैक्ट भी किया जा सकता है.
Android Studio, झलक में इस्तेमाल से जुड़ी सामान्य समस्याओं को भी हाइलाइट करता है. जैसे, बटन या टेक्स्ट फ़ील्ड जो बहुत ज़्यादा चौड़े हैं.
ज़्यादा जानकारी के लिए, कंपोज़ेबल की झलक की मदद से अपने यूज़र इंटरफ़ेस (यूआई) की झलक देखना लेख पढ़ें.
एम्युलेटर
Android Studio में, अलग-अलग लेआउट साइज़ की जांच करने के लिए कई तरह के एम्युलेटर उपलब्ध हैं:
- रीसाइज़ किया जा सकने वाला एम्युलेटर: यह फ़ोन, टैबलेट या फ़ोल्ड किए जा सकने वाले डिवाइस को एम्युलेट करता है. साथ ही, आपको उनके बीच तुरंत स्विच करने की सुविधा देता है
- Pixel Fold एम्युलेटर: यह Pixel Fold की बड़ी स्क्रीन वाले फ़ोल्ड किए जा सकने वाले फ़ोन को एम्युलेट करता है
- Pixel Tablet एम्युलेटर: यह Pixel Tablet की बड़ी स्क्रीन वाले डिवाइस को एम्युलेट करता है
- डेस्कटॉप एम्युलेटर: इसकी मदद से, फ़्री-फ़ॉर्म विंडोइंग, माउस कर्सर को घुमाने, और कीबोर्ड शॉर्टकट को टेस्ट किया जा सकता है
रिमोट डिवाइस स्ट्रीमिंग
Google के डेटा सेंटर में होस्ट किए गए रिमोट Android डिवाइसों से सुरक्षित तरीके से कनेक्ट करें. साथ ही, नए Pixel और Samsung डिवाइसों पर अपना ऐप्लिकेशन चलाएं. ऐप्लिकेशन इंस्टॉल और डीबग करें, एडीबी कमांड चलाएं, और डिवाइसों को रोटेट और फ़ोल्ड करें. इससे यह पुष्टि की जा सकेगी कि आपका ऐप्लिकेशन, अलग-अलग तरह के असली डिवाइसों पर अच्छी तरह से काम करता है.
रिमोट डिवाइस स्ट्रीमिंग की सुविधा, Android Studio में इंटिग्रेट की गई है. ज़्यादा जानकारी के लिए, Firebase की मदद से Android डिवाइस स्ट्रीमिंग लेख पढ़ें.
अन्य संसाधन
- I/O प्रज़ेंटेशन: अडैप्टिव Android ऐप्लिकेशन बनाना