আপনার অ্যাপে কন্টেন্ট এজ-টু-এজ দেখান

রচনা পদ্ধতি চেষ্টা করুন

জেটপ্যাক কম্পোজ হল Android এর জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে এজ-টু-এজ দিয়ে কীভাবে কাজ করবেন তা শিখুন।

কম্পোজে এজ-টু-এজ →

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

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

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

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

1. এজ-টু-এজ ডিসপ্লে সক্ষম করুন
2. যেকোনো ভিজ্যুয়াল ওভারল্যাপ হ্যান্ডেল করুন।
3. সিস্টেম বার পিছনে scrims দেখানো বিবেচনা করুন.

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

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

পূর্ববর্তী অ্যান্ড্রয়েড সংস্করণগুলিতে এজ-টু-এজ সক্ষম করতে, নিম্নলিখিতগুলি করুন:

1. আপনার অ্যাপ বা মডিউলের build.gradle ফাইলে androidx.activity লাইব্রেরিতে একটি নির্ভরতা যোগ করুন:

   কোটলিন

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }
   

   গ্রোভি

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }
   

2. আপনার অ্যাপে enableEdgeToEdge এক্সটেনশন ফাংশন আমদানি করুন:

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

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

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }
   

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

enableEdgeToEdge() ফাংশন স্বয়ংক্রিয়ভাবে ঘোষণা করে যে অ্যাপটি প্রান্ত থেকে প্রান্তে রাখা উচিত এবং সিস্টেম বারের রঙগুলি সামঞ্জস্য করে।

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

ইনসেট ব্যবহার করে ওভারল্যাপ পরিচালনা করুন

আপনার অ্যাপের কিছু দৃশ্য সিস্টেম বারের পিছনে আঁকতে পারে, যেমন চিত্র 3 এ দেখানো হয়েছে।

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

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

• সিস্টেম বার ইনসেট: ট্যাপ করা যায় এমন দৃশ্যগুলির জন্য সেরা এবং যা সিস্টেম বার দ্বারা দৃশ্যত অস্পষ্ট করা উচিত নয়।

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

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

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

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

উদাহরণস্বরূপ, চিত্র 3-এ ফ্লোটিং অ্যাকশন বোতাম (এফএবি) নেভিগেশন বার দ্বারা আংশিকভাবে অস্পষ্ট:

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

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

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 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 want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

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

একই অঙ্গভঙ্গি নেভিগেশন মোডে প্রযোজ্য, যেমন চিত্র 5 এ দেখানো হয়েছে:

কাটআউট ইনসেটগুলি প্রদর্শন করুন

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

উদাহরণস্বরূপ, অনেক অ্যাপ স্ক্রীন আইটেমগুলির একটি তালিকা দেখায়। ডিসপ্লে কাটআউট বা সিস্টেম বার দিয়ে তালিকা আইটেমগুলিকে অস্পষ্ট করবেন না।

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;
});

লজিক্যাল বা সিস্টেম বার এবং ডিসপ্লে কাটআউটের ধরন নিয়ে 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" />

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

সিস্টেম জেসচার ইনসেটগুলি উইন্ডোর সেই ক্ষেত্রগুলিকে প্রতিনিধিত্ব করে যেখানে সিস্টেমের অঙ্গভঙ্গিগুলি আপনার অ্যাপের উপর অগ্রাধিকার দেয়৷ এই অঞ্চলগুলি চিত্র 6-এ কমলা রঙে দেখানো হয়েছে:

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

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

অ্যান্ড্রয়েড 10 বা তার পরে, সিস্টেম জেসচার ইনসেটগুলিতে হোম জেসচারের জন্য একটি নীচের ইনসেট এবং পিছনের অঙ্গভঙ্গির জন্য একটি বাম এবং ডান ইনসেট থাকে:

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

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;
});

উপাদান উপাদান

অনেক ভিউ-ভিত্তিক অ্যান্ড্রয়েড মেটেরিয়াল কম্পোনেন্ট (com.google.android.material){:.external} স্বয়ংক্রিয়ভাবে ইনসেট পরিচালনা করে, যার মধ্যে BottomAppBar , BottomNavigationView , NavigationRailView এবং NavigationView

যাইহোক, AppBarLayout স্বয়ংক্রিয়ভাবে ইনসেটগুলি পরিচালনা করে না। শীর্ষ ইনসেটগুলি পরিচালনা করতে android:fitsSystemWindows="true" যোগ করুন।

কম্পোজে উপাদান উপাদানগুলির সাথে কীভাবে ইনসেটগুলি পরিচালনা করবেন তা পড়ুন।

ইমারসিভ মোড

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

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());

এই বৈশিষ্ট্যটি বাস্তবায়নের বিষয়ে আরও তথ্যের জন্য ইমারসিভ মোডের জন্য সিস্টেম বার লুকান দেখুন।

অতিরিক্ত সম্পদ

WindowInsets , অঙ্গভঙ্গি নেভিগেশন এবং কীভাবে ইনসেটগুলি কাজ করে সে সম্পর্কে আরও তথ্যের জন্য নিম্নলিখিত উল্লেখগুলি দেখুন:

• WindowInsets — লেআউটের শ্রোতা
• অঙ্গভঙ্গি নেভিগেশন: ইনসেট
• কীভাবে ইনসেটগুলি অ্যান্ড্রয়েডে কাজ করে?