हमें यह बताते हुए खुशी हो रही है कि 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 के साथ, हम टैबलेट की सामान्य साइज़ से बड़ी स्क्रीन के लिए भी यह दिशा-निर्देश दे रहे हैं.

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

• बड़ी: 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 के साथ काम करने वाले किसी डिवाइस पर Android 16 QPR3 पाएं. इसके बाद, उसे किसी बाहरी मॉनिटर से कनेक्ट करके, आज ही अपने ऐप्लिकेशन की जांच शुरू करें! 

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

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

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

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

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