পণ্যের খবর

অ্যান্ড্রয়েড ডিভাইসগুলি সংযুক্ত ডিসপ্লেগুলিতে নির্বিঘ্নে সম্প্রসারিত হয়।

৭ মিনিটের পাঠ
Francesco Romano
ডেভেলপার সম্পর্ক প্রকৌশলী, অ্যান্ড্রয়েড

অ্যান্ড্রয়েডে মোবাইল এবং ডেস্কটপ কম্পিউটিংকে আরও কাছাকাছি আনার ক্ষেত্রে একটি বড় মাইলফলক ঘোষণা করতে পেরে আমরা আনন্দিত: অ্যান্ড্রয়েড ১৬ কিউপিআর৩ (QPR3) রিলিজের সাথে কানেক্টেড ডিসপ্লে সাপোর্ট এখন সর্বসাধারণের জন্য উপলব্ধ হয়েছে!

গুগল আই/ও ২০২৫- এ যেমন দেখানো হয়েছে, কানেক্টেড ডিসপ্লে ব্যবহারকারীদের তাদের অ্যান্ড্রয়েড ডিভাইসকে একটি বাহ্যিক মনিটরের সাথে সংযুক্ত করতে এবং তাৎক্ষণিকভাবে একটি ডেস্কটপ উইন্ডোইং পরিবেশে প্রবেশ করতে দেয়। অ্যাপগুলো ফ্রি-ফর্ম বা ম্যাক্সিমাইজড উইন্ডোতে ব্যবহার করা যায় এবং ব্যবহারকারীরা ঠিক ডেস্কটপ ওএস-এর মতোই মাল্টিটাস্কিং করতে পারেন।

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

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

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

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

materialDisplay.gif

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

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

materialDisplay2.gif

ট্যাবলেটটি একটি বাহ্যিক ডিসপ্লের সাথে সংযুক্ত, যা ডেস্কটপ সেশনটিকে উভয় ডিসপ্লে জুড়ে প্রসারিত করে।

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

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


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

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

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

আধুনিক সরঞ্জাম দিয়ে ডেস্কটপের ভবিষ্যতের জন্য নির্মাণ

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

নতুন জানালার আকারের শ্রেণিবিভাগ: বড় এবং অতিরিক্ত বড়

Jetpack WindowManager 1.5.0- এর সবচেয়ে বড় আপডেট হলো দুটি নতুন প্রস্থের উইন্ডো সাইজ ক্লাসের সংযোজন: Large এবং Extra-large।

উইন্ডো সাইজ ক্লাস হলো আমাদের নিজস্ব ও সুনির্দিষ্ট ভিউপোর্ট ব্রেকপয়েন্টের একটি সেট, যা আপনাকে অ্যাডাপ্টিভ লেআউট ডিজাইন ও ডেভেলপ করতে সাহায্য করে। ১.৫.০ সংস্করণে, আমরা এই নির্দেশিকাটি সাধারণ ট্যাবলেটের আকারের চেয়ে বড় স্ক্রিনগুলোর জন্যও প্রসারিত করছি।

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

  • বড়: ১২০০ডিপি থেকে ১৬০০ডিপি পর্যন্ত প্রস্থের জন্য
  • অতিরিক্ত-বৃহৎ: ১৬০০ডিপি বা তার বেশি প্রস্থের জন্য
windowClasses.png

ডিসপ্লে প্রস্থের উপর ভিত্তি করে উইন্ডোর আকারের বিভিন্ন শ্রেণিবিভাগ।

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

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

নেভিগেশন ৩ হলো জেটপ্যাক কালেকশনের সর্বশেষ সংযোজন। নেভিগেশন ৩, যার প্রথম স্থিতিশীল সংস্করণটি সম্প্রতি প্রকাশিত হয়েছে, এটি কম্পোজের সাথে কাজ করার জন্য ডিজাইন করা একটি শক্তিশালী নেভিগেশন লাইব্রেরি।

নেভিগেশন ৩ অ্যাডাপ্টিভ লেআউট তৈরির জন্যও একটি চমৎকার টুল, কারণ এটি একই সময়ে একাধিক গন্তব্য প্রদর্শন করতে এবং সেই লেআউটগুলোর মধ্যে নির্বিঘ্নে পরিবর্তন করার সুযোগ দেয়।

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

লিস্ট-ডিটেইল এবং সাপোর্টিং পেনের মতো রেডিমেড ক্যানোনিকাল লেআউটগুলোর জন্য, আপনি Compose Material 3 Adaptive লাইব্রেরির ( যা সংস্করণ 1.3 এবং তার উপরের ভার্সনে উপলব্ধ) Scene-গুলো ব্যবহার করতে পারেন।

সিন রেসিপিগুলো পরিবর্তন করে অথবা একেবারে নতুন করে শুরু করে আপনার নিজস্ব কাস্টম সিন তৈরি করাও সহজ। উদাহরণস্বরূপ, ধরা যাক এমন একটি সিন যেখানে তিনটি প্যান পাশাপাশি প্রদর্শিত হয়:

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 ব্যবহার করে ব্যাক স্ট্যাকের শেষ এন্ট্রিটিকে একটিমাত্র প্যানে প্রদর্শন করে।

সিন এবং স্ট্র্যাটেজি ব্যবহার করে আপনি আপনার অ্যাপে এক, দুই এবং তিন পেইন লেআউট যোগ করতে পারেন!

adaptivepane.gif

একটি অভিযোজিত অ্যাপ যা প্রশস্ত স্ক্রিনে তিন-প্যানেল নেভিগেশন প্রদর্শন করে।

Navigation 3-এ Scene ব্যবহার করে কীভাবে কাস্টম লেআউট তৈরি করতে হয়, সে সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

স্বতন্ত্র অভিযোজিত লেআউট

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

সুখবরটি হলো যে লাইব্রেরিটি ইতিমধ্যেই নতুন ব্রেকপয়েন্টগুলোর সাথে হালনাগাদ করা হয়েছে! সংস্করণ ১.২ থেকে শুরু করে, ডিফল্ট পেইন স্কাফোল্ড ডিরেক্টিভ ফাংশনগুলো লার্জ এবং এক্সট্রা-লার্জ প্রস্থের উইন্ডো সাইজ ক্লাস সমর্থন করে।

আপনার গ্রেডল বিল্ড ফাইলে নতুন ব্রেকপয়েন্টগুলো ব্যবহার করার কথা ঘোষণা করেই কেবল আপনি এটি চালু করতে পারবেন:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

শুরু করা হচ্ছে

অ্যান্ড্রয়েডের সর্বশেষ সংস্করণে কানেক্টেড ডিসপ্লে ফিচারটি ব্যবহার করে দেখুন। একটি সমর্থিত ডিভাইসে অ্যান্ড্রয়েড ১৬ কিউপিআর৩ (Android 16 QPR3) ইনস্টল করুন, তারপর সেটিকে একটি এক্সটার্নাল মনিটরের সাথে সংযুক্ত করে আজই আপনার অ্যাপ পরীক্ষা করা শুরু করুন!

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

প্রতিক্রিয়া

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

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


দ্রষ্টব্য: এই প্রতিবেদনটি লেখার সময়, পিক্সেল ৮, ৯, ১০ সিরিজ এবং স্যামসাং-এর এস২৬, ফোল্ড৭, ফ্লিপ৭, ও ট্যাব এস১১-সহ বিভিন্ন ডিভাইসে কানেক্টেড ডিসপ্লে সমর্থিত।

    লিখেছেন:

    পড়তে থাকুন