फ़िलहाल, बड़ी स्क्रीन वाले 30 करोड़ से ज़्यादा Android डिवाइस इस्तेमाल किए जा रहे हैं. इनमें टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइस, ChromeOS डिवाइस, कार के डिसप्ले, और टीवी शामिल हैं. आने वाले समय में, इनकी संख्या और बढ़ेगी. बड़ी स्क्रीन वाले डिवाइसों और स्टैंडर्ड फ़ोन पर, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, अडैप्टिव ऐप्लिकेशन बनाएं. इनकी संख्या और तरह-तरह के डिवाइसों का इस्तेमाल बढ़ रहा है.
अडैप्टिव ऐप्लिकेशन क्या होते हैं?
अडैप्टिव ऐप्लिकेशन, ऐप्लिकेशन डिसप्ले में हुए बदलावों के आधार पर लेआउट बदलते हैं. इनमें मुख्य रूप से, ऐप्लिकेशन विंडो का साइज़ शामिल है. हालांकि, अडैप्टिव ऐप्लिकेशन, फ़ोल्ड किए जा सकने वाले डिवाइसों के पोज़िशन में होने वाले बदलावों के साथ भी काम करते हैं. जैसे, टेबलटॉप या किताब के पोज़िशन में होने वाले बदलाव. साथ ही, स्क्रीन डेंसिटी और फ़ॉन्ट साइज़ में होने वाले बदलावों के साथ भी काम करते हैं.
अडैप्टिव ऐप्लिकेशन, अलग-अलग विंडो साइज़ के हिसाब से यूज़र इंटरफ़ेस (यूआई) एलिमेंट को सिर्फ़ स्ट्रेच या छोटा करने के बजाय, लेआउट कॉम्पोनेंट को बदल देते हैं. साथ ही, कॉन्टेंट को दिखाते या छिपाते हैं. उदाहरण के लिए, स्टैंडर्ड फ़ोन पर, अडैप्टिव ऐप्लिकेशन में नीचे नेविगेशन बार दिख सकता है. वहीं, बड़ी स्क्रीन पर नेविगेशन रेल दिख सकती है. बड़ी स्क्रीन पर, ऐडैप्टिव ऐप्लिकेशन ज़्यादा कॉन्टेंट दिखाते हैं. जैसे, दो पैनल वाला, सूची-जानकारी वाला लेआउट. वहीं, छोटी स्क्रीन पर, कम कॉन्टेंट दिखाया जाता है. जैसे, सूची या जानकारी.
फ़ोन पर काम करने वाले ऐप्लिकेशन, फ़ुल स्क्रीन मोड में काम करते थे. हालांकि, अब इन ऐप्लिकेशन का इस्तेमाल बहुत कम हो गया है. फ़िलहाल, ऐप्लिकेशन कई विंडो मोड में चलते हैं. इन विंडो का साइज़, डिवाइस की स्क्रीन के साइज़ से अलग हो सकता है. उपयोगकर्ता किसी भी समय विंडो का साइज़ बदल सकते हैं. इसलिए, किसी एक तरह के डिवाइस पर भी, ऐप्लिकेशन को डिवाइस के हिसाब से बदलना चाहिए.
अडैप्टिव ऐप्लिकेशन, किसी भी डिवाइस पर किसी भी कॉन्फ़िगरेशन में अच्छे दिखते हैं और बेहतर तरीके से काम करते हैं.
अडैप्टिव यूज़र इंटरफ़ेस (यूआई) क्यों बनाए जाते हैं?
उपयोगकर्ताओं को उम्मीद होती है कि आपका ऐप्लिकेशन उनके सभी डिवाइसों पर बिना किसी रुकावट के काम करे. साथ ही, बड़ी स्क्रीन पर बेहतर सुविधाएं उपलब्ध कराए. उपयोगकर्ता, ऐप्लिकेशन का बेहतर अनुभव पाने और ज़्यादा काम करने के लिए, कई विंडो वाले मोड में कई काम एक साथ कर सकते हैं.
स्टैंडर्ड फ़ोन पर एक ही काम करने वाले ऐप्लिकेशन, अलग-अलग काम करने की सुविधाओं के साथ बढ़ते उपयोगकर्ता आधार का फ़ायदा नहीं ले पाते.
Google Play
Google Play, टैबलेट और फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए, ऐप्लिकेशन के कलेक्शन और सुझाव उपलब्ध कराता है. इससे, उपयोगकर्ताओं को अच्छी क्वालिटी के ऐप्लिकेशन खोजने में मदद मिलती है.
Play, बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किए गए ऐप्लिकेशन और गेम को, ऑप्टिमाइज़ नहीं किए गए ऐप्लिकेशन के मुकाबले ज़्यादा प्राथमिकता देता है. रैंकिंग, बड़ी स्क्रीन के लिए ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों के आधार पर तय की जाती है. रैंकिंग में ऊपर रहने से, ऐप्लिकेशन को खोजने में आसानी होती है. ऐसा इसलिए होता है, क्योंकि मल्टी-डिवाइस इस्तेमाल करने वाले लोग अपने फ़ोन पर, बड़ी स्क्रीन के हिसाब से रेटिंग और समीक्षाएं देख पाते हैं.
जिन ऐप्लिकेशन की क्वालिटी, Play Store के बड़े स्क्रीन के क्वालिटी स्टैंडर्ड के मुताबिक नहीं होती उनके ऐप्लिकेशन की ज़्यादा जानकारी वाले पेज पर चेतावनी दिखती है. इस चेतावनी से उपयोगकर्ताओं को यह जानकारी मिलती है कि ऐप्लिकेशन, बड़ी स्क्रीन वाले डिवाइसों पर अच्छी तरह से काम नहीं कर सकता.
Google Play पर अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के लिए, ऐडैप्टिव ऐप्लिकेशन बनाएं. इससे, आपके ऐप्लिकेशन को डाउनलोड करने वाले डिवाइसों की संख्या भी बढ़ेगी.
शुरू करने का तरीका
ऐप्लिकेशन के डेवलपमेंट के सभी चरणों में, अडैप्टिव डिज़ाइन का इस्तेमाल करें. जैसे, प्लानिंग से लेकर डिप्लॉयमेंट तक. ग्राफ़िक डिज़ाइनर को अडैप्टिव डिज़ाइन के बारे में बताएं. अपने ऐप्लिकेशन को ऐडैप्टिव डिज़ाइन करें. इससे आपको ऐसा ऐप्लिकेशन बनाने में मदद मिलेगी जिसे मैनेज किया जा सकता है, जिसे बड़ा किया जा सकता है, और जो आने वाले समय में डिवाइस के नाप या आकार और विंडो मोड के लिए तैयार होगा.
सभी डिसप्ले साइज़ और कॉन्फ़िगरेशन के साथ काम करने वाला अडैप्टिव ऐप्लिकेशन बनाने के लिए, ये काम करें:
- लेआउट से जुड़े फ़ैसले लेने के लिए, विंडो साइज़ क्लास का इस्तेमाल करना
- Compose Material 3 की अडैप्टिव लाइब्रेरी का इस्तेमाल करके बनाना
- टच के अलावा अन्य इनपुट का इस्तेमाल करना
- सभी तरह के डिवाइसों पर टेस्ट करना
विंडो के साइज़ की क्लास
अलग-अलग डिवाइसों पर ऐप्लिकेशन विंडो के डाइमेंशन अलग-अलग हो सकते हैं. इसके अलावा, फ़ोल्ड किए जा सकने वाले डिवाइसों पर, एक ही डिवाइस पर भी ऐप्लिकेशन के डाइमेंशन अलग-अलग हो सकते हैं. भले ही, ऐप्लिकेशन फ़ुल स्क्रीन पर हो. डिवाइस के अलग-अलग ओरिएंटेशन से अलग-अलग आसपेक्ट रेशियो बनते हैं. कई विंडो वाले मोड में, ऐप्लिकेशन विंडो का साइज़, आसपेक्ट रेशियो, और ओरिएंटेशन, डिवाइस की स्क्रीन से अलग हो सकता है.
अडैप्टिव ऐप्लिकेशन, लेआउट को रेंडर करते समय सिर्फ़ ऐप्लिकेशन विंडो को ध्यान में रखते हैं. इससे, विंडो के साइज़, आसपेक्ट रेशियो, और ओरिएंटेशन को तय करने और मैनेज करने की समस्या को आसानी से हल किया जा सकता है. यह सुविधा, ऐप्लिकेशन विंडो के फ़ुल स्क्रीन होने पर भी काम करती है.
विंडो के साइज़ की कैटगरी, विंडो की चौड़ाई या ऊंचाई के आधार पर, ऐप्लिकेशन विंडो को कॉम्पैक्ट, मीडियम या बड़ा कैटगरी में बांटती हैं.
Compose Material 3 ऐडैप्टिव लाइब्रेरी के currentWindowAdaptiveInfo() टॉप-लेवल फ़ंक्शन का इस्तेमाल करके, अपने ऐप्लिकेशन के WindowSizeClass का हिसाब लगाएं. यह फ़ंक्शन, WindowAdaptiveInfo का एक इंस्टेंस दिखाता है, जिसमें windowSizeClass शामिल है. विंडो साइज़ की क्लास में बदलाव होने पर, आपके ऐप्लिकेशन को अपडेट मिलते हैं:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
कॉन्टेंट पैनल
गतिविधि के लेआउट को कभी-कभी स्क्रीन भी कहा जाता है. उदाहरण के लिए, आपके ऐप्लिकेशन में होम स्क्रीन, सूची वाली स्क्रीन, और आइटम की जानकारी वाली स्क्रीन हो सकती है. इस शब्द से पता चलता है कि हर गतिविधि, डिवाइस की स्क्रीन को भरती है.
हालांकि, जिन डिवाइस की स्क्रीन, विंडो के बड़े साइज़ के साथ काम करती हैं उन पर एक साथ कई गतिविधि स्क्रीन दिख सकती हैं. अलग-अलग गतिविधियों के कॉन्टेंट डिसप्ले के लिए, पैनल एक ज़्यादा सटीक शब्द है.
विंडो साइज़ क्लास की मदद से, यह तय किया जा सकता है कि कई पैनल वाले लेआउट में कितने कॉन्टेंट पैनल दिखाने हैं. इस बारे में Material Design में बताया गया है.
पैनल पर नेविगेट किया जा सकता है. कॉम्पैक्ट और मीडियम विंडो साइज़ क्लास पर, ऐप्लिकेशन एक पैनल दिखाते हैं. इसलिए, किसी भी डेस्टिनेशन पर नेविगेट करने पर एक पैनल दिखता है.
बड़े किए गए विंडो साइज़ क्लास पर, ऐप्लिकेशन एक से ज़्यादा पैनल में मिलता-जुलता कॉन्टेंट दिखा सकते हैं. जैसे, सूची के ज़्यादा जानकारी वाले लेआउट में. किसी भी पैनल पर नेविगेट करने पर, दो पैनल वाला लेआउट दिखता है. अगर विंडो का साइज़ कॉम्पैक्ट या मीडियम में बदल जाता है, तो ऐडैप्टिव ऐप्लिकेशन सिर्फ़ एक पैनल दिखाते हैं. यह पैनल, नेविगेशन डेस्टिनेशन, सूची या जानकारी में से कोई एक होता है.
|
|
|
Compose Material 3 Adaptive
Jetpack Compose, ऐडैप्टिव ऐप्लिकेशन बनाने के लिए एक आधुनिक और बेहतर तरीका है. इसमें, एक से ज़्यादा लेआउट फ़ाइलों को डुप्लीकेट करने और उन्हें मैनेज करने की ज़रूरत नहीं होती.
Compose Material 3 की अडैप्टिव लाइब्रेरी में ऐसे कॉम्पोज़ेबल होते हैं जो विंडो साइज़ क्लास, नेविगेशन कॉम्पोनेंट, कई पैनल वाले लेआउट, और फ़ोल्ड किए जा सकने वाले डिवाइस के पोज़िशन और हिंज की जगह को मैनेज करते हैं. उदाहरण के लिए:
NavigationSuiteScaffold: ऐप्लिकेशन विंडो के साइज़ क्लास और डिवाइस के पोज़िशन के हिसाब से, नेविगेशन बार और नेविगेशन रेल के बीच अपने-आप स्विच करता है.ListDetailPaneScaffold: list-detail कैननिकल लेआउट लागू करता है.लेआउट को ऐप्लिकेशन विंडो के साइज़ के हिसाब से अडजस्ट करता है. विंडो के बड़े साइज़ वाले क्लास में, सूची के आइटम की सूची और जानकारी को एक साथ दिखाता है. हालांकि, कॉम्पैक्ट और मीडियम साइज़ वाले विंडो क्लास में, सिर्फ़ सूची या जानकारी दिखती है.
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()विंडो कॉलबैक को बदलकर, अपने ऐप्लिकेशन के कीबोर्ड शॉर्टकट को कीबोर्ड शॉर्टकट सहायक में पब्लिश करें.
सभी साइज़ के फ़ॉर्म फ़ैक्टर के साथ पूरी तरह काम करने के लिए, अडैप्टिव ऐप्लिकेशन सभी तरह के इनपुट के साथ काम करते हैं.
अडैप्टिव ऐप्लिकेशन की जांच करने का तरीका
अलग-अलग स्क्रीन और विंडो साइज़ और डिवाइस के अलग-अलग कॉन्फ़िगरेशन की जांच करें. अपने ऐप्लिकेशन के लेआउट देखने के लिए, होस्ट साइड स्क्रीनशॉट और Compose की झलक का इस्तेमाल करें. Android Studio के एमुलेटर और Google के डेटा सेंटर में होस्ट किए गए रिमोट Android डिवाइसों पर अपना ऐप्लिकेशन चलाएं.
बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के लिए दिशा-निर्देश
बड़ी स्क्रीन वाले डिवाइसों के लिए ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देश, यह पक्का करते हैं कि आपका अडैप्टिव ऐप्लिकेशन, टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइसों, और ChromeOS डिवाइसों पर अच्छी तरह से काम करे. दिशा-निर्देशों में ऐसे टेस्ट शामिल हैं जिनकी मदद से, उपयोगकर्ताओं के सफ़र के दौरान ऐप्लिकेशन के काम करने के तरीके की पुष्टि की जा सकती है. हालांकि, ये दिशा-निर्देश बड़ी स्क्रीन पर फ़ोकस करते हैं, लेकिन ये सभी स्क्रीन साइज़ के साथ काम करते हैं.
एक से ज़्यादा कॉन्फ़िगरेशन
Compose 1.7 और इसके बाद के वर्शन में मौजूद DeviceConfigurationOverride इंटरफ़ेस की मदद से, डिवाइस कॉन्फ़िगरेशन के अलग-अलग पहलुओं को बदला जा सकता है. यह एपीआई, अलग-अलग डिवाइस कॉन्फ़िगरेशन को स्थानीय भाषा में सिम्युलेट करता है. ऐसा, कॉम्पोज़ किए जा सकने वाले जिस भी कॉन्टेंट की आपको जांच करनी है उसके लिए किया जाता है. उदाहरण के लिए, किसी एक डिवाइस या एम्युलेटर पर, टेस्ट सुइट के एक ही रन में कई यूज़र इंटरफ़ेस (यूआई) साइज़ का टेस्ट किया जा सकता है.
DeviceConfigurationOverride.then() एक्सटेंशन फ़ंक्शन की मदद से, एक ही समय में कई कॉन्फ़िगरेशन पैरामीटर की जांच की जा सकती है. जैसे, फ़ॉन्ट साइज़, लोकल भाषा, थीम, और लेआउट साइज़.
होस्ट-साइड स्क्रीनशॉट
होस्ट-साइड स्क्रीनशॉट टेस्ट, आपके ऐप्लिकेशन लेआउट के विज़ुअल दिखने की पुष्टि करने का तेज़ और स्केलेबल तरीका है. अलग-अलग डिसप्ले साइज़ के लिए, अपने यूज़र इंटरफ़ेस (यूआई) की जांच करने के लिए, होस्ट-साइड स्क्रीनशॉट का इस्तेमाल करें.
ज़्यादा जानकारी के लिए, झलक के स्क्रीनशॉट की जांच करने के लिए कॉम्पोनेंट बनाना लेख पढ़ें.
झलकें कंपोज़ करना
झलकें बनाने की सुविधा की मदद से, 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 ऐप्लिकेशन बनाना