Android डिवाइसों को कनेक्ट किए गए डिसप्ले पर आसानी से इस्तेमाल किया जा सकता है

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

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

शुरू करना

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

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

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

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

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

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