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