ভিউতে কন্টেন্ট এক প্রান্ত থেকে অন্য প্রান্ত পর্যন্ত দেখানো

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ এজ-টু-এজ নিয়ে কীভাবে কাজ করতে হয় তা জানুন।

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

অনেক অ্যাপের উপরে অ্যাপ বার থাকে। অ্যাপের উপরের বারটি স্ক্রিনের উপরের প্রান্ত পর্যন্ত প্রসারিত হওয়া উচিত এবং স্ট্যাটাস বারের পিছনে দেখানো উচিত। বিকল্প হিসেবে, কন্টেন্ট স্ক্রল করার সময়, উপরের অ্যাপ বারটি স্ট্যাটাস বারের উচ্চতা পর্যন্ত সঙ্কুচিত হতে পারে।

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

ছবি ১. এজ-টু-এজ লেআউটে সিস্টেম বার।

আপনার অ্যাপে এজ-টু-এজ লেআউট প্রয়োগ করার সময়, নিম্নলিখিত বিষয়গুলি মনে রাখবেন:

  1. এজ-টু-এজ ডিসপ্লে চালু করুন
  2. বিভিন্ন ফর্ম ফ্যাক্টরে ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করতে অ্যাডাপ্টিভ লেআউট প্রয়োগ করুন
  3. যেকোনও ভিজ্যুয়াল ওভারল্যাপ ম্যানেজ করুন
  4. সিস্টেম বারের পিছনে স্ক্রিম দেখানোর কথা বিবেচনা করুন
স্ট্যাটাস বারের পিছনে থাকা ছবির উদাহরণ
ছবি ২. স্ট্যাটাস বারের পিছনে ছবির উদাহরণ।

এজ-টু-এজ ডিসপ্লে চালু করুন

আপনার অ্যাপ SDK 35 বা তার পরবর্তী যেকোনও ভার্সনকে টার্গেট করলে, Android 15 বা তার পরবর্তী যেকোনও ভার্সনের ডিভাইসের জন্য এজ-টু-এজ অটোমেটিক চালু হয়ে যায়।

Android-এর আগের ভার্সনে এজ-টু-এজ চালু করতে, আপনার Activity-এর onCreate-এ ম্যানুয়ালি enableEdgeToEdge কল করুন।

Kotlin

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

জাভা

 @Override
      protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WindowCompat.enableEdgeToEdge(getWindow());
        ...
      }

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

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

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

আপনার অ্যাপের কিছু ভিউ সিস্টেম বারের পিছনে ড্র করা হতে পারে, যেমনটি চিত্র ৩-এ দেখানো হয়েছে।

ইনসেটে প্রতিক্রিয়া জানিয়ে আপনি ওভারল্যাপের সমস্যা সমাধান করতে পারেন, যা স্ক্রিনের কোন অংশ নেভিগেশন বার বা স্ট্যাটাস বারের মতো সিস্টেম UI-এর সাথে ইন্টারসেক্ট করে তা নির্দিষ্ট করে। ইন্টারসেক্ট করার অর্থ হল কন্টেন্টের উপরে দেখানো, তবে এটি আপনার অ্যাপকে সিস্টেম জেসচার সম্পর্কেও জানাতে পারে।

আপনার অ্যাপ এজ-টু-এজ দেখানোর জন্য যে ধরনের ইনসেট প্রযোজ্য সেগুলি হল:

  • সিস্টেম বার ইনসেট: ট্যাপ করা যায় এমন ভিউয়ের জন্য সবচেয়ে ভাল এবং এটি সিস্টেম বারের মাধ্যমে ভিজ্যুয়ালি অস্পষ্ট করা যাবে না।

  • ডিসপ্লে কাট-আউট ইনসেট: ডিভাইসের আকারের কারণে স্ক্রিন কাট-আউট হতে পারে এমন এলাকার জন্য।

  • সিস্টেম জেসচার ইনসেট: সিস্টেমের মাধ্যমে ব্যবহৃত জেসচার-নেভিগেশনাল এলাকার জন্য যা আপনার অ্যাপের চেয়ে বেশি অগ্রাধিকার পায়।

সিস্টেম বার ইনসেট

সিস্টেম বার ইনসেট হল সবচেয়ে বেশি ব্যবহৃত ইনসেটের ধরন। এগুলি সেই এরিয়াকে দেখায় যেখানে সিস্টেম UI আপনার অ্যাপের উপরে Z-অ্যাক্সিসে ডিসপ্লে করে। এগুলি আপনার অ্যাপে ট্যাপ করা যায় এমন ভিউ সরাতে বা প্যাড করতে সবচেয়ে ভালভাবে ব্যবহার করা হয় এবং সিস্টেম বারের মাধ্যমে এগুলি যেন দৃশ্যত অস্পষ্ট না হয়।

যেমন, ৩ নম্বর ছবিতে ফ্লোটিং অ্যাকশন বোতাম (FAB) নেভিগেশন বারের কারণে আংশিকভাবে ঢাকা পড়ে গেছে:

এজ-টু-এজ প্রয়োগের উদাহরণ, তবে নেভিগেশন বার FAB-কে কভার করছে
ছবি ৩. এজ-টু-এজ লেআউটে FAB-এর উপর নেভিগেশন বার ওভারল্যাপ করছে।

জেসচার মোড বা বোতাম মোডে এই ধরনের ভিজ্যুয়াল ওভারল্যাপ এড়াতে, আপনি getInsets(int) -এর সাথে WindowInsetsCompat.Type.systemBars() ব্যবহার করে ভিউয়ের মার্জিন বাড়াতে পারেন।

নিম্নলিখিত কোডের উদাহরণ থেকে জানা যায় যে কীভাবে সিস্টেম বার ইনসেট প্রয়োগ করতে হয়:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left
      bottomMargin = insets.bottom
      rightMargin = insets.right
  }

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

জাভা

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

আপনি যদি এই সমাধানটি চিত্র ৩-এ দেখানো উদাহরণের ক্ষেত্রে প্রয়োগ করেন, তাহলে এর ফলে বোতাম মোডে কোনও ভিজ্যুয়াল ওভারল্যাপ হয় না, যেমনটি চিত্র ৪-এ দেখানো হয়েছে:

FAB-কে কভার না করা একটি ট্রান্সলুসেন্ট নেভিগেশন বার
ছবি ৪. বোতাম মোডে ভিজ্যুয়াল ওভারল্যাপ সমাধান করা হচ্ছে।

ছবি ৫-এ যেমন দেখানো হয়েছে, জেসচার নেভিগেশন মোডের ক্ষেত্রেও একই নিয়ম প্রযোজ্য:

জেসচার নেভিগেশন সহ এজ-টু-এজ
ছবি ৫. জেসচার নেভিগেশন মোডে ভিজ্যুয়াল ওভারল্যাপ সমাধান করা হচ্ছে।

ডিসপ্লে কাট-আউট ইনসেট

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

যেমন, অনেক অ্যাপ স্ক্রিনে আইটেমের তালিকা দেখানো হয়। ডিসপ্লে কাটআউট বা সিস্টেম বারের মাধ্যমে তালিকার আইটেম অস্পষ্ট করবেন না।

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

জাভা

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

সিস্টেম বার এবং ডিসপ্লে কাটআউট প্রকারের লজিক্যাল or নিয়ে WindowInsetsCompat-এর মান নির্ধারণ করুন।

clipToPadding-কে RecyclerView-এ সেট করুন যাতে প্যাডিং তালিকার আইটেমের সাথে স্ক্রল করে। এর ফলে, ব্যবহারকারী স্ক্রল করলে আইটেমগুলি সিস্টেম বারের পিছনে চলে যায়, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

সিস্টেম জেসচার ইনসেট

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

সিস্টেম জেসচার ইনসেটের উদাহরণ
ছবি ৬. সিস্টেম জেসচার ইনসেট।

সিস্টেম বার ইনসেটের মতো, আপনি WindowInsetsCompat.Type.systemGestures() ব্যবহার করে getInsets(int) দিয়ে সিস্টেম জেসচার ইনসেট ওভারল্যাপ করা এড়াতে পারেন।

সোয়াইপ করা যায় এমন ভিউকে প্রান্ত থেকে সরাতে বা প্যাড করতে এই ইনসেটগুলি ব্যবহার করুন। সাধারণত স্ক্রিনের নিচে অ্যাটাচ করা শিট, গেমে সোয়াইপ করা এবং ViewPager2 ব্যবহার করে ক্যারোজেল প্রয়োগ করার ক্ষেত্রে এটি ব্যবহার করা হয়।

Android 10 বা তার পরবর্তী যেকোনও ভার্সনে, সিস্টেম জেসচার ইনসেটে হোম জেসচারের জন্য নিচের ইনসেট এবং ফিরে যাওয়ার জেসচারের জন্য বাঁ ও ডানদিকের ইনসেট থাকে:

সিস্টেম জেসচার ইনসেট পরিমাপের একটি উদাহরণ
ছবি ৭. সিস্টেম জেসচার ইনসেট পরিমাপ।

নিম্নলিখিত কোডের উদাহরণ থেকে জানা যায় যে কীভাবে সিস্টেম জেসচার ইনসেট প্রয়োগ করতে হয়:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

জাভা

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

মেটেরিয়াল কম্পোনেন্ট

অনেক ভিউ-ভিত্তিক Android Material Components (com.google.android.material) অটোমেটিক ইনসেট ম্যানেজ করে, যার মধ্যে BottomAppBar, BottomNavigationView, NavigationRailView এবং NavigationView অন্তর্ভুক্ত

তবে, AppBarLayout অটোমেটিক ইনসেট ম্যানেজ করে না। সেরা ইনসেট ম্যানেজ করতে android:fitsSystemWindows="true" যোগ করুন।

Compose-এ মেটেরিয়াল কম্পোনেন্ট-এর সাথে ইনসেট কীভাবে ম্যানেজ করতে হয় তা পড়ুন।

ব্যাকওয়ার্ড কম্প্যাটিবল ইনসেট ডিসপ্যাচিং

চিলড্রেন ভিউতে ইনসেট পাঠানো বন্ধ করতে এবং অতিরিক্ত প্যাডিং এড়াতে, আপনি WindowInsetsCompat.CONSUMED কনস্ট্যান্ট ব্যবহার করে ইনসেট কনজিউম করতে পারেন। তবে, Android 10 (API লেভেল ২৯ এবং তার আগের) ভার্সনে চলা ডিভাইসে, WindowInsetsCompat.CONSUMED কল করার পরে ইনসেটগুলি সিবলিংয়ে পাঠানো হয় না, যার ফলে অনিচ্ছাকৃত ভিজ্যুয়াল ওভারল্যাপ হতে পারে।

ইনসেট ডিসপ্যাচিংয়ের উদাহরণ কাজ করছে না
ছবি ৮. Broken inset dispatching example. Android 10 (API লেভেল ২৯) এবং তার আগের ভার্সনে ViewGroup 1 ইনসেট ব্যবহার করার পরে ইনসেটগুলি সিবলিং ভিউতে ডিসপ্যাচ হয় না, যার ফলে TextView 2 সিস্টেম নেভিগেশন বারের সাথে ওভারল্যাপ করে। তবে, Android 11 (API লেভেল 30) এবং তার পরবর্তী ভার্সনে ইনসেটগুলি প্রত্যাশা অনুযায়ী সিবলিং ভিউতে পাঠানো হয়।

সব কাজ করে এমন Android ভার্সনের জন্য ইনসেট যে সিবলিংয়ে পাঠানো হয়েছে তা কনফার্ম করতে, ইনসেট ব্যবহার করার আগে ViewGroupCompat#installCompatInsetsDispatch ব্যবহার করুন, যা AndroidX Core এবং Core-ktx 1.16.0-alpha01 এবং তার পরবর্তী ভার্সনে উপলভ্য।

Kotlin

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

জাভা

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);
ফিক্সড ইনসেট ডিসপ্যাচিংয়ের উদাহরণ
ছবি ৯. ViewGroupCompat#installCompatInsetsDispatch কল করার পরে ইনসেট ডিসপ্যাচিং সংক্রান্ত সমস্যার সমাধান করা হয়েছে।

ইমারসিভ মোড

কিছু কন্টেন্ট ফুল-স্ক্রিনে দেখলে সবচেয়ে ভালো অভিজ্ঞতা পাওয়া যায়, যা ব্যবহারকারীকে আরও ইমারসিভ অভিজ্ঞতা প্রদান করে। আপনি WindowInsetsController এবং WindowInsetsControllerCompat লাইব্রেরি ব্যবহার করে ইমারসিভ মোডের জন্য সিস্টেম বার লুকাতে পারবেন:

Kotlin

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

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

// Show the system bars.
windowInsetsController.show(Type.systemBars())

জাভা

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

এই ফিচার প্রয়োগ করার ব্যাপারে আরও তথ্য পেতে, ইমারসিভ মোডের জন্য সিস্টেম বার লুকান দেখুন।

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

enableEdgeToEdge কল করলে ডিভাইসের থিম পরিবর্তন হওয়ার সময় সিস্টেম বার আইকনের রঙ আপডেট হয়।

এজ-টু-এজ মোডে যাওয়ার সময়, আপনাকে ম্যানুয়ালি সিস্টেম বার আইকনের রঙ আপডেট করতে হতে পারে যাতে সেগুলি আপনার অ্যাপের ব্যাকগ্রাউন্ডের সাথে কনট্রাস্ট করে। যেমন, হালকা স্ট্যাটাস বার আইকন তৈরি করতে:

Kotlin

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

জাভা

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

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

আপনার অ্যাপ SDK 35 বা তার পরবর্তী ভার্সনকে টার্গেট করলে, এজ-টু-এজ এনফোর্স করা হয়। সিস্টেম স্ট্যাটাস বার এবং জেসচার নেভিগেশন বার স্বচ্ছ, কিন্তু তিন-বোতাম নেভিগেশন বার ট্রান্সলুসেন্ট। এটি ব্যাকওয়ার্ড কম্প্যাটিবল করতে enableEdgeToEdge কল করুন।

তবে, সিস্টেম ডিফল্ট সব ব্যবহারের ক্ষেত্রে কাজ নাও করতে পারে। ট্রান্সপারেন্ট বা ট্রান্সলুসেন্ট সিস্টেম বার ব্যবহার করবেন কিনা তা নির্ধারণ করতে Android সিস্টেম বার ডিজাইন সংক্রান্ত নির্দেশিকা এবং এজ-টু-এজ ডিজাইন পরামর্শ নিন।

ট্রান্সপারেন্ট সিস্টেম বার তৈরি করা

Android 15 (SDK 35) বা তার পরবর্তী ভার্সন টার্গেট করে অথবা পূর্ববর্তী ভার্সনের জন্য ডিফল্ট আর্গুমেন্ট সহ enableEdgeToEdge() কল করে একটি স্বচ্ছ স্ট্যাটাস বার তৈরি করুন।

Android 15 বা তার পরবর্তী ভার্সনকে টার্গেট করে অথবা আগের ভার্সনের জন্য ডিফল্ট আর্গুমেন্ট সহ enableEdgeToEdge() কল করে একটি স্বচ্ছ জেসচার নেভিগেশন বার তৈরি করুন। তিন-বোতামের নেভিগেশন বারের জন্য, Window.setNavigationBarContrastEnforced-কে false-এ সেট করুন, অন্যথায় একটি ট্রান্সলুসেন্ট স্ক্রিম প্রয়োগ করা হবে।

স্বচ্ছ সিস্টেম বার তৈরি করুন

স্বচ্ছ স্ট্যাটাস বার তৈরি করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. আপনার androidx-core ডিপেন্ডেন্সি 1.16.0-beta01 বা তার পরবর্তী ভার্সনে আপডেট করুন
  2. androidx.core.view.insets.ProtectionLayout-এ আপনার XML লেআউট র‍্যাপ করুন এবং একটি আইডি অ্যাসাইন করুন।
  3. স্ট্যাটাস বারের জন্য দিক এবং GradientProtection উল্লেখ করে, সুরক্ষা সেট করতে, প্রোগ্রাম্যাটিক্যালি ProtectionLayout অ্যাক্সেস করুন।

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )

GradientProtection-এ পাস করা ColorInt কন্টেন্ট ব্যাকগ্রাউন্ডের সাথে মিলছে কিনা তা নিশ্চিত করুন। যেমন, ফোল্ডেবল ডিভাইসে দেখানো তালিকা-বিবরণ লেআউটে তালিকা প্যানেল ও বিবরণ প্যানেলের জন্য আলাদা আলাদা রঙের GradientProtections থাকতে পারে।

ছবি ১. বিভিন্ন রঙের গ্রেডিয়েন্ট প্রোটেকশন।

ট্রান্সলুসেন্ট জেসচার নেভিগেশন বার তৈরি করবেন না। একটি ট্রান্সলুসেন্ট তিন-বোতাম নেভিগেশন বার তৈরি করতে নিম্নলিখিতগুলির মধ্যে একটি করুন:

  • আপনার লেআউট আগে থেকেই ProtectionView-এ র‍্যাপ করা থাকলে, আপনি setProtections মেথডে অতিরিক্ত ColorProtection বা GradientProtection পাস করতে পারবেন। এটি করার আগে, window.isNavigationBarContrastEnforced = false নিশ্চিত করুন।
  • অন্যথায়, window.isNavigationBarContrastEnforced = true সেট করুন।

অন্যান্য পরামর্শ

ইনসেট ম্যানেজ করার সময় অতিরিক্ত পরামর্শ।

স্ক্রল করা কন্টেন্ট এজ-টু-এজ করুন

আপনার RecyclerView বা NestedScrollView-এ সিস্টেম বারের মাধ্যমে তালিকার শেষ আইটেমটি অস্পষ্ট হয়ে যায়নি তা চেক করুন। clipToPadding থেকে false-এ ইনসেট ও সেটিং ম্যানেজ করার মাধ্যমে এটি করুন।

নিচের ভিডিওতে এজ-টু-এজ ডিসপ্লে বন্ধ (বাঁদিকে) এবং চালু (ডানদিকে) থাকা অবস্থায় RecyclerView দেখানো হয়েছে:

কোড স্যাম্পেলের জন্য RecyclerView-এর সাহায্যে ডায়নামিক তালিকা তৈরি করুন বিভাগে কোড স্নিপেট দেখুন।

ফুল-স্ক্রিন ডায়ালগ এজ-টু-এজ করুন

ফুল-স্ক্রিন ডায়ালগের এজ-টু-এজ করতে, ডায়ালগে enableEdgeToEdge কল করুন।

Kotlin

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

জাভা

public class MyAlertDialogFragment extends DialogFragment {
    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            Window window = dialog.getWindow();
            if (window != null) {
                WindowCompat.enableEdgeToEdge(window);
            }
        }
    }
    ...
}

অতিরিক্ত রিসোর্স

এজ-টু-এজ মোড সম্পর্কে আরও তথ্যের জন্য নিম্নলিখিত রেফারেন্স দেখুন।

ব্লগ

ডিজাইন

অন্যান্য ডকুমেন্ট

ভিডিও