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

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

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

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

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

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

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

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

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

आपके प्रॉडक्ट में क्या खास है?

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

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

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

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

मॉडर्न टूल की मदद से, डेस्कटॉप के लिए ऐप्लिकेशन बनाना

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

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

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

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

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

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

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

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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

शुरू करना

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

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

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

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

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

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