কানেক্ট করা ডিসপ্লেতে Android ডিভাইস নির্বিঘ্নে এক্সটেন্ড করা

Android-এ মোবাইল ও ডেস্কটপ কম্পিউটিংকে আরও কাছাকাছি নিয়ে আসার ক্ষেত্রে একটি গুরুত্বপূর্ণ মাইলস্টোন ঘোষণা করতে পেরে আমরা আনন্দিত: কানেক্ট করা ডিসপ্লে সংক্রান্ত সহায়তা Android 16 QPR3 রিলিজের সাথে সাথে সাধারণভাবে উপলভ্য হয়ে গেছে!

 Google I/O 2025-এ দেখানো হয়েছে, কানেক্ট করা ডিসপ্লে ব্যবহারকারীদের এক্সটার্নাল মনিটরের সাথে তাদের Android ডিভাইস কানেক্ট করতে এবং সাথে সাথেই ডেস্কটপ উইন্ডো এনভায়রনমেন্ট অ্যাক্সেস করতে দেয়। অ্যাপগুলি ফ্রি-ফর্ম বা ম্যাক্সিমাইজ করা উইন্ডোতে ব্যবহার করা যেতে পারে এবং ব্যবহারকারীরা ডেস্কটপ OS-এর মতো মাল্টিটাস্কিং করতে পারবেন।

এক্সটার্নাল ডিসপ্লের সাথে কানেক্ট করা অবস্থায় Android 16 ভার্সনে চলে এমন Android ইকোসিস্টেম জুড়ে থাকা ডিভাইসে নিরবচ্ছিন্ন ও শক্তিশালী ডেস্কটপ উইন্ডোয়িং অভিজ্ঞতা প্রদান করতে Google ও Samsung একসাথে কাজ করেছে। 
এটি এখন সাধারণত কাজ করে এমন ডিভাইসে* উপলভ্য। যেসব ব্যবহারকারী কাজ করে এমন Pixel ও Samsung ফোন এক্সটার্নাল মনিটরের সাথে কানেক্ট করতে পারেন, তাদের জন্য এটি উপলভ্য। এর ফলে, বিভিন্ন ফর্ম ফ্যাক্টর জুড়ে মানিয়ে নিতে পারে এমন আরও বেশি এনগেজিং ও আরও বেশি প্রোডাক্টিভ অ্যাপ অভিজ্ঞতা তৈরি করার নতুন সুযোগ পাওয়া যায়।

এটি কীভাবে কাজ করে?

মানানসই Android ফোন বা ফোল্ড করা যায় এমন ডিভাইস এক্সটার্নাল ডিসপ্লের সাথে কানেক্ট করা হলে, কানেক্ট করা ডিসপ্লেতে নতুন ডেস্কটপ সেশন শুরু হয়।

কানেক্ট করা ডিসপ্লেতে অভিজ্ঞতা ডেস্কটপের অভিজ্ঞতার মতোই হয়, এর মধ্যে একটি টাস্কবার থাকে যা অ্যাক্টিভ অ্যাপ দেখায় এবং ব্যবহারকারীদের দ্রুত অ্যাক্সেসের জন্য অ্যাপ পিন করতে দেয়। ব্যবহারকারীরা কানেক্ট করা ডিসপ্লেতে ফ্রি-সাইজ করা যায় এমন উইন্ডোতে একাধিক অ্যাপ পাশাপাশি চালাতে পারবেন।

ফোনের নিজস্ব স্টেট বজায় রেখে, ডিসপ্লেতে ডেস্কটপ সেশন সহ এক্সটার্নাল ডিসপ্লের সাথে ফোন কানেক্ট করা হয়েছে।

ডেস্কটপ উইন্ডোয়িং কাজ করে এমন কোনও ডিভাইস (যেমন, Samsung Galaxy Tab S11-এর মতো ট্যাবলেট) এক্সটার্নাল ডিসপ্লের সাথে কানেক্ট করা হলে, ডেস্কটপ সেশন দুটি ডিসপ্লে জুড়ে এক্সটেন্ড করা হয়, এর ফলে আরও বড় ওয়ার্কস্পেস আনলক করা যায়। দুটি ডিসপ্লে তখন একটি অবিচ্ছিন্ন সিস্টেম হিসেবে কাজ করে, যার ফলে অ্যাপ উইন্ডো, কন্টেন্ট এবং কার্সর ডিসপ্লেগুলির মধ্যে অবাধে সরানো যায়।

এক্সটার্নাল ডিসপ্লের সাথে কানেক্ট করা ট্যাবলেট, দুটি ডিসপ্লে জুড়ে ডেস্কটপ সেশন এক্সটেন্ড করা।

এটি কেন গুরুত্বপূর্ণ?

Android 16 QPR3 রিলিজে, আমরা উইন্ডো বিহেভিয়ার, টাস্কবার ইন্টার‍্যাকশন এবং ইনপুট কম্প্যাটিবিলিটি (মাউস ও কিবোর্ড) ফাইনাল করেছি যা কানেক্ট করা ডিসপ্লে অভিজ্ঞতাকে সংজ্ঞায়িত করে। এছাড়াও, ডিসপ্লে পরিবর্তন করার সময় উইন্ডো স্কেল করতে এবং অ্যাপ রিস্টার্ট করা এড়াতে আমরা কম্প্যাটিবিলিটি ট্রিটমেন্ট অন্তর্ভুক্ত করেছি।

আপনার অ্যাপ অ্যাডাপ্টিভ ডিজাইন প্রিন্সিপাল মেনে তৈরি করা হলে, এটি অটোমেটিক ডেস্কটপের মতো লুক অ্যান্ড ফিল পাবে এবং ব্যবহারকারীরা নিজেদের মতো করে ব্যবহার করতে পারবেন। অ্যাপটি পোর্ট্রেট মোডে লক করা থাকলে বা শুধুমাত্র টাচ ইন্টারফেস ব্যবহার করা হলে, এখন আধুনিক করার সময়।

বিশেষ করে, কানেক্ট করা ডিসপ্লেতে অ্যাপের সেরা অভিজ্ঞতা পেতে এইসব মূল পেশাদার পদ্ধতি মেনে চলুন:

• ধ্রুবক Display অবজেক্ট আছে বলে ধরে নেবেন না: অ্যাপ উইন্ডো এক্সটার্নাল ডিসপ্লেতে সরানো হলে বা ডিসপ্লে কনফিগারেশন পরিবর্তন হলে, আপনার অ্যাপের কনটেক্সটের সাথে যুক্ত Display অবজেক্ট পরিবর্তন হতে পারে। আপনার অ্যাপকে কনফিগারেশন পরিবর্তন ইভেন্টগুলি সাবলীলভাবে ম্যানেজ করতে হবে এবং সেগুলি ক্যাশে না করে ডায়নামিক পদ্ধতিতে ডিসপ্লে মেট্রিক কোয়েরি করতে হবে।
• এগুলি ঘনত্বের কনফিগারেশন পরিবর্তন: প্রাইমারি ডিভাইসের স্ক্রিনের তুলনায় এক্সটার্নাল ডিসপ্লেতে অনেক বেশি আলাদা পিক্সেল ঘনত্ব থাকতে পারে। UI স্পষ্টতা ও ব্যবহারযোগ্যতা বজায় রাখতে, আপনার লেআউট ও রিসোর্স যাতে এইসব পরিবর্তনের সাথে সঠিকভাবে মানিয়ে নিতে পারে তা নিশ্চিত করুন। লেআউটের জন্য ঘনত্ব-নিরপেক্ষ পিক্সেল (dp) ব্যবহার করুন, ঘনত্ব-নির্দিষ্ট রিসোর্স প্রদান করুন এবং আপনার UI যাতে যথাযথভাবে স্কেল হয় তা নিশ্চিত করুন।
• সঠিকভাবে এক্সটার্নাল পেরিফেরাল কাজ করে: ব্যবহারকারীরা এক্সটার্নাল মনিটরের সাথে কানেক্ট করলে, তারা প্রায়ই ডেস্কটপের মতো এনভায়রনমেন্ট তৈরি করে। এর মধ্যে প্রায়ই এক্সটার্নাল কীবোর্ড, মাউস, ট্র্যাকপ্যাড, ওয়েবক্যাম, মাইক্রোফোন ও স্পিকার ব্যবহার করা হয়। কীবোর্ড ও মাউস ইন্ট্যার‍্যাকশনের জন্য সহায়তা উন্নত করুন।

আধুনিক টুলের সাহায্যে ডেস্কটপের ভবিষ্যৎ নির্মাণ করা

ডেস্কটপ অভিজ্ঞতা তৈরি করার ব্যাপারে সাহায্য করতে আমরা বিভিন্ন টুল প্রদান করি। আমাদের মূল অ্যাডাপ্টিভ লাইব্রেরিতে করা লেটেস্ট আপডেটগুলি এক ঝলকে দেখে নেওয়া যাক!

নতুন উইন্ডো সাইজ ক্লাস: বড় ও অতিরিক্ত বড়

Jetpack WindowManager 1.5.0-এর সবচেয়ে বড় আপডেট হল দুটি নতুন উইন্ডো সাইজ ক্লাস যোগ করা হয়েছে: বড় ও অতিরিক্ত বড়।

উইন্ডো সাইজ ক্লাস হল ভিউপোর্ট ব্রেকপয়েন্টের আমাদের অফিসিয়াল, মতামত-ভিত্তিক সেট যা আপনাকে অ্যাডাপ্টিভ লেআউট ডিজাইন ও ডেভেলপ করতে সাহায্য করে। 1.5.0 ভার্সনে, আমরা সাধারণ ট্যাবলেটের সাইজের চেয়ে বড় স্ক্রিনের জন্য এই নির্দেশিকা আরও বিস্তারিত করেছি।

এখানে নতুন প্রস্থ ব্রেকপয়েন্ট দেওয়া হল:

• বড়: প্রস্থ ১২০০dp থেকে ১৬০০dp-এর মধ্যে হলে
• অত্যন্ত বড়: প্রস্থ ≥১৬০০dp হলে

ডিসপ্লে উইডথের উপর ভিত্তি করে বিভিন্ন উইন্ডো সাইজ ক্লাস।

খুব বড় স্ক্রিনে, ট্যাবলেটের এক্সপ্যান্ড করা লেআউটকে শুধু বড় করে দিলেই সবসময় ব্যবহারকারীর সেরা অভিজ্ঞতা পাওয়া যায় না। যেমন, ইমেল ক্লায়েন্ট, Expanded উইন্ডো সাইজ ক্লাসে দুটি প্যান (মেলবক্স ও মেসেজ) স্বাচ্ছন্দ্যে দেখাতে পারে। কিন্তু অত্যন্ত বড় ডেস্কটপ মনিটরে, ইমেল ক্লায়েন্ট একসাথে তিনটি বা এমনকি চারটি প্যানেলও সুন্দরভাবে দেখাতে পারে, যেমন, হয়ত একটি মেলবক্স, একটি মেসেজ তালিকা, সম্পূর্ণ মেসেজ কন্টেন্ট এবং একটি ক্যালেন্ডার/টাস্ক প্যানেল।

আপনার প্রোজেক্টে নতুন উইন্ডো সাইজ ক্লাস যোগ করতে, 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-এর সাহায্যে অ্যাডাপ্টিভ লেআউট তৈরি করা

Jetpack কালেকশনে লেটেস্ট সংযোজন হল Navigation 3। Navigation 3, যা সবেমাত্র প্রথম স্থিতিশীল রিলিজ পেয়েছে, এটি Compose-এর সাথে কাজ করার জন্য ডিজাইন করা একটি শক্তিশালী নেভিগেশন লাইব্রেরি।

এছাড়াও, একই সাথে একাধিক ডেস্টিনেশন দেখানোর অনুমতি দিয়ে এবং সেইসব লেআউটের মধ্যে নির্বিঘ্নে পরিবর্তন করার অনুমতি দিয়ে, অ্যাডাপ্টিভ লেআউট তৈরি করার জন্য Navigation 3 একটি দুর্দান্ত টুল।

আপনার অ্যাপের UI ফ্লো ম্যানেজ করার এই সিস্টেমটি সিন-এর উপর ভিত্তি করে তৈরি করা হয়েছে। সিন হল এমন একটি লেআউট যা একই সময়ে এক বা একাধিক গন্তব্য দেখায়। SceneStrategy নির্ধারণ করে যে এটি কোনও Scene তৈরি করতে পারবে কিনা। SceneStrategy ইনস্ট্যান্সগুলিকে একসাথে চেইন করা আপনাকে বিভিন্ন স্ক্রিন সাইজ ও ডিভাইস কনফিগারেশনের জন্য আলাদা আলাদা দৃশ্য তৈরি ও দেখাতে সাহায্য করে।

আউট-অফ-দ্য-বক্স ক্যাননিকাল লেআউটের জন্য, যেমন লিস্ট-ডিটেল ও সাপোর্টিং প্যান, আপনি Compose Material 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-এ Scene ব্যবহার করে কীভাবে কাস্টম লেআউট তৈরি করতে হয় সেই সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

স্ট্যান্ডঅ্যালোন অ্যাডাপ্টিভ লেআউট

আপনার যদি একটি স্ট্যান্ডঅ্যালোন লেআউট প্রয়োজন হয়, তাহলে Compose Material 3 অ্যাডাপ্টিভ লাইব্রেরি আপনাকে তালিকা-বিবরণ এবং সহায়ক প্যান লেআউটের মতো অ্যাডাপ্টিভ UI তৈরি করতে সাহায্য করে যা  উইন্ডো কনফিগারেশনের উপর ভিত্তি করে  উইন্ডো সাইজ ক্লাস বা ডিভাইস পোসচার অনুযায়ী অটোমেটিক অ্যাডজাস্ট হয়ে যায়। 

ভাল খবর হল, লাইব্রেরি আগেই নতুন ব্রেকপয়েন্ট অনুযায়ী আপডেট করা হয়েছে! ভার্সন 1.2 থেকে শুরু করে, ডিফল্ট প্যান স্ক্যাফোল্ড ডাইরেক্টিভ ফাংশনগুলি বড় এবং অতিরিক্ত-বড় উইন্ডো সাইজ ক্লাসকে সমর্থন করে।

নতুন ব্রেকপয়েন্ট ব্যবহার করতে চান, তা Gradle বিল্ড ফাইলে ঘোষণা করেই আপনাকে শুধু অপ্ট-ইন করতে হবে:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

শুরু করা

লেটেস্ট Android রিলিজের কানেক্ট করা ডিসপ্লে ফিচার এক্সপ্লোর করুন। উপযুক্ত ডিভাইসে Android 16 QPR3 ভার্সন পান, তারপর আপনার অ্যাপ আজই পরীক্ষা করা শুরু করতে এটিকে এক্সটার্নাল মনিটরের সাথে কানেক্ট করুন! 

এইসব পেশাদার পদ্ধতি প্রয়োগ করার ব্যাপারে আরও জানতে, মাল্টি-ডিসপ্লে সাপোর্ট ও উইন্ডো ম্যানেজমেন্ট সংক্রান্ত আপডেট করা ডকুমেন্টেশন দেখুন।

মতামত

কানেক্ট করা ডিসপ্লে ডেস্কটপ অভিজ্ঞতা আরও উন্নত করার জন্য আপনার মতামত অত্যন্ত গুরুত্বপূর্ণ। আমাদের অফিসিয়াল মতামত জানানোর চ্যানেলের মাধ্যমে আপনার ভাবনা শেয়ার করুন এবং কোনও সমস্যা হলে তা জানান।

আমরা Android-কে একটি বহুমুখী প্ল্যাটফর্ম হিসেবে গড়ে তুলতে বদ্ধপরিকর যা ব্যবহারকারীরা যেভাবে তাদের অ্যাপ ও ডিভাইসের সাথে ইন্টার‍্যাক্ট করতে চান তার সাথে মানিয়ে নিতে পারে। কানেক্ট করা ডিসপ্লে সংক্রান্ত সুবিধার উন্নতি সেই দিকেই আরেকটি পদক্ষেপ এবং আমরা মনে করি যে আপনার ব্যবহারকারীরা আপনার তৈরি করা ডেস্কটপ অভিজ্ঞতা পছন্দ করবেন!

*মনে রাখবেন: এই নিবন্ধটি লেখার সময়, Pixel 8, 9, 10 সিরিজ এবং S26, Fold7, Flip7 ও Tab S11 সহ বিভিন্ন Samsung ডিভাইসে কানেক্ট করা ডিসপ্লে কাজ করে।