आज 30 करोड़ से ज़्यादा Android डिवाइस इस्तेमाल किए जा रहे हैं. इनमें टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइस, ChromeOS डिवाइस, कार डिसप्ले, और टीवी शामिल हैं. इनकी संख्या लगातार बढ़ती जा रही है. बड़ी स्क्रीन वाले डिवाइसों की बढ़ती संख्या और उनमें मौजूद अलग-अलग तरह की सुविधाओं के साथ-साथ, स्टैंडर्ड फ़ोन पर भी बेहतर उपयोगकर्ता अनुभव देने के लिए, अडैप्टिव ऐप्लिकेशन बनाएं.
अडैप्टिव ऐप्लिकेशन क्या होते हैं?
अडैप्टिव ऐप्लिकेशन, ऐप्लिकेशन के डिसप्ले में होने वाले बदलावों के हिसाब से लेआउट बदलते हैं. इनमें मुख्य रूप से, ऐप्लिकेशन विंडो का साइज़ शामिल होता है. हालांकि, अडैप्टिव ऐप्लिकेशन, फ़ोल्ड किए जा सकने वाले डिवाइसों के पोस्चर में होने वाले बदलावों के हिसाब से भी काम करते हैं. जैसे, टेबलटॉप या बुक पोस्चर. इसके अलावा, ये स्क्रीन डेंसिटी और फ़ॉन्ट साइज़ में होने वाले बदलावों के हिसाब से भी काम करते हैं.
अडैप्टिव ऐप्लिकेशन, अलग-अलग विंडो साइज़ के हिसाब से यूज़र इंटरफ़ेस (यूआई) के एलिमेंट को सिर्फ़ स्ट्रेच या श्रिंक करने के बजाय, लेआउट कॉम्पोनेंट को बदल देते हैं और कॉन्टेंट को दिखाते या छिपाते हैं. उदाहरण के लिए, स्टैंडर्ड फ़ोन पर, अडैप्टिव ऐप्लिकेशन बॉटम नेविगेशन बार दिखा सकता है. वहीं, बड़ी स्क्रीन पर, नेविगेशन रेल दिखा सकता है. बड़ी स्क्रीन पर, अडैप्टिव ऐप्लिकेशन ज़्यादा कॉन्टेंट दिखाते हैं. जैसे, दो-पैनल वाला, सूची की जानकारी लेआउट. वहीं, छोटी स्क्रीन पर, कम कॉन्टेंट दिखाते हैं. जैसे, सूची या जानकारी.
पहले, ऐप्लिकेशन आम तौर पर फ़ुल स्क्रीन पर चलते थे. आजकल, ऐप्लिकेशन मल्टी-विंडो मोड में, डिवाइस की स्क्रीन के साइज़ से अलग, किसी भी साइज़ की विंडो में चलते हैं. उपयोगकर्ता, विंडो का साइज़ कभी भी बदल सकते हैं. इसलिए, एक ही तरह के डिवाइस पर भी, ऐप्लिकेशन अडैप्टिव होने चाहिए.
अडैप्टिव ऐप्लिकेशन, किसी भी डिवाइस पर, किसी भी कॉन्फ़िगरेशन में अच्छी तरह से दिखते हैं और काम करते हैं.
अडैप्टिव यूज़र इंटरफ़ेस (यूआई) क्यों बनाने चाहिए?
उपयोगकर्ताओं को उम्मीद होती है कि आपका ऐप्लिकेशन उनके सभी डिवाइसों पर बिना किसी गड़बड़ी के काम करे. साथ ही, बड़ी स्क्रीन पर बेहतर सुविधाएं उपलब्ध कराए. उपयोगकर्ता, ऐप्लिकेशन के बेहतर अनुभव और ज़्यादा प्रॉडक्टिविटी के लिए, मल्टी-विंडो मोड में मल्टीटास्किंग करते हैं.
स्टैंडर्ड फ़ोन पर, सिर्फ़ एक काम करने वाले ऐप्लिकेशन, अलग-अलग तरह की सुविधाओं के लिए, बढ़ते उपयोगकर्ता आधार से चूक जाते हैं.
Google Play
Google Play, टैबलेट और फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, ऐप्लिकेशन के कलेक्शन और सुझाव उपलब्ध कराता है. इससे उपयोगकर्ताओं को अच्छी क्वालिटी वाले ऐप्लिकेशन खोजने में मदद मिलती है.
Play, बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किए गए ऐप्लिकेशन और गेम को, ऑप्टिमाइज़ न किए गए ऐप्लिकेशन की तुलना में ज़्यादा रैंक देता है. Play, रैंकिंग के लिए, बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के दिशा-निर्देशों का इस्तेमाल करता है. ज़्यादा रैंक मिलने से, ऐप्लिकेशन की खोज में दिखने की संभावना बढ़ जाती है. ऐसा इसलिए, क्योंकि एक से ज़्यादा डिवाइस इस्तेमाल करने वाले लोग, अपने फ़ोन पर बड़ी स्क्रीन के लिए खास तौर पर दी गई रेटिंग और समीक्षाएं देख पाते हैं.
जो ऐप्लिकेशन, Play Store की बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के मानकों को पूरा नहीं करते हैं, उन्हें ऐप्लिकेशन की ज़्यादा जानकारी वाले पेज पर चेतावनी दिखती है. चेतावनी में उपयोगकर्ताओं को बताया जाता है कि हो सकता है कि ऐप्लिकेशन, बड़ी स्क्रीन वाले उनके डिवाइसों पर अच्छी तरह से काम न करे.
Google Play पर अपने ऐप्लिकेशन की खोज में दिखने की संभावना बढ़ाने और ज़्यादा से ज़्यादा डिवाइसों पर डाउनलोड होने की संभावना बढ़ाने के लिए, अडैप्टिव ऐप्लिकेशन बनाएं.
शुरू करने का तरीका
ऐप्लिकेशन डेवलपमेंट के सभी चरणों में, अडैप्टिव डिज़ाइन के बारे में सोचें. जैसे, प्लान करने से लेकर डिप्लॉयमेंट तक. ग्राफ़िक डिज़ाइनर को अडैप्टिव डिज़ाइन के बारे में बताएं. अपने ऐप्लिकेशन को अडैप्टिव डिज़ाइन करें. इससे आपको ऐसा ऐप्लिकेशन बनाने में मदद मिलेगी जिसे मैनेज किया जा सकता है, बढ़ाया जा सकता है, और आने वाले समय में अलग-अलग साइज़, डाइमेंशन या कॉन्फ़िगरेशन वाले डिवाइसों और विंडोइंग मोड के लिए तैयार किया जा सकता है.
सभी डिसप्ले साइज़ और कॉन्फ़िगरेशन के साथ काम करने वाला अडैप्टिव ऐप्लिकेशन बनाने के लिए, यह तरीका अपनाएं:
- लेआउट से जुड़े फ़ैसले लेने के लिए, विंडो साइज़ क्लास का इस्तेमाल करें
- Compose Material 3 अडैप्टिव लाइब्रेरी की मदद से बनाएं
- टच के अलावा अन्य इनपुट डिवाइसों के लिए सहायता उपलब्ध कराएं
- डिवाइस के सभी टाइप पर टेस्ट करें
विंडो साइज़ क्लास
ऐप्लिकेशन के फ़ुल स्क्रीन पर होने पर भी, अलग-अलग डिवाइसों पर ऐप्लिकेशन विंडो के डाइमेंशन अलग-अलग हो सकते हैं. फ़ोल्ड किए जा सकने वाले डिवाइसों के मामले में, एक ही डिवाइस पर भी अलग-अलग हो सकते हैं. डिवाइस के अलग-अलग ओरिएंटेशन से, अलग-अलग आसपेक्ट रेशियो मिलते हैं. मल्टी‑विंडो मोड में, ऐप्लिकेशन विंडो का साइज़, आसपेक्ट रेशियो, और ओरिएंटेशन, डिवाइस की स्क्रीन से अलग हो सकता है.
अडैप्टिव ऐप्लिकेशन, लेआउट रेंडर करते समय सिर्फ़ ऐप्लिकेशन विंडो को ध्यान में रखकर, विंडो साइज़, आसपेक्ट रेशियो, और स्क्रीन की दिशा तय करने और मैनेज करने की समस्या को आसान बनाते हैं. यह तब भी काम करता है, जब ऐप्लिकेशन विंडो फ़ुल स्क्रीन पर होती है.
विंडो साइज़ क्लास, विंडो की चौड़ाई या ऊंचाई के आधार पर, ऐप्लिकेशन विंडो को कॉम्पैक्ट, मीडियम या एक्सपैंडेड के तौर पर कैटगरी में बांटती हैं.
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()WindowAdaptiveInfowindowPosture
टच के अलावा अन्य इनपुट डिवाइसों के लिए सहायता
उपयोगकर्ता अक्सर बड़ी स्क्रीन वाले डिवाइसों से, बाहरी कीबोर्ड, ट्रैकपैड, माउस, और स्टाइलस कनेक्ट करते हैं. पेरिफ़ेरल डिवाइसों से, उपयोगकर्ता की प्रॉडक्टिविटी, इनपुट की सटीक जानकारी, निजी तौर पर अपनी पसंद के मुताबिक काम करने की सुविधा, और सुलभता बेहतर होती है. ज़्यादातर ChromeOS डिवाइसों में, कीबोर्ड और ट्रैकपैड पहले से मौजूद होते हैं.
अडैप्टिव ऐप्लिकेशन, बाहरी इनपुट डिवाइसों के साथ काम करते हैं. हालांकि, Android फ़्रेमवर्क आपके लिए ज़्यादातर काम करता है:
Jetpack Compose 1.7 और इसके बाद के वर्शन: कीबोर्ड टैब नेविगेशन और माउस या ट्रैकपैड से क्लिक करने, चुनने, और स्क्रोल करने की सुविधा डिफ़ॉल्ट रूप से उपलब्ध होती है.
Jetpack
androidx.compose.material3लाइब्रेरी: उपयोगकर्ताओं को स्टाइलस का इस्तेमाल करके, किसी भीTextFieldकॉम्पोनेंट में लिखने की सुविधा देती है.कीबोर्ड शॉर्टकट हेल्पर: उपयोगकर्ताओं को Android प्लैटफ़ॉर्म और ऐप्लिकेशन के कीबोर्ड शॉर्टकट खोजने में मदद करता है. `
onProvideKeyboardShortcuts()` विंडो कॉलबैक को बदलकर, अपने ऐप्लिकेशन के कीबोर्ड शॉर्टकट, कीबोर्ड शॉर्टकट हेल्पर में पब्लिश करें.
सभी साइज़, डाइमेंशन या कॉन्फ़िगरेशन वाले डिवाइसों के साथ पूरी तरह से काम करने के लिए, अडैप्टिव ऐप्लिकेशन सभी तरह के इनपुट डिवाइसों के साथ काम करते हैं.
अडैप्टिव ऐप्लिकेशन की जांच करने का तरीका
अलग-अलग स्क्रीन और विंडो साइज़ और डिवाइस के अलग-अलग कॉन्फ़िगरेशन पर टेस्ट करें. अपने ऐप्लिकेशन के लेआउट की जांच करने के लिए, होस्ट‑साइड स्क्रीनशॉट और Compose की झलक का इस्तेमाल करें. अपने ऐप्लिकेशन को Android Studio एम्युलेटर और Google के डेटा सेंटर में होस्ट किए गए रिमोट Android डिवाइसों पर चलाएं.
बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के दिशा-निर्देश
बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के दिशा-निर्देशों की मदद से, यह पुष्टि की जा सकती है कि आपका अडैप्टिव ऐप्लिकेशन, टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइस, और ChromeOS डिवाइसों पर अच्छी तरह से काम करता है. इन दिशा-निर्देशों में ऐसे टेस्ट शामिल हैं जिनसे, क्रिटिकल यूज़र जर्नी के लिए, ऐप्लिकेशन की मुख्य सुविधाएं और उनके काम करने के तरीके की पुष्टि की जा सकती है. हालांकि, ये दिशा-निर्देश बड़ी स्क्रीन पर फ़ोकस करते हैं, लेकिन ये सभी स्क्रीन साइज़ के साथ काम करते हैं.
एक से ज़्यादा कॉन्फ़िगरेशन
Compose 1.7 और इसके बाद के वर्शन में मौजूद DeviceConfigurationOverride इंटरफ़ेस की मदद से, डिवाइस के कॉन्फ़िगरेशन के अलग-अलग पहलुओं को बदला जा सकता है. एपीआई, टेस्ट किए जाने वाले कंपोज़ेबल कॉन्टेंट के लिए, स्थानीय भाषा में डिवाइस के अलग-अलग कॉन्फ़िगरेशन को सिम्युलेट करता है. उदाहरण के लिए, किसी एक डिवाइस या एम्युलेटर पर, अपने टेस्ट सुइट के एक रन में, यूज़र इंटरफ़ेस (यूआई) के कई साइज़ की जांच की जा सकती है.
DeviceConfigurationOverride.then() एक्सटेंशन फ़ंक्शन की मदद से, एक साथ कई कॉन्फ़िगरेशन पैरामीटर की जांच की जा सकती है. जैसे, फ़ॉन्ट साइज़, स्थानीय भाषा, थीम, और लेआउट साइज़.
होस्ट-साइड स्क्रीनशॉट
होस्ट-साइड स्क्रीनशॉट टेस्ट, आपके ऐप्लिकेशन के लेआउट के विज़ुअल अपीयरेंस की पुष्टि करने का तेज़ और स्केलेबल तरीका है. अलग-अलग डिसप्ले साइज़ के लिए, अपने यूज़र इंटरफ़ेस (यूआई) की जांच करने के लिए, होस्ट-साइड स्क्रीनशॉट का इस्तेमाल करें.
ज़्यादा जानकारी के लिए, Compose की झलक के स्क्रीनशॉट की जांच करना लेख पढ़ें.
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 डिवाइस स्ट्रीमिंग लेख पढ़ें.
अन्य संसाधन
- I/O प्रज़ेंटेशन: अडैप्टिव Android ऐप्लिकेशन बनाना