ডিসপ্লে কাট-আউট সাপোর্ট করে

Compose-এর মাধ্যমে চেষ্টা করুন

Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ ডিসপ্লে কাটআউট নিয়ে কীভাবে কাজ করতে হয় তা জানুন।

Compose-এ কাট-আউট ডিসপ্লে করা →

ডিসপ্লে কাটআউট হল কিছু ডিভাইসের এমন একটি জায়গা যা ডিসপ্লে সারফেস পর্যন্ত বিস্তৃত। এটি ডিভাইসের সামনের দিকে গুরুত্বপূর্ণ সেন্সরের জন্য জায়গা প্রদান করার পাশাপাশি এজ-টু-এজ অভিজ্ঞতা প্রদান করে।

মনে রাখবেন: কাটআউট এরিয়াতে আপনার অ্যাপ রেন্ডার করার চেষ্টা করার আগে, আপনার অ্যাপটি কন্টেন্ট এক প্রান্ত থেকে অন্য প্রান্ত পর্যন্ত দেখানোর জন্য কনফিগার করা আছে কিনা তা নিশ্চিত করুন।

Android 9 (API লেভেল ২৮) এবং তার পরবর্তী যেকোনও ভার্সনে চলে এমন ডিভাইসে Android ডিসপ্লে কাটআউট সাপোর্ট করে। তবে, ডিভাইস প্রস্তুতকারকরা Android 8.1 বা তার আগের ভার্সনে চলা ডিভাইসেও ডিসপ্লে কাটআউট সাপোর্ট করতে পারে।

এই ডকুমেন্টে কাটআউট সহ ডিভাইসের জন্য কীভাবে সহায়তা প্রদান করা যায় তা বর্ণনা করা হয়েছে, যার মধ্যে কাটআউট এরিয়া—অর্থাৎ, ডিসপ্লে সারফেসে কাটআউট সহ এক প্রান্ত থেকে অন্য প্রান্ত পর্যন্ত আয়তক্ষেত্রাকার অংশের সাথে কীভাবে কাজ করতে হয় তা অন্তর্ভুক্ত।

ছবি ১. ১ ডিসপ্লে কাট-আউট।

আপনার অ্যাপ কীভাবে কাটআউট এরিয়া ম্যানেজ করবে তা বেছে নিন

আপনি যদি চান যে আপনার কন্টেন্ট কাটআউট এরিয়ার সাথে ওভারল্যাপ না করুক, তাহলে সাধারণত আপনার কন্টেন্ট স্ট্যাটাস বার এবং নেভিগেশন বারের সাথে ওভারল্যাপ না করলেই হবে। আপনি কাটআউট এরিয়াতে রেন্ডার করলে, WindowInsetsCompat.getDisplayCutout() ব্যবহার করে DisplayCutout অবজেক্ট পুনরুদ্ধার করুন যাতে প্রতিটি কাটআউটের জন্য নিরাপদ ইনসেট ও বাউন্ডিং বক্স থাকে। এইসব API-এর সাহায্যে আপনি চেক করে দেখতে পারবেন যে আপনার কন্টেন্ট কাট-আউটের সাথে ওভারল্যাপ করছে কিনা, যাতে প্রয়োজন হলে আপনি আবার পজিশন করতে পারেন।

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

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: ডিসপ্লে কাট-আউট সিস্টেম বারে থাকলে, কাট-আউট অংশে কন্টেন্ট রেন্ডার হয়। অন্যথায়, উইন্ডো ডিসপ্লে কাটআউটকে ওভারল্যাপ করে না; যেমন, ল্যান্ডস্কেপ মোডে দেখানোর সময় কন্টেন্ট লেটারবক্স করা হতে পারে। আপনার অ্যাপ SDK 35 টার্গেট করলে, এটি নন-ফ্লোটিং উইন্ডোর জন্য ALWAYS হিসেবে ব্যাখ্যা করা হয়।
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: কন্টেন্টকে সবসময় কাটআউট এরিয়াতে এক্সটেন্ড করার অনুমতি দেওয়া হয়। আপনার অ্যাপ যদি SDK 35-কে টার্গেট করে এবং Android 15 ডিভাইসে চলে, তাহলে এজ-টু-এজ ডিসপ্লে নিশ্চিত করার জন্য নন-ফ্লোটিং উইন্ডোর ক্ষেত্রে এটিই একমাত্র অনুমোদিত মোড।
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: পোর্ট্রেট ও ল্যান্ডস্কেপ, দুই মোডেই কাটআউট অংশে কন্টেন্ট রেন্ডার করা হয়। ফ্লোটিং উইন্ডোর জন্য ব্যবহার করবেন না। আপনার অ্যাপ SDK 35 টার্গেট করলে, এটি ALWAYS হিসেবে নন-ফ্লোটিং উইন্ডোর জন্য ব্যাখ্যা করা হয়।
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: কন্টেন্ট কখনই কাটআউট এরিয়াতে রেন্ডার হয় না। আপনার অ্যাপ SDK 35-কে টার্গেট করলে, এটি নন-ফ্লোটিং উইন্ডোর জন্য ALWAYS হিসেবে ব্যাখ্যা করা হয়।

আপনি প্রোগ্রাম্যাটিক্যালি বা আপনার অ্যাক্টিভিটিতে স্টাইল সেট করে কাটআউট মোড সেট করতে পারেন। নিম্নলিখিত উদাহরণটি অ্যাক্টিভিটিতে LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES অ্যাট্রিবিউট প্রয়োগ করার জন্য একটি স্টাইল নির্ধারণ করে।

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

নিম্নলিখিত বিভাগগুলি আরও বিস্তারিতভাবে বিভিন্ন কাটআউট মোড বর্ণনা করে।

ডিফল্ট মোড

আপনার অ্যাপ SDK 35-কে টার্গেট করলে এবং Android 15 ডিভাইসে রান করলে, LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS হল ডিফল্ট অ্যাকশন এবং LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT-কে LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS হিসেবে ব্যাখ্যা করা হয় নন-ফ্লোটিং উইন্ডোর জন্য।

অন্যথায়, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT ডিফল্ট হিসেবে সেট করা থাকে।

ছোট প্রান্তের কাটআউট অংশে কন্টেন্ট রেন্ডার করুন

আপনার অ্যাপ SDK 35-কে টার্গেট করলে এবং Android 15 ডিভাইসে রান করলে, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES-কে নন-ফ্লোটিং উইন্ডোর জন্য LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS হিসেবে ব্যাখ্যা করা হয়।

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

মনে রাখবেন: উইন্ডোটি কখনই স্ক্রিনের লম্বা প্রান্তের কাট-আউট এলাকায় প্রসারিত হতে পারে না।

পোর্ট্রেট মোডে থাকা ডিভাইসের জন্য নিম্নলিখিত ছবিটি LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES-এর একটি উদাহরণ:

ছবি ২. পোর্ট্রেট মোডে থাকাকালীন কাটআউট এরিয়াতে কন্টেন্ট রেন্ডার করা।

ল্যান্ডস্কেপ মোডে থাকা ডিভাইসের জন্য LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES-এর উদাহরণ হিসেবে নিচের ছবিটি দেওয়া হল:

ছবি ৩. ল্যান্ডস্কেপ মোডে থাকাকালীন কাটআউট এরিয়াতে কন্টেন্ট রেন্ডার করা।

এই মোডে, উইন্ডোটি সিস্টেম বার লুকাচ্ছে কিনা তা নির্বিশেষে, পোর্ট্রেট এবং ল্যান্ডস্কেপ উভয় ক্ষেত্রেই ডিসপ্লের ছোট প্রান্তে কাটআউটের নিচে উইন্ডোটি প্রসারিত হয়।

কোণে কাটআউট থাকলে তা ছোট প্রান্তে আছে বলে বিবেচনা করা হয়:

ছবি ৪. কোণায় কাটআউট সহ ডিভাইস।

ডিসপ্লে কাট-আউট এলাকায় কখনও কন্টেন্ট রেন্ডার করা হয় না

আপনার অ্যাপ SDK 35-কে টার্গেট করলে এবং Android 15 ডিভাইসে রান করলে, LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-কে নন-ফ্লোটিং উইন্ডোর জন্য LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS হিসেবে ব্যাখ্যা করা হয়।

LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-এর ক্ষেত্রে, উইন্ডো কখনও কাটআউট এরিয়ার সাথে ওভারল্যাপ করতে পারে না।

নিচে পোর্ট্রেট মোডে LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-এর উদাহরণ দেওয়া হল:

ছবি ৫. পোর্ট্রেট মোডের জন্য LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-এর উদাহরণ।

ল্যান্ডস্কেপ মোডে LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-এর উদাহরণ নিচে দেওয়া হল:

ছবি ৬. ল্যান্ডস্কেপ মোডে LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER-এর উদাহরণ।

ডিসপ্লে কাটআউট সংক্রান্ত সহায়তার জন্য পেশাদার পদ্ধতি

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

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

• সম্ভব হলে, স্ট্যাটাস বারের উচ্চতা জানতে এবং আপনার কন্টেন্টে উপযুক্ত প্যাডিং প্রয়োগ করতে WindowInsetsCompat ব্যবহার করুন। স্ট্যাটাস বারের উচ্চতা হার্ডকোড করা এড়িয়ে চলুন, কারণ এর ফলে কন্টেন্ট ওভারল্যাপ বা কাট-অফ হতে পারে।

  

  ছবি ৭. কন্টেন্ট ওভারল্যাপ করা বা কেটে যাওয়া এড়াতে WindowInsetsCompat ব্যবহার করুন।

• আপনার অ্যাপ কতটা উইন্ডো স্পেস ব্যবহার করছে তা নির্ধারণ করতে View.getLocationInWindow() ব্যবহার করুন। অ্যাপটি পুরো উইন্ডো ব্যবহার করছে বলে ধরে নেবেন না এবং View.getLocationOnScreen() ব্যবহার করবেন না।

• আপনার অ্যাপকে ইমারসিভ মোডে ট্রানজিশন করতে হলে always, shortEdges বা never কাটআউট মোড ব্যবহার করুন। ডিফল্ট কাটআউট আচরণ সিস্টেম বার উপস্থিত থাকাকালীন আপনার অ্যাপের কন্টেন্ট কাটআউট এলাকায় রেন্ডার করতে পারে, কিন্তু ইমারসিভ মোডে নয়। এর ফলে ট্রানজিশনের সময় কন্টেন্ট উপরে ও নিচে মুভ করে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

  

  ছবি ৮. ট্রানজিশনের সময় কন্টেন্ট উপরে ও নিচে সরানোর উদাহরণ।

• ইমারসিভ মোডে, উইন্ডো বনাম স্ক্রিন কোঅর্ডিনেট ব্যবহার করার সময় সতর্ক থাকুন, কারণ লেটারবক্স করা থাকলে আপনার অ্যাপ পুরো স্ক্রিন ব্যবহার করে না। লেটারবক্সের কারণে, স্ক্রিন অরিজিনের স্থানাঙ্ক এবং উইন্ডো অরিজিনের স্থানাঙ্ক এক নয়। আপনি getLocationOnScreen() ব্যবহার করে প্রয়োজন অনুযায়ী স্ক্রিন কোঅর্ডিনেটকে ভিউয়ের কোঅর্ডিনেটে পরিবর্তন করতে পারবেন। নিম্নলিখিত ছবি থেকে বোঝা যায় যে কন্টেন্ট লেটারবক্স করা হলে কীভাবে কোঅর্ডিনেট আলাদা হয়:

  

  ছবি ৯. কন্টেন্ট লেটারবক্স করা হলে উইন্ডো বনাম স্ক্রিন কোঅর্ডিনেট।

• MotionEvent ম্যানেজ করার সময়, একই ধরনের কোঅর্ডিনেট সংক্রান্ত সমস্যা এড়াতে MotionEvent.getX() এবং MotionEvent.getY() ব্যবহার করুন। MotionEvent.getRawX() অথবা MotionEvent.getRawY() ব্যবহার করবেন না।

আপনার কন্টেন্ট কীভাবে রেন্ডার হয় তা পরীক্ষা করুন

আপনার অ্যাপের সব স্ক্রিন ও অভিজ্ঞতা পরীক্ষা করুন। সম্ভব হলে, বিভিন্ন ধরনের কাটআউট সহ ডিভাইসে পরীক্ষা করুন। আপনার কাছে কাটআউট সহ কোনও ডিভাইস না থাকলে, আপনি Android 9 বা তার পরবর্তী যেকোনও ভার্সনে চলা কোনও ডিভাইস বা এমুলেটরে সাধারণ কাটআউট কনফিগারেশন সিমুলেট করতে পারেন নিম্নলিখিত কাজগুলি করে:

1. ডেভেলপার বিকল্প চালু করুন।
2. ডেভেলপার বিকল্প স্ক্রিনে, নিচের দিকে স্ক্রল করে ড্রয়িং বিভাগে যান এবং কাট-আউট সহ ডিসপ্লে সিমুলেট করুন বিকল্প বেছে নিন।

3. কাটআউটের ধরন বেছে নিন।

   

   ছবি ১০. আপনার কন্টেন্ট কীভাবে রেন্ডার হয় তা পরীক্ষা করার জন্য ডেভেলপার বিকল্প।

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

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT