Leanback UI টুলকিটে লেআউট

কম্পোজ দিয়ে আরও ভালোভাবে তৈরি করুন

জেটপ্যাক কম্পোজ ব্যবহার করে অ্যান্ড্রয়েড টিভি ওএস-এর জন্য ন্যূনতম কোডে সুন্দর ইউআই তৈরি করুন।

টিভির জন্য সুর রচনা করুন →

একটি টিভি স্ক্রিন সাধারণত প্রায় ১০ ফুট দূর থেকে দেখা হয়, এবং যদিও এটি বেশিরভাগ অন্যান্য অ্যান্ড্রয়েড-চালিত ডিভাইসের ডিসপ্লের চেয়ে অনেক বড়, একটি টিভি স্ক্রিন ছোট ডিভাইসের স্ক্রিনের মতো একই স্তরের ডিটেইল এবং রঙ প্রদান করে না। এই কারণগুলোর জন্য একটি কার্যকর এবং আনন্দদায়ক ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে আপনাকে টিভি ডিভাইসের কথা মাথায় রেখে অ্যাপ লেআউট তৈরি করতে হবে।

টিভির জন্য লেআউট থিম ব্যবহার করুন

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

লিনব্যাক থিম

অপ্রচলিত androidx.leanback লাইব্রেরিতে Theme.Leanback অন্তর্ভুক্ত রয়েছে, যা টিভি অ্যাক্টিভিটির জন্য একটি থিম এবং এটি Leanback UI টুলকিট অ্যাপগুলোর জন্য একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল স্টাইল প্রদান করে। AndroidX Leanback ক্লাস দিয়ে তৈরি যেকোনো টিভি অ্যাপের জন্য এই থিমটি ব্যবহার করুন। নিচের কোড স্যাম্পলটিতে দেখানো হয়েছে কীভাবে একটি অ্যাক্টিভিটিতে এই থিমটি প্রয়োগ করতে হয়:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

নোটাইটেলবার থিম

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

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

অ্যাপকম্প্যাট থিম

অ্যান্ড্রয়েড মোবাইল অ্যাপে, Theme.AppCompat থিমগুলোর কোনো একটির সাথে AppCompatActivity ব্যবহার করা খুবই প্রচলিত। এই সংমিশ্রণটি আপনাকে ডিভাইসে চলমান অ্যান্ড্রয়েডের সংস্করণ নিয়ে চিন্তা না করেই ড্রয়েবল টিন্টিং-এর মতো ফিচারগুলো ব্যবহার করতে দেয়। আপনি যদি এমন একটি অ্যাপ তৈরি করেন যা শুধুমাত্র অ্যান্ড্রয়েড টিভিতে চলে, তাহলে AppCompatActivity ব্যবহার করবেন না, কারণ এটি যে ফিচারগুলো সক্ষম করে তা হয় অ্যান্ড্রয়েড টিভিতে আগে থেকেই উপলব্ধ অথবা প্রাসঙ্গিক নয়।

আপনি যদি অ্যান্ড্রয়েড মোবাইল এবং অ্যান্ড্রয়েড টিভির মধ্যে একটি শেয়ার্ড কোডবেস ব্যবহার করে কোনো অ্যাপ তৈরি করেন, তাহলে থিমিং-এর কারণে কিছু সমস্যার সম্মুখীন হতে পারেন। AppCompatActivity এবং বিভিন্ন AppCompat উইজেট ব্যবহারের জন্য আপনাকে Theme.AppCompat ব্যবহার করতে হবে, অন্যদিকে Leanback UI টুলকিটের ফ্র্যাগমেন্টগুলো ব্যবহারের জন্য আপনাকে FragmentActivity এবং Theme.Leanback ব্যবহার করতে হবে।

যদি আপনার অ্যান্ড্রয়েড মোবাইল এবং অ্যান্ড্রয়েড টিভির জন্য একই বেস অ্যাক্টিভিটি ব্যবহার করার প্রয়োজন হয়, অথবা যদি আপনি AppCompatImageView এর মতো AppCompat উইজেটের উপর ভিত্তি করে কাস্টম ভিউ ব্যবহার করতে চান, তাহলে Theme.AppCompat.Leanback থিমগুলো ব্যবহার করুন। এই থিমগুলো আপনাকে AppCompat এর সমস্ত থিমিংয়ের পাশাপাশি Leanback-এর নিজস্ব ভ্যালুগুলোও প্রদান করে।

আপনি অন্য যেকোনো থিমের মতোই Theme.AppCompat.Leanback থিমগুলো কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি Leanback UI টুলকিটের OnboardingSupportFragment এর নির্দিষ্ট মানগুলো পরিবর্তন করতে চান, তাহলে নিচের মতো করে করুন:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

টিভির প্রাথমিক লেআউট তৈরি করুন

টিভি ডিভাইসের লেআউটগুলো যেন বড় পর্দায় ব্যবহারযোগ্য ও কার্যকর হয়, তা নিশ্চিত করতে কিছু মৌলিক নির্দেশিকা অনুসরণ করা আবশ্যক। টিভি পর্দার জন্য অপ্টিমাইজ করা লেআউট তৈরি করতে এই টিপসগুলো অনুসরণ করুন:

• ল্যান্ডস্কেপ ওরিয়েন্টেশনে লেআউট তৈরি করুন। টিভি স্ক্রিন সর্বদা ল্যান্ডস্কেপ মোডে প্রদর্শিত হয়।
• স্ক্রিনের বাম বা ডান দিকে নেভিগেশন কন্ট্রোলগুলো রাখুন এবং উল্লম্ব স্থানটি কন্টেন্টের জন্য সংরক্ষণ করুন।
• ফ্র্যাগমেন্ট ব্যবহার করে বিভিন্ন বিভাগে বিভক্ত UI তৈরি করুন। স্ক্রিনের অনুভূমিক স্থানের আরও ভালো ব্যবহারের জন্য ListView পরিবর্তে GridView এর মতো ভিউ গ্রুপ ব্যবহার করুন।
• ভিউ সাজানোর জন্য RelativeLayout বা LinearLayout মতো ভিউ গ্রুপ ব্যবহার করুন। এই পদ্ধতিটি সিস্টেমকে একটি টিভি স্ক্রিনের আকার, অ্যালাইনমেন্ট, অ্যাসপেক্ট রেশিও এবং পিক্সেল ডেনসিটি অনুযায়ী ভিউগুলোর অবস্থান সামঞ্জস্য করতে দেয়।
• UI অগোছালো হওয়া এড়াতে লেআউট কন্ট্রোলগুলোর মধ্যে পর্যাপ্ত মার্জিন যোগ করুন।

ওভারস্ক্যান

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

যেসব স্ক্রিন এলিমেন্ট ব্যবহারকারীর কাছে সর্বদা দৃশ্যমান থাকা আবশ্যক, সেগুলোকে ওভারস্ক্যান-সেফ এরিয়ার মধ্যে রাখুন। একটি লেআউটে বাম ও ডান প্রান্তে ৪৮ ডিপি এবং ওপর ও নিচের প্রান্তে ২৭ ডিপি-র ৫% মার্জিন যোগ করলে, লেআউটের স্ক্রিন এলিমেন্টগুলো ওভারস্ক্যান-সেফ এরিয়ার মধ্যে আছে তা নিশ্চিত করতে সাহায্য করে।

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

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

সতর্কতা: আপনি যদি AndroidX Leanback ক্লাস, যেমন BrowseSupportFragment বা সম্পর্কিত উইজেট ব্যবহার করেন, তাহলে আপনার লেআউটে ওভারস্ক্যান মার্জিন প্রয়োগ করবেন না, কারণ সেই লেআউটগুলিতে ইতিমধ্যেই ওভারস্ক্যান-নিরাপদ মার্জিন অন্তর্ভুক্ত থাকে।

ব্যবহারযোগ্য টেক্সট এবং কন্ট্রোল তৈরি করুন

আপনার টিভি অ্যাপের লেখা ও কন্ট্রোলগুলো দূর থেকে আরও সহজে দেখার জন্য এই পরামর্শগুলো অনুসরণ করুন:

• টেক্সটকে ছোট ছোট অংশে ভাগ করুন যাতে ব্যবহারকারীরা দ্রুত চোখ বুলিয়ে নিতে পারে।
• গাঢ় পটভূমিতে হালকা রঙের লেখা ব্যবহার করুন। এই শৈলীটি টিভিতে পড়তে সহজ।
• হালকা ফন্ট অথবা এমন ফন্ট পরিহার করুন যেগুলোর স্ট্রোক একই সাথে খুব সরু ও খুব চওড়া। পাঠযোগ্যতা বাড়াতে সরল স্যানস-সেরিফ ফন্ট এবং অ্যান্টি-অ্যালিয়াসিং ব্যবহার করুন।
• অ্যান্ড্রয়েডের স্ট্যান্ডার্ড ফন্ট সাইজ ব্যবহার করুন:

  <TextView
        android:id="@+id/atext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

• আপনার সমস্ত ভিউ উইজেটকে এত বড় করুন যাতে স্ক্রিন থেকে ১০ ফুট দূরে বসে থাকা কোনো ব্যক্তিও তা স্পষ্টভাবে দেখতে পায়। এটি করার সেরা উপায় হলো অ্যাবসোলিউট সাইজিংয়ের পরিবর্তে লেআউট-রিলেটিভ সাইজিং এবং অ্যাবসোলিউট পিক্সেল ইউনিটের পরিবর্তে ডেনসিটি-ইন্ডিপেন্ডেন্ট পিক্সেল (dp) ইউনিট ব্যবহার করা। উদাহরণস্বরূপ, একটি উইজেটের প্রস্থ নির্ধারণ করতে পিক্সেল পরিমাপের পরিবর্তে wrap_content ব্যবহার করুন, এবং একটি উইজেটের মার্জিন নির্ধারণ করতে px মানের পরিবর্তে dp মান ব্যবহার করুন।

ঘনত্ব-নিরপেক্ষ পিক্সেল এবং বড় স্ক্রিনের আকারের জন্য লেআউট তৈরি করার বিষয়ে আরও তথ্যের জন্য, স্ক্রিন সামঞ্জস্যতার সংক্ষিপ্ত বিবরণ দেখুন।

টিভির জন্য লেআউট রিসোর্স পরিচালনা করুন

অন্যান্য সমস্ত অ্যান্ড্রয়েড ডিভাইসের মতোই, টিভিরও বিভিন্ন স্ক্রিন সাইজ এবং বিভিন্ন রেজোলিউশন সাপোর্ট করে, যার মধ্যে 720p, 1080p, এবং 4K অন্তর্ভুক্ত, তবে এগুলিতেই সীমাবদ্ধ নয়। নিশ্চিত করুন যে আপনার অ্যাপটি বিভিন্ন স্ক্রিন সাইজ সাপোর্ট করে ।

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

বড় পর্দার জন্য লেআউট ও রিসোর্স অপ্টিমাইজ করার বিষয়ে আরও তথ্যের জন্য, স্ক্রিন সামঞ্জস্যতার সংক্ষিপ্ত বিবরণ দেখুন।

যে লেআউট প্যাটার্নগুলি এড়িয়ে চলতে হবে

লেআউট তৈরির এমন কিছু পদ্ধতি আছে যা টিভি ডিভাইসে ভালোভাবে কাজ করে না। টিভির জন্য লেআউট তৈরি করার সময় এড়িয়ে চলার মতো কিছু ইউজার ইন্টারফেস পদ্ধতি নিচে দেওয়া হলো।

• ফোন বা ট্যাবলেট লেআউটের পুনঃব্যবহার: কোনো পরিবর্তন ছাড়া ফোন বা ট্যাবলেট অ্যাপের লেআউট পুনরায় ব্যবহার করবেন না। অন্যান্য অ্যান্ড্রয়েড ডিভাইসের জন্য তৈরি লেআউটগুলো টিভি ডিভাইসের জন্য তেমন উপযুক্ত নয় এবং টিভিতে ব্যবহারের জন্য সেগুলোকে অবশ্যই সরল করতে হবে।
• ActionBar ব্যবহার: যদিও ফোন এবং ট্যাবলেটে অ্যাকশনবার ব্যবহারের পরামর্শ দেওয়া হয়, তবে এটি টিভির ইন্টারফেসের জন্য উপযুক্ত নয়। টিভি অ্যাপের ক্ষেত্রে অ্যাকশনবার অপশন মেনু বা যেকোনো পুল-ডাউন মেনু ব্যবহার করা কঠোরভাবে নিরুৎসাহিত করা হয়, কারণ রিমোট কন্ট্রোল দিয়ে এই ধরনের মেনুতে নেভিগেট করা কঠিন।
• ViewPager ব্যবহার করে স্ক্রিনগুলির মধ্যে স্লাইড করা ফোন বা ট্যাবলেটে খুব ভালোভাবে কাজ করতে পারে, কিন্তু টিভিতে এটি চেষ্টা করবেন না!

টিভির জন্য উপযুক্ত লেআউট ডিজাইন করার বিষয়ে আরও তথ্যের জন্য, টিভি ডিজাইন গাইডটি দেখুন।

বড় বিটম্যাপ পরিচালনা করুন

অন্যান্য অ্যান্ড্রয়েড ডিভাইসের মতোই, টিভি ডিভাইসগুলোরও সীমিত পরিমাণ মেমোরি থাকে। আপনি যদি আপনার অ্যাপের লেআউট খুব উচ্চ-রেজোলিউশনের ছবি দিয়ে তৈরি করেন অথবা অ্যাপের কার্যক্রমে অনেক উচ্চ-রেজোলিউশনের ছবি ব্যবহার করেন, তবে এটি দ্রুত মেমোরির সীমাবদ্ধতায় পৌঁছে যেতে পারে এবং এর ফলে ‘আউট অফ মেমোরি’ ত্রুটি দেখা দিতে পারে। বেশিরভাগ ক্ষেত্রে, আমরা আপনার অ্যাপে বিটম্যাপ ফেচ, ডিকোড এবং ডিসপ্লে করার জন্য গ্লাইড (Glide) লাইব্রেরি ব্যবহার করার পরামর্শ দিই। বিটম্যাপ নিয়ে কাজ করার সময় সেরা পারফরম্যান্স পাওয়ার বিষয়ে আরও তথ্যের জন্য, আমাদের সাধারণ অ্যান্ড্রয়েড গ্রাফিক্স সংক্রান্ত সেরা অনুশীলনগুলো দেখুন।

কার্যকর বিজ্ঞাপন সরবরাহ করুন

লিভিং রুমের পরিবেশের জন্য, আমরা এমন ভিডিও বিজ্ঞাপন সমাধান ব্যবহার করার পরামর্শ দিই যা ফুল-স্ক্রিন এবং ৩০ সেকেন্ডের মধ্যে বন্ধ করা যায়। অ্যান্ড্রয়েড টিভিতে বিজ্ঞাপনের কার্যকারিতা, যেমন ডিসমিস বাটন এবং ক্লিকথ্রু, টাচের পরিবর্তে ডি-প্যাড ব্যবহার করে অ্যাক্সেসযোগ্য হতে হবে।

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

দ্রষ্টব্য: আপনি সোশ্যাল মিডিয়া পরিষেবাগুলিতে লগইন করার জন্য WebView ক্লাস ব্যবহার করতে পারেন।

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

টিভির জন্য ডিজাইন