এজ-টু-এজ সেট আপ করুন

এজ-টু-এজ ডিসপ্লে আপনার অ্যাপকে সিস্টেম বারগুলোর—যেমন স্ট্যাটাস বার, ক্যাপশন বার এবং নেভিগেশন বার—পেছনে এর ইউজার ইন্টারফেস (UI) প্রদর্শন করতে দেয়, যার ফলে ব্যবহারকারী আরও বেশি ইমারসিভ অভিজ্ঞতা লাভ করেন। আপনি যদি অ্যান্ড্রয়েড ১৫ (এপিআই লেভেল ৩৫) বা তার উচ্চতর সংস্করণে চালিত ডিভাইস টার্গেট করেন, তবে এজ-টু-এজ ডিফল্টভাবে প্রয়োগ করা হয় ।

সকল অ্যান্ড্রয়েড সংস্করণে কন্টেন্ট সঠিকভাবে প্রান্ত থেকে প্রান্ত পর্যন্ত প্রদর্শন করতে, এই সেটআপ ধাপগুলো অনুসরণ করুন। এই ধাপগুলো অনুসরণ না করলে, আপনার অ্যাপ সিস্টেম বারের পিছনে একরঙা ছবি দেখাতে পারে অথবা অন-স্ক্রিন কীবোর্ড (IME) ট্রানজিশনের সাথে এর কন্টেন্ট সিঙ্ক্রোনাসভাবে অ্যানিমেট নাও করতে পারে।

১. প্রান্ত থেকে প্রান্ত পর্যন্ত ডিসপ্লে সক্রিয় করুন

পূর্ববর্তী অ্যান্ড্রয়েড সংস্করণগুলিতে এজ-টু-এজ সক্রিয় করতে, আপনার Activity.onCreate() পদ্ধতিতে enableEdgeToEdge() কল করুন:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    ...
}

ডিফল্টরূপে, enableEdgeToEdge() সিস্টেম বারগুলোকে স্বচ্ছ করে তোলে, তবে ৩-বাটন নেভিগেশন মোডের ক্ষেত্রে এটি আরও ভালো কনট্রাস্টের জন্য নেভিগেশন বারে একটি অর্ধস্বচ্ছ স্ক্রিম প্রয়োগ করে। সিস্টেম আইকন এবং স্ক্রিমের রঙ সিস্টেমের লাইট বা ডার্ক থিমের সাথে সামঞ্জস্যপূর্ণ হয়।

২. windowSoftInputMode কনফিগার করুন

আপনার Activity-র AndroidManifest.xml এন্ট্রিতে android:windowSoftInputMode="adjustResize" সেট করুন। এই সেটিংটি আপনার অ্যাপকে IME ইনসেট গ্রহণ করার সুযোগ দেয়, যার ফলে অন-স্ক্রিন কীবোর্ড আসা-যাওয়ার সময় আপনি প্যাডিং ব্যবহার করে আপনার লেআউট সামঞ্জস্য করতে পারেন।

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

৩. ইনসেট ব্যবহার করে ওভারল্যাপ সামলান

একবার এজ-টু-এজ চালু করা হলে, আপনার অ্যাপের কিছু কন্টেন্ট এবং UI এলিমেন্ট সিস্টেম বারের পিছনে চলে যেতে পারে। গুরুত্বপূর্ণ বা ইন্টারেক্টিভ এলিমেন্টগুলো যাতে সিস্টেম বারের আড়ালে না যায় বা সিস্টেম জেসচারের সাথে ওভারল্যাপ না করে, তা নিশ্চিত করতে আপনাকে ইনসেট হ্যান্ডেল করতে হবে।

ইনসেট বলতে স্ক্রিনের সেই অংশগুলোকে বোঝায় যা সিস্টেম UI বা সিস্টেম জেসচারের সাথে ছেদ করে। এজ-টু-এজ ডিসপ্লের জন্য বিবেচ্য প্রধান ইনসেটগুলো হলো:

• সিস্টেম বার ইনসেট: যে স্থানগুলোতে সিস্টেম বার প্রদর্শিত হয়, তা নির্দেশ করে। সিস্টেম বারের কারণে UI যাতে ঢাকা না পড়ে, সেজন্য এগুলো ব্যবহার করুন।
• ডিসপ্লে কাটআউট ইনসেট: ডিভাইসের স্ক্রিনে থাকা সেইসব এলাকাকে বোঝায় যেখানে একটি ভৌত ​​কাটআউট (যেমন ক্যামেরা নচ) বিদ্যমান থাকে।

কম্পোজে, আপনি রুলার, প্যাডিং মডিফায়ার অথবা ইনসেট সাইজ মডিফায়ার ব্যবহার করে ইনসেট নিয়ন্ত্রণ করতে পারেন। বিস্তারিত নির্দেশনার জন্য ‘উইন্ডো ইনসেট সম্পর্কে’ দেখুন।

উন্নত বিষয়সমূহ

আরও উন্নত এজ-টু-এজ ব্যবহারের ক্ষেত্রে নিম্নলিখিত বিষয়গুলো বিবেচনা করুন।

ইমারসিভ মোড

ভিডিও বা ম্যাপের মতো কিছু কন্টেন্টের ক্ষেত্রে, সিস্টেম বার লুকানো থাকলে একটি সম্পূর্ণ ইমারসিভ অভিজ্ঞতা পাওয়া যায়। আপনি WindowInsetsControllerCompat ব্যবহার করে সিস্টেম বার লুকাতে পারেন।

val windowInsetsController =
    WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

সিস্টেম বারের রঙ এবং আইকন

স্ক্রিনকে প্রান্ত থেকে প্রান্তে প্রসারিত করলে, আপনার অ্যাপের ব্যাকগ্রাউন্ড সিস্টেম বারের পিছনে দেখা যেতে পারে, তাই আরও ভালো কনট্রাস্টের জন্য আপনাকে সিস্টেম বার আইকনের রঙ সামঞ্জস্য করতে হতে পারে।

স্ট্যাটাস বারের আইকনগুলো হালকা বা গাঢ় করতে, WindowInsetsControllerCompat ব্যবহার করুন:

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

সিস্টেম বার সুরক্ষা

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

৩-বাটন নেভিগেশন বারটিকে অর্ধস্বচ্ছ না করে সম্পূর্ণ স্বচ্ছ করতে, আপনি কনট্রাস্ট এনফোর্সমেন্ট নিষ্ক্রিয় করতে পারেন:

window.isNavigationBarContrastEnforced = false

আরও তথ্যের জন্য, সিস্টেম বার সুরক্ষা সম্পর্কে দেখুন।

সংলাপ

পূর্ণ-পর্দার ডায়ালগগুলি প্রান্ত থেকে প্রান্ত পর্যন্ত প্রদর্শন করতে, ডায়ালগের onStart() পদ্ধতিতে WindowCompat.enableEdgeToEdge কল করুন:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}