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

এজ-টু-এজ ডিসপ্লে আপনার অ্যাপকে সিস্টেম বারের পিছনে তার UI আঁকতে দেয়—স্ট্যাটাস বার, ক্যাপশন বার এবং নেভিগেশন বার—যার মাধ্যমে আরও নিমজ্জিত ব্যবহারকারীর অভিজ্ঞতা অর্জন করা যায়। আপনি যদি অ্যান্ড্রয়েড 15 (API লেভেল 35) বা তার বেশি চলমান ডিভাইসগুলিকে লক্ষ্য করেন, তাহলে ডিফল্টরূপে এজ-টু-এজ প্রয়োগ করা হয় ।

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

১. এজ-টু-এজ ডিসপ্লে সক্ষম করুন

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

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

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

2. 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) }
    }
    ...
}