टैबलेट सहित बड़ी स्क्रीन वाले 30 करोड़ से ज़्यादा Android डिवाइस, फ़िलहाल, फ़ोल्ड किए जा सकने वाले डिवाइस, ChromeOS डिवाइस, कार के डिसप्ले, और टीवी का इस्तेमाल किया जा रहा है. लगातार आ रहा है. बढ़ती संख्या पर उपयोगकर्ताओं को बेहतर अनुभव देना और बड़ी स्क्रीन वाले डिवाइसों की विविधता का इस्तेमाल करती है. सामान्य फ़ोन—बिल्ड पर भी अडैप्टिव ऐप्लिकेशन.
अडैप्टिव ऐप्लिकेशन क्या होते हैं?
ऐप के डिसप्ले में हुए बदलावों के आधार पर, अडैप्टिव ऐप्लिकेशन के कॉन्फ़िगरेशन लेआउट ऐप्लिकेशन विंडो के साइज़ में बदलाव करता है. हालांकि, अडैप्टिव ऐप में ऐसी सुविधाएं मिलती हैं जो फ़ोल्ड किए जा सकने वाले डिवाइसों के पॉस्चर में बदलाव होना. जैसे, टेबलटॉप या बुक पॉस्चर, साथ ही, स्क्रीन की सघनता और फ़ॉन्ट साइज़ में बदलाव होते हैं.
यूज़र इंटरफ़ेस (यूआई) एलिमेंट को खींचने या सिकुड़ने के बजाय, ज़रूरत के हिसाब से इस्तेमाल किए जाने वाले ऐप्लिकेशन, लेआउट कॉम्पोनेंट को बदल देते हैं और कॉन्टेंट को दिखाते या छिपाते हैं. उदाहरण के लिए, स्टैंडर्ड फ़ोन पर, ज़रूरत के हिसाब से इस्तेमाल किए जाने वाले ऐप्लिकेशन के पेज का सबसे नीचे वाला हिस्सा दिख सकता है जबकि बड़ी स्क्रीन पर एक नेविगेशन रेल मौजूद होती है. बड़ी स्क्रीन पर, अडैप्टिव ऐप्लिकेशन में ज़्यादा कॉन्टेंट दिखाया जाता है. जैसे, दो पैनल वाला, सूची की जानकारी वाला लेआउट; तारीख छोटी स्क्रीन, कम कॉन्टेंट, सूची या ब्यौरा.
फ़ोन का तेज़ी से लुप्त होने के दौर में, ऐप्लिकेशन फ़ुल स्क्रीन पर काम करते थे. आज, ऐप डिवाइस की स्क्रीन के बावजूद, अपने हिसाब से साइज़ की विंडो में मल्टी-विंडो मोड साइज़. उपयोगकर्ता किसी भी समय विंडो का साइज़ बदल सकते हैं. तो एक ही डिवाइस पर टाइप करते हैं, तो ऐप्लिकेशन अडैप्टिव होने चाहिए.
अडैप्टिव ऐप्लिकेशन शानदार दिखते हैं और किसी भी डिवाइस पर, किसी भी कॉन्फ़िगरेशन में अच्छी तरह काम करते हैं.
अडैप्टिव यूज़र इंटरफ़ेस (यूआई) क्यों बनाएं?
उपयोगकर्ता उम्मीद करते हैं कि आपका ऐप्लिकेशन उनके सभी डिवाइसों पर सही तरीके से काम करे और बड़ी स्क्रीन पर बेहतर सुविधाएं. उपयोगकर्ता इनके लिए मल्टी-विंडो मोड में एक साथ काम करते हैं ऐप्लिकेशन इस्तेमाल करने का बेहतर अनुभव और बेहतर प्रोडक्टिविटी.
सामान्य फ़ोन पर सिर्फ़ एक बार में एक काम करने की सुविधा वाले ऐप्लिकेशन, ऐसे उपयोगकर्ताओं को मौका नहीं दे पाते जिनकी मदद से नए उपयोगकर्ता किए जा सकते हैं जिसमें अलग-अलग तरह की संभावनाएं हों.
Google Play
Google Play, टैबलेट और फ़ोल्ड किए जा सकने वाले खास ऐप्लिकेशन का कलेक्शन उपलब्ध कराता है और सुझावों की मदद से, लोग अच्छी क्वालिटी वाले ऐप्लिकेशन खोज सकते हैं.
Play, बड़ी स्क्रीन के लिए ऑप्टिमाइज़ किए गए उन ऐप्लिकेशन और गेम को रैंक करता है जो ऑप्टिमाइज़ नहीं किए गए हैं दिखाई देता है. रैंकिंग, बड़ी स्क्रीन पर दिखने वाले ऐप्लिकेशन की क्वालिटी के लिए दिशा-निर्देशों के हिसाब से होती है. ज़्यादा रैकिंग से डिवाइस के खोजे जाने की संभावना बढ़ जाती है, क्योंकि यह एक से ज़्यादा डिवाइस इस्तेमाल करने वाले लोगों को आपका कॉन्टेंट देखने में मदद करता है बड़ी स्क्रीन के लिए खास रेटिंग और समीक्षाएं.
जो ऐप्लिकेशन Play Store के बड़ी स्क्रीन क्वालिटी के मानकों को पूरा नहीं करते चेतावनी दिखेगी. चेतावनी में उपयोगकर्ताओं को बताया जाता है कि ऐप्लिकेशन बड़ी स्क्रीन वाले डिवाइसों पर ठीक से काम नहीं करते हैं.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/building-adaptive-apps/app_with_Play_warning_message.png?authuser=0000&hl=hi)
ज़रूरत के हिसाब से ऐप्लिकेशन बनाएं, ताकि Google Play पर ज़्यादा से ज़्यादा लोग उसे खोज पाएं और अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा उन डिवाइसों की संख्या होगी जिन पर आपका ऐप्लिकेशन डाउनलोड किया जा सकता है.
शुरू करने का तरीका
ऐप्लिकेशन डेवलपमेंट की प्लानिंग से लेकर प्लान बनाने तक, हर चरण में अडैप्टिव डिज़ाइन के बारे में सोचें डिप्लॉयमेंट. ग्राफ़िक डिज़ाइनर को अडैप्टिव डिज़ाइन के बारे में जानकारी दें. अपना ऐप्लिकेशन इस तरह डिज़ाइन करें कि आपके पास ऐसा ऐप्लिकेशन बनाने की सुविधा होगी जिसे मैनेज किया जा सकता हो, जिसे बढ़ाया जा सकता हो, और जो इस्तेमाल के लिए तैयार हो इस्तेमाल करें.
हर तरह के डिसप्ले साइज़ और कॉन्फ़िगरेशन के साथ काम करने वाला अडैप्टिव ऐप्लिकेशन बनाने के लिए, यह करें निम्न:
- लेआउट के फ़ैसले लेने के लिए विंडो साइज़ क्लास का इस्तेमाल करें
- Compose Material 3 की अडैप्टिव लाइब्रेरी की मदद से बनाएं
- टच से परे इनपुट इनपुट
- हर तरह के डिवाइस पर टेस्ट करें
विंडो साइज़ की क्लास
ऐप्लिकेशन विंडो के डाइमेंशन अलग-अलग डिवाइस पर अलग-अलग या एक जैसे हो सकते हैं फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए भी सही है—भले ही ऐप्लिकेशन फ़ुल स्क्रीन मोड में क्यों न हो. अलग-अलग डिवाइस ओरिएंटेशन के हिसाब से, अलग-अलग आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) जनरेट होते हैं. तय सीमा में मल्टी-विंडो मोड, ऐप्लिकेशन विंडो के साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और ओरिएंटेशन की मदद से ये काम किए जा सकते हैं ये डिवाइस की स्क्रीन से अलग होते हैं.
अडैप्टिव ऐप्लिकेशन, चीज़ों को तय करने और मैनेज करने की समस्या को आसान और समझने में आसान बनाते हैं ऐप्लिकेशन की विंडो को ध्यान में रखते हुए, आपके विज्ञापन की विंडो के साइज़, आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात), और स्क्रीन की दिशा यह तब भी काम करता है, जब ऐप्लिकेशन विंडो फ़ुल स्क्रीन मोड में होती है.
विंडो साइज़ क्लास के तहत, ऐप्लिकेशन विंडो को कॉम्पैक्ट, मीडियम या इन कैटगरी में बांटा जाता है विंडो की चौड़ाई या ऊंचाई के आधार पर, बड़ा किया गया.
![इसमें छोटी, मीडियम, और बढ़ाई गई चौड़ाई वाली विंडो के साइज़ की क्लास दिखाई गई हैं.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_width.png?authuser=0000&hl=hi)
इसका इस्तेमाल करके अपने ऐप्लिकेशन के WindowSizeClass
का पता लगाएं:
लिखें की सुविधा का इस्तेमाल करने के लिए, currentWindowAdaptiveInfo()
टॉप-लेवल फ़ंक्शन
Material 3 वाली अडैप्टिव लाइब्रेरी. फ़ंक्शन,
WindowAdaptiveInfo
, जिसमें windowSizeClass
शामिल है. आपका ऐप्लिकेशन
विंडो साइज़ की क्लास में बदलाव होने पर, अपडेट मिलते हैं:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
कॉन्टेंट पैनल
किसी गतिविधि के लेआउट को कभी-कभी स्क्रीन कहा जाता है. उदाहरण के लिए, आपके ऐप्लिकेशन में होम स्क्रीन, सूची वाली स्क्रीन, और आइटम की जानकारी वाली स्क्रीन हो सकती है. कॉन्टेंट बनाने शब्दावली का मतलब है कि हर गतिविधि से डिवाइस की स्क्रीन भर जाती है.
हालांकि, डिवाइस की ऐसी स्क्रीन जो बढ़ी हुई चौड़ाई को सपोर्ट करने के लिए काफ़ी बड़ी हों तो कई गतिविधि स्क्रीन को एक ही समय पर ऑनस्क्रीन किया जा सकता है. अलग-अलग गतिविधियों की सामग्री को दिखाने के लिए, पैन एक ज़्यादा सटीक शब्द है.
विंडो साइज़ क्लास की मदद से, यह तय किया जा सकता है कि कितने कॉन्टेंट पैनल दिखाए जाएं मल्टी-पैनल लेआउट, जैसा कि मटीरियल डिज़ाइन में बताया गया है.
![डिवाइस की स्क्रीन, पैनल में बंटी होती हैं: छोटी और मध्यम विंडो साइज़ वाली क्लास में एक पैनल और बड़ी की गई विंडो के साइज़ की क्लास में दो पैनल.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/panes_for_window_size_classes.png?authuser=0000&hl=hi)
पैनल में नेविगेट किया जा सकता है. छोटी और मध्यम विंडो साइज़ वाली क्लास में, ऐप्लिकेशन सिंगल पैनल; इसलिए, किसी भी डेस्टिनेशन पर जाने के लिए नेविगेशन एक पैनल दिखता है.
बढ़ाई गई विंडो के साइज़ वाली क्लास में, ऐप्लिकेशन मिलता-जुलता कॉन्टेंट कई फ़ॉर्मैट में दिखा सकता है पैनल, जैसे कि सूची की जानकारी वाला लेआउट. किसी भी पैनल के डिसप्ले पर नेविगेट करना टू-पैनल लेआउट. अगर विंडो का साइज़ छोटा या मीडियम हो जाता है, अडैप्टिव ऐप्लिकेशन सिर्फ़ एक पैनल, नेविगेशन डेस्टिनेशन, यानी कि सूची या कर सकते हैं.
|
|
कंपोज़ मटीरियल 3 अडैप्टिव
Jetpack Compose, ज़रूरत के हिसाब से ऐप्लिकेशन बनाने का आधुनिक और एलान वाला तरीका है वह कई लेआउट फ़ाइलों के डुप्लिकेशन और रखरखाव के बोझ को कम कर देता है.
Compose Material 3 अडैप्टिव लाइब्रेरी में ऐसे कंपोज़ेबल होते हैं जो विंडो साइज़ क्लास, नेविगेशन कॉम्पोनेंट, मल्टी-पैनल लेआउट, और फ़ोल्ड किए जा सकने वाले पॉस्चर और हिंज लोकेशन, उदाहरण के लिए:
NavigationSuiteScaffold
: इसकी मदद से, नेविगेशन बार के बीच अपने-आप स्विच किया जा सकता है और नेविगेशन रेल, ऐप्लिकेशन की विंडो के साइज़ की क्लास और डिवाइस के पॉस्चर के हिसाब से तय होती है.ListDetailPaneScaffold
: सूची की जानकारी वाले कैननिकल यूआरएल को लागू करता है लेआउट.इससे लेआउट को ऐप्लिकेशन की विंडो के साइज़ के हिसाब से सेट किया जा सकता है. इस बटन पर क्लिक करने से, विंडो के बड़े किए गए साइज़ पर, अगल-बगल में मौजूद पैनल में सूची आइटम क्लास, लेकिन छोटी और मीडियम साइज़ वाली विंडो के लिए सिर्फ़ सूची या ब्यौरा क्लास.
SupportingPaneScaffold
: सहायक पैनल कैननिकल को लागू करता है लेआउट.बड़ी विंडो पर, मुख्य कॉन्टेंट पैनल और सहायक पैनल के बारे में जानकारी मिलती है साइज़ क्लास, लेकिन छोटा और मीडियम साइज़ की विंडो में सिर्फ़ मुख्य कॉन्टेंट पैनल क्लास.
Compose Material 3 की अडैप्टिव लाइब्रेरी पर ज़रूरत के हिसाब से ऐप्लिकेशन डेवलप करना.
कॉन्फ़िगरेशन और कंटिन्युइटी
कॉन्फ़िगरेशन में बदलाव होने पर भी, अडैप्टिव ऐप्लिकेशन की सुविधा का इस्तेमाल किया जा सकता है.
कॉन्फ़िगरेशन में तब बदलाव होता है, जब ऐप्लिकेशन विंडो का साइज़ बदला जाता है. ऐसा तब होता है, जब ऐप्लिकेशन की पोज़िशन फ़ोल्ड किए जा सकने वाले डिवाइस या स्क्रीन की सघनता या फ़ॉन्ट में बदलाव.
डिफ़ॉल्ट रूप से, कॉन्फ़िगरेशन में बदलाव करके, ऐप्लिकेशन में की गई गतिविधि और सभी गतिविधियों की जानकारी को फिर से बनाया जाता है
राज्य खो जाता है. सुविधा को बनाए रखने के लिए, अडैप्टिव ऐप्लिकेशन,
गतिविधि onSaveInstanceState()
वाले तरीके का इस्तेमाल करें या ViewModel
में सेव करें.
पॉस्चर
फ़ोल्ड किए जा सकने वाले डिवाइसों के आस-पास होने वाले बदलावों के हिसाब से, अडैप्टिव ऐप्लिकेशन काम करते हैं. पॉस्चर टेबलटॉप और किताब का पॉस्चर शामिल करें.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/building-adaptive-apps/foldable_in_tabletop_posture.png?authuser=0000&hl=hi)
Jetpack WindowManager के WindowInfoTracker
इंटरफ़ेस की मदद से, ये काम किए जा सकते हैं
डिवाइस के लिए DisplayFeature
ऑब्जेक्ट की सूची पाएं. डिसप्ले में
FoldingFeature.State
फ़ीचर है. इससे पता चलता है कि डिवाइस
पूरा या आधा खुला होता है.
Compose Material 3 की अडैप्टिव लाइब्रेरी से
currentWindowAdaptiveInfo()
टॉप-लेवल फ़ंक्शन, जो नतीजे के तौर पर
WindowAdaptiveInfo
का इंस्टेंस, जिसमें windowPosture
शामिल है.
टच के बिना इनपुट करें
उपयोगकर्ता अक्सर बाहरी कीबोर्ड, ट्रैकपैड, माउस, और स्टाइलस को बड़े स्क्रीन डिवाइस. सहायक डिवाइस आपकी प्रोडक्टिविटी बढ़ाने के साथ-साथ, सटीक इनपुट देते हैं. और सुलभता शामिल है. ज़्यादातर ChromeOS डिवाइसों में, पहले से मौजूद कीबोर्ड और ट्रैकपैड.
अडैप्टिव ऐप्लिकेशन, बाहरी इनपुट डिवाइसों के साथ काम करते हैं. हालांकि, इनमें से ज़्यादातर काम, लागू करने के लिए:
Jetpack Compose 1.7 और उसके बाद के वर्शन: कीबोर्ड टैब नेविगेशन और माउस या ट्रैकपैड पर क्लिक करने, चुनने, और स्क्रोल करने की सुविधा डिफ़ॉल्ट रूप से काम करती है.
Jetpack
androidx.compose.material3
लाइब्रेरी: इससे लोगों को लिखने में मदद मिलती है स्टाइलस का इस्तेमाल करके किसी भीTextField
कॉम्पोनेंट में जोड़ दिया जाएगा.कीबोर्ड शॉर्टकट हेल्पर: Android प्लैटफ़ॉर्म और ऐप्लिकेशन कीबोर्ड बनाता है ऐसे शॉर्टकट जिन्हें उपयोगकर्ता आसानी से खोज सकें. अपने ऐप्लिकेशन के कीबोर्ड शॉर्टकट को इसमें पब्लिश करें को ओवरराइड करने के द्वारा कीबोर्ड शॉर्टकट सहायक
onProvideKeyboardShortcuts()
विंडो कॉलबैक.
हर साइज़ के डिवाइस के नाप या आकार के हिसाब से काम करने के लिए, अडैप्टिव ऐप्लिकेशन, सभी साइज़ के इनपुट डिवाइसों पर काम करते हैं प्रकार.
ज़रूरत के हिसाब से बनाए गए ऐप्लिकेशन को टेस्ट करने का तरीका
अलग-अलग स्क्रीन और विंडो साइज़ के साथ-साथ, अलग-अलग डिवाइस कॉन्फ़िगरेशन आज़माएं. अपने ऐप्लिकेशन के लेआउट देखने के लिए होस्ट के स्क्रीनशॉट और झलक लिखें का इस्तेमाल करें. अपना ऐप्लिकेशन, होस्ट किए गए Android Studio एम्युलेटर और रिमोट Android डिवाइसों पर चलाएं Google डेटा सेंटर.
बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के लिए दिशा-निर्देश
बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी के लिए दिशा-निर्देश यह पक्का करते हैं कि ज़रूरत के हिसाब से बनाए गए आपके ऐप्लिकेशन की सुविधा ठीक से काम करे फ़ोल्ड किए जा सकने वाले डिवाइस, और ChromeOS डिवाइसों पर. दिशा-निर्देशों में ऐसी जांच शामिल हैं जो आपको उपयोगकर्ता की ज़रूरी गतिविधियों के लिए, ऐप्लिकेशन की मुख्य सुविधाओं और उनके काम करने के तरीके की पुष्टि करने की सुविधा मिलती है. हालांकि, बड़ी स्क्रीन के लिए दिशा-निर्देश ज़्यादा होते हैं. ये सभी साइज़ की स्क्रीन पर काम करते हैं.
एक से ज़्यादा कॉन्फ़िगरेशन
Compose 1.7 और इसके बाद के वर्शन में DeviceConfigurationOverride
इंटरफ़ेस
आपको डिवाइस कॉन्फ़िगरेशन के कई पहलुओं को बदलने की सुविधा देता है. एपीआई
यह सभी चीज़ों के लिए स्थानीय भाषा में अलग-अलग डिवाइस कॉन्फ़िगरेशन को सिम्युलेट करता है
कंपोज़ेबल कॉन्टेंट को टेस्ट करना है. उदाहरण के लिए, कई,
किसी एक डिवाइस पर आपके टेस्ट सुइट को एक ही बार चलाने पर आर्बिट्रेरी यूज़र इंटरफ़ेस (यूआई) साइज़ या
एम्युलेटर.
DeviceConfigurationOverride.then()
एक्सटेंशन फ़ंक्शन की मदद से, ये काम किए जा सकते हैं
कई कॉन्फ़िगरेशन पैरामीटर, जैसे कि फ़ॉन्ट साइज़, स्थान-भाषा, थीम, और
लेआउट साइज़, सभी को एक साथ रखा जा सकता है.
होस्ट साइड स्क्रीनशॉट
होस्ट-साइड स्क्रीनशॉट टेस्ट, विज़ुअल की पुष्टि करने का तेज़ और बढ़ाने वाला तरीका है आपके ऐप्लिकेशन के लेआउट कैसा दिखेगा. होस्ट-साइड स्क्रीनशॉट का इस्तेमाल करके, अपने यूज़र इंटरफ़ेस (यूआई) की जांच करें अलग-अलग तरह के डिसप्ले साइज़.
ज़्यादा जानकारी के लिए, स्क्रीनशॉट की झलक दिखाने वाली टेस्टिंग कंपोज़ करें पर जाएं.
झलक लिखें
'झलक देखें' सुविधा से, Android के डिज़ाइन व्यू में अपने ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) देखा जा सकता है
स्टूडियो. झलक में एनोटेशन इस्तेमाल किए जाते हैं, जैसे कि @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 ऐप्लिकेशन बनाना