हमें यह बताते हुए खुशी हो रही है कि Android पर मोबाइल और डेस्कटॉप कंप्यूटिंग को एक साथ लाने के लिए, हमने एक अहम पड़ाव पार कर लिया है. कनेक्ट किए गए डिसप्ले की सुविधा, Android 16 QPR3 की रिलीज़ के साथ ही, सभी के लिए उपलब्ध हो गई है!

Google I/O 2025 में दिखाए गए कनेक्ट किए गए डिसप्ले की सुविधा की मदद से, लोग अपने Android डिवाइसों को किसी बाहरी मॉनिटर से कनेक्ट कर सकते हैं. साथ ही, डेस्कटॉप विंडो एनवायरमेंट को तुरंत ऐक्सेस कर सकते हैं. ऐप्लिकेशन को फ़्री-फ़ॉर्म या मैक्सिमाइज़ की गई विंडो में इस्तेमाल किया जा सकता है. साथ ही, उपयोगकर्ता डेस्कटॉप ओएस की तरह ही मल्टीटास्किंग कर सकते हैं.

Google और Samsung ने मिलकर, Android 16 पर काम करने वाले Android नेटवर्क के सभी डिवाइसों पर, डेस्कटॉप विंडोइंग की सुविधा को बेहतर बनाया है. इससे, बाहरी डिसप्ले से कनेक्ट करने पर, इस सुविधा का इस्तेमाल आसानी से किया जा सकता है. 
यह सुविधा अब उन उपयोगकर्ताओं के लिए आम तौर पर उपलब्ध है जो अपने Pixel और Samsung फ़ोन को बाहरी मॉनिटर से कनेक्ट कर सकते हैं. हालांकि, यह सुविधा सिर्फ़ उन डिवाइसों पर उपलब्ध है जो इसके साथ काम करते हैं*. इससे, ऐप्लिकेशन को ज़्यादा दिलचस्प और ज़्यादा काम का बनाने के नए अवसर मिलते हैं. साथ ही, ऐप्लिकेशन को अलग-अलग फ़ॉर्म फ़ैक्टर के हिसाब से अडजस्ट किया जा सकता है.

यह सुविधा कैसे काम करती है?

जब इस सुविधा के साथ काम करने वाले Android फ़ोन या फ़ोल्डेबल डिवाइस को किसी बाहरी डिसप्ले से कनेक्ट किया जाता है, तब कनेक्ट किए गए डिसप्ले पर एक नया डेस्कटॉप सेशन शुरू होता है.

कनेक्ट किए गए डिसप्ले पर, डेस्कटॉप जैसा अनुभव मिलता है. इसमें एक टास्कबार भी शामिल होता है. इस टास्कबार पर, चालू ऐप्लिकेशन दिखते हैं. साथ ही, लोग ऐप्लिकेशन को पिन करके उन्हें तुरंत ऐक्सेस कर सकते हैं. कनेक्ट किए गए डिसप्ले पर, उपयोगकर्ता एक साथ कई ऐप्लिकेशन चला सकते हैं. इसके लिए, वे विंडो का साइज़ अपनी ज़रूरत के हिसाब से बदल सकते हैं.

फ़ोन को किसी बाहरी डिसप्ले से कनेक्ट किया गया है. डिसप्ले पर डेस्कटॉप सेशन चल रहा है, जबकि फ़ोन अपनी स्थिति बनाए रखता है.

डेस्कटॉप विंडोइंग की सुविधा के साथ काम करने वाले किसी डिवाइस (जैसे, Samsung Galaxy Tab S11 जैसे टैबलेट) को बाहरी डिसप्ले से कनेक्ट करने पर, डेस्कटॉप सेशन दोनों डिसप्ले पर दिखता है. इससे आपको ज़्यादा बड़ा वर्कस्पेस मिलता है. इसके बाद, दोनों डिसप्ले एक ही सिस्टम के तौर पर काम करते हैं. इससे ऐप्लिकेशन विंडो, कॉन्टेंट, और कर्सर को डिसप्ले के बीच आसानी से ले जाया जा सकता है.

टैबलेट को बाहरी डिसप्ले से कनेक्ट किया गया है. इससे डेस्कटॉप सेशन को दोनों डिसप्ले पर एक्सटेंड किया जा सकता है.

यह क्यों ज़रूरी है?

Android 16 QPR3 की रिलीज़ में, हमने कनेक्ट किए गए डिसप्ले के अनुभव को बेहतर बनाने के लिए, विंडो के व्यवहार, टास्कबार के साथ इंटरैक्शन, और इनपुट डिवाइसों के साथ काम करने की सुविधा (माउस और कीबोर्ड) को फ़ाइनल कर दिया है. हमने विंडो को बड़ा करने और डिसप्ले स्विच करते समय ऐप्लिकेशन को फिर से चालू होने से रोकने के लिए, कंपैटिबिलिटी ट्रीटमेंट भी शामिल किए हैं.

अगर आपका ऐप्लिकेशन अडैप्टिव डिज़ाइन के सिद्धांतों के हिसाब से बनाया गया है, तो यह डेस्कटॉप पर अपने-आप उसी तरह दिखेगा जैसा कि मोबाइल पर दिखता है. इससे उपयोगकर्ताओं को लगेगा कि वे अपने जाने-पहचाने ऐप्लिकेशन का इस्तेमाल कर रहे हैं. अगर ऐप्लिकेशन को सिर्फ़ पोर्ट्रेट मोड में इस्तेमाल किया जा सकता है या उसमें सिर्फ़ टच इंटरफ़ेस है, तो अब उसे आधुनिक बनाने का समय आ गया है.

खास तौर पर, कनेक्ट किए गए डिसप्ले पर ऐप्लिकेशन का बेहतर अनुभव देने के लिए, इन सबसे सही तरीकों पर ध्यान दें:

• Display ऑब्जेक्ट को स्थिर न मानें: जब किसी ऐप्लिकेशन की विंडो को बाहरी डिसप्ले पर ले जाया जाता है या डिसप्ले कॉन्फ़िगरेशन में बदलाव होता है, तब आपके ऐप्लिकेशन के कॉन्टेक्स्ट से जुड़ा Display ऑब्जेक्ट बदल सकता है. आपके ऐप्लिकेशन को कॉन्फ़िगरेशन में बदलाव से जुड़े इवेंट को आसानी से मैनेज करना चाहिए. साथ ही, डिसप्ले मेट्रिक को कैश मेमोरी में सेव करने के बजाय, डाइनैमिक तरीके से क्वेरी करना चाहिए.
• डेंसिटी कॉन्फ़िगरेशन में बदलाव: बाहरी डिसप्ले की पिक्सल डेंसिटी, प्राइमरी डिवाइस की स्क्रीन से काफ़ी अलग हो सकती है. पक्का करें कि आपके लेआउट और संसाधन, इन बदलावों के हिसाब से सही तरीके से काम कर रहे हों, ताकि यूज़र इंटरफ़ेस (यूआई) साफ़ तौर पर दिखे और इस्तेमाल करने में आसान हो. लेआउट के लिए डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) का इस्तेमाल करें. साथ ही, डेंसिटी के हिसाब से संसाधन उपलब्ध कराएं और यह पक्का करें कि आपका यूज़र इंटरफ़ेस (यूआई) सही तरीके से स्केल हो.
• बाहरी पेरीफ़ेरल को सही तरीके से सपोर्ट करना: जब उपयोगकर्ता किसी बाहरी मॉनिटर से कनेक्ट करते हैं, तो वे अक्सर डेस्कटॉप जैसा एनवायरमेंट बनाते हैं. इसके लिए, अक्सर बाहरी कीबोर्ड, माउस, ट्रैकपैड, वेबकैम, माइक्रोफ़ोन, और स्पीकर का इस्तेमाल किया जाता है. कीबोर्ड और माउस से इंटरैक्ट करने की सुविधा को बेहतर बनाया गया है.

मॉडर्न टूल की मदद से, डेस्कटॉप के लिए आने वाले समय में उपलब्ध होने वाली सुविधाओं को तैयार करना

हम आपको डेस्कटॉप पर बेहतर अनुभव देने के लिए, कई टूल उपलब्ध कराते हैं. आइए, अडैप्टिव लाइब्रेरी से जुड़े हाल ही के अपडेट के बारे में फिर से जान लेते हैं!

विंडो के साइज़ की नई क्लास: बड़ी और बहुत बड़ी

Jetpack WindowManager 1.5.0 में सबसे बड़ा अपडेट यह है कि इसमें चौड़ाई के हिसाब से विंडो के साइज़ की दो नई क्लास जोड़ी गई हैं: बड़ी और बहुत बड़ी.

विंडो के साइज़ की क्लास, व्यूपोर्ट ब्रेकपॉइंट का हमारा आधिकारिक सेट है. इससे आपको अडैप्टिव लेआउट डिज़ाइन और डेवलप करने में मदद मिलती है. 1.5.0 वर्शन में, हमने इस गाइडलाइन को उन स्क्रीन के लिए भी उपलब्ध कराया है जो आम तौर पर टैबलेट के साइज़ से बड़ी होती हैं.

चौड़ाई के नए ब्रेकपॉइंट यहां दिए गए हैं:

• बड़ा: 1200 डीपी और 1600 डीपी के बीच की चौड़ाई के लिए
• बहुत बड़ा: चौड़ाई ≥1600dp के लिए

डिसप्ले की चौड़ाई के आधार पर, विंडो के साइज़ की अलग-अलग क्लास.

बहुत बड़ी स्क्रीन पर, टैबलेट के बढ़े हुए लेआउट को सिर्फ़ बड़ा करने से, उपयोगकर्ताओं को हमेशा बेहतर अनुभव नहीं मिलता. उदाहरण के लिए, कोई ईमेल क्लाइंट, बड़ी की गई विंडो के साइज़ क्लास में दो पैन (मेलबॉक्स और मैसेज) आसानी से दिखा सकता है. हालाँकि, बहुत बड़े डेस्कटॉप मॉनिटर पर, ईमेल क्लाइंट एक साथ तीन या चार पैन दिखा सकता है. जैसे, मेलबॉक्स, ईमेल की सूची, ईमेल का पूरा कॉन्टेंट, और कैलेंडर/टास्क पैनल.

अपने प्रोजेक्ट में नई विंडो साइज़ क्लास शामिल करने के लिए, WindowSizeClass.BREAKPOINTS_V1 के बजाय WindowSizeClass.BREAKPOINTS_V2 सेट से फ़ंक्शन को कॉल करें:

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

इसके बाद, सही लेआउट लागू करें. हालांकि, ऐसा तब करें, जब आपको पक्का हो कि आपके ऐप्लिकेशन में कम से कम इतनी जगह है:

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Jetpack Navigation 3 की मदद से अडैप्टिव लेआउट बनाना

Navigation 3, Jetpack कलेक्शन में नया जोड़ा गया है. Navigation 3, अभी-अभी अपनी पहली स्टेबल रिलीज़ पर पहुंचा है. यह एक बेहतरीन नेविगेशन लाइब्रेरी है, जिसे Compose के साथ काम करने के लिए डिज़ाइन किया गया है.

Navigation 3, अडैप्टिव लेआउट बनाने के लिए भी एक बेहतरीन टूल है. इससे एक ही समय में कई डेस्टिनेशन दिखाए जा सकते हैं. साथ ही, इन लेआउट के बीच आसानी से स्विच किया जा सकता है.

आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) फ़्लो को मैनेज करने वाला यह सिस्टम, सीन पर आधारित है. सीन एक ऐसा लेआउट होता है जिसमें एक या उससे ज़्यादा डेस्टिनेशन एक साथ दिखते हैं. SceneStrategy यह तय करती है कि कोई सीन बनाया जा सकता है या नहीं. SceneStrategy इंस्टेंस को एक साथ जोड़कर, अलग-अलग स्क्रीन साइज़ और डिवाइस कॉन्फ़िगरेशन के लिए अलग-अलग सीन बनाए और दिखाए जा सकते हैं.

लिस्ट-डिटेल और सपोर्टिंग पैन जैसे आउट-ऑफ़-द-बॉक्स कैननिकल लेआउट के लिए, Compose Material 3 Adaptive लाइब्रेरी से सीन इस्तेमाल किए जा सकते हैं. यह वर्शन 1.3 और इसके बाद के वर्शन में उपलब्ध है.

सीन रेसिपी में बदलाव करके या शुरू से ही अपने कस्टम सीन बनाना भी आसान है. उदाहरण के लिए, मान लें कि किसी सीन में तीन पैन एक साथ दिख रहे हैं:

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

इस स्थिति में, अगर विंडो की चौड़ाई ज़रूरत के मुताबिक है और बैक स्टैक की एंट्री ने यह एलान किया है कि वे तीन पैन वाले सीन में दिख सकती हैं, तो तीन पैन दिखाने के लिए SceneStrategy तय किया जा सकता है.

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

NavDisplay बनाते समय, ThreePaneSceneStrategy का इस्तेमाल अन्य रणनीतियों के साथ किया जा सकता है. उदाहरण के लिए, अगर तीन पैन दिखाने के लिए जगह नहीं है, तो हम TwoPaneStrategy को भी जोड़ सकते हैं, ताकि दो पैन को अगल-बगल दिखाया जा सके.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

अगर तीन या दो पैन दिखाने के लिए ज़रूरत के मुताबिक जगह नहीं है, तो हमारी कस्टम सीन की दोनों रणनीतियां null दिखाती हैं. इस मामले में, NavDisplay SinglePaneScene का इस्तेमाल करके, एक ही पैन में बैक स्टैक में मौजूद आखिरी एंट्री दिखाता है. 

सीन और रणनीतियों का इस्तेमाल करके, अपने ऐप्लिकेशन में एक, दो, और तीन पैन वाले लेआउट जोड़े जा सकते हैं!

बड़ी स्क्रीन पर तीन पैन वाला नेविगेशन दिखाने वाला अडैप्टिव ऐप्लिकेशन.

Navigation 3 में सीन का इस्तेमाल करके, कस्टम लेआउट बनाने के तरीके के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.

स्टैंडअलोन अडैप्टिव लेआउट

अगर आपको स्टैंडअलोन लेआउट की ज़रूरत है, तो Compose Material 3 Adaptive library की मदद से, अडैप्टिव यूज़र इंटरफ़ेस (यूआई) बनाए जा सकते हैं. जैसे, सूची-ब्यौरा और सपोर्टिंग पैन लेआउट. ये लेआउट, विंडो के कॉन्फ़िगरेशन के हिसाब से अपने-आप बदल जाते हैं. ऐसा विंडो के साइज़ क्लास या डिवाइस के पोस्चर के आधार पर होता है. 

अच्छी खबर यह है कि लाइब्रेरी, नए ब्रेकपॉइंट के साथ पहले से ही अप-टू-डेट है! वर्शन 1.2 से, डिफ़ॉल्ट पैन स्कैफ़ोल्ड डायरेक्टिव फ़ंक्शन, बड़ी और बहुत बड़ी चौड़ाई वाली विंडो साइज़ क्लास के साथ काम करते हैं.

आपको सिर्फ़ ऑप्ट-इन करना होगा. इसके लिए, अपनी Gradle बिल्ड फ़ाइल में यह एलान करें कि आपको नए ब्रेकपॉइंट का इस्तेमाल करना है:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

शुरू करना

Android के नए वर्शन में, कनेक्ट किए गए डिसप्ले की सुविधा के बारे में जानें. Android 16 QPR3 को इस सुविधा के साथ काम करने वाले डिवाइस पर डाउनलोड करें. इसके बाद, इसे किसी बाहरी मॉनिटर से कनेक्ट करें. अब अपने ऐप्लिकेशन की टेस्टिंग शुरू करें! 

इन सबसे सही तरीकों को लागू करने के बारे में ज़्यादा जानने के लिए, एक से ज़्यादा डिसप्ले की सुविधा और विंडो मैनेजमेंट से जुड़े अपडेट किए गए दस्तावेज़ पढ़ें.

सुझाव, राय या शिकायत

कनेक्ट किए गए डिसप्ले पर डेस्कटॉप का अनुभव बेहतर बनाने के लिए, आपके सुझाव/राय या शिकायत हमारे लिए बहुत ज़रूरी है. सुझाव/राय देने या शिकायत करने के लिए बने हमारे आधिकारिक चैनलों के ज़रिए, अपनी राय दें और किसी समस्या की शिकायत करें.

हमारा मकसद Android को एक ऐसा प्लैटफ़ॉर्म बनाना है जो उपयोगकर्ताओं की ज़रूरतों के हिसाब से काम करे. इससे लोग अपने ऐप्लिकेशन और डिवाइसों के साथ अलग-अलग तरीकों से इंटरैक्ट कर पाएंगे. कनेक्ट किए गए डिसप्ले की सुविधा को बेहतर बनाना, इसी दिशा में उठाया गया एक और कदम है. हमें लगता है कि आपके उपयोगकर्ताओं को डेस्कटॉप पर मिलने वाले अनुभव पसंद आएंगे!

*ध्यान दें: इस लेख को लिखते समय, कनेक्ट किए गए डिसप्ले की सुविधा Pixel 8, 9, 10 सीरीज़ और Samsung के कई डिवाइसों पर काम करती है. इनमें S26, Fold7, Flip7, और Tab S11 शामिल हैं.