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

রচনার সাথে আরও ভাল তৈরি করুন৷
Android TV OS এর জন্য Jetpack Compose ব্যবহার করে ন্যূনতম কোড সহ সুন্দর UI তৈরি করুন।

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

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

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

Leanback থিম

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

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

NoTitleBar থিম

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

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

AppCompat থিম

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

আপনি যদি অ্যান্ড্রয়েড মোবাইল এবং অ্যান্ড্রয়েড টিভির মধ্যে একটি ভাগ করা কোডবেস সহ একটি অ্যাপ তৈরি করেন তবে আপনি থিমিংয়ের কারণে কিছু চ্যালেঞ্জের মধ্যে পড়তে পারেন। 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>

মৌলিক টিভি লেআউট তৈরি করুন

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

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

ওভারস্ক্যান

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

ওভারস্ক্যান-নিরাপদ এলাকার মধ্যে সর্বদা ব্যবহারকারীর কাছে দৃশ্যমান হওয়া আবশ্যক স্ক্রীন উপাদানগুলির অবস্থান। একটি লেআউটে বাম এবং ডান প্রান্তে 48 dp এর 5% মার্জিন এবং উপরের এবং নীচের প্রান্তে 27 dp যুক্ত করা লেআউটের স্ক্রীন উপাদানগুলি ওভারস্ক্যান-নিরাপদ এলাকার মধ্যে রয়েছে তা নিশ্চিত করতে সহায়তা করে৷

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

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

<?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"/>
    
  • স্ক্রীন থেকে 10 ফুট দূরে বসে থাকা কারো কাছে পরিষ্কারভাবে দৃশ্যমান হওয়ার জন্য আপনার সমস্ত ভিউ উইজেটগুলিকে যথেষ্ট বড় করুন৷ এটি করার সর্বোত্তম উপায় হল পরম আকারের পরিবর্তে লেআউট-রিলেটিভ সাইজিং এবং পরম পিক্সেল ইউনিটের পরিবর্তে ঘনত্ব-স্বাধীন পিক্সেল (ডিপি) ইউনিট ব্যবহার করা। উদাহরণস্বরূপ, একটি উইজেটের প্রস্থ সেট করতে, পিক্সেল পরিমাপের পরিবর্তে wrap_content ব্যবহার করুন এবং একটি উইজেটের মার্জিন সেট করতে, px মানের পরিবর্তে dp মান ব্যবহার করুন।

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

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

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

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

প্যানেল রেজোলিউশন স্ক্রীন পিক্সেল ঘনত্ব
720p tvdpi
1080 xhdpi
4K xxxhdpi
আরও তথ্যের জন্য বিভিন্ন পিক্সেল ঘনত্ব সমর্থন দেখুন।

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

এড়াতে লেআউট নিদর্শন

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

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

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

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

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

কার্যকর বিজ্ঞাপন প্রদান

বসার ঘরের পরিবেশের জন্য, আমরা আপনাকে ভিডিও বিজ্ঞাপন সমাধানগুলি ব্যবহার করার পরামর্শ দিই যা পূর্ণ-স্ক্রীন এবং 30 সেকেন্ডের মধ্যে বাতিলযোগ্য৷ অ্যান্ড্রয়েড টিভিতে বিজ্ঞাপনের কার্যকারিতা, যেমন খারিজ বোতাম এবং ক্লিকথ্রু, স্পর্শের পরিবর্তে ডি-প্যাড ব্যবহার করে অ্যাক্সেসযোগ্য হতে হবে।

Android TV একটি ওয়েব ব্রাউজার প্রদান করে না। আপনার বিজ্ঞাপনগুলি অবশ্যই একটি ওয়েব ব্রাউজার চালু করার চেষ্টা করবে না বা Android TV ডিভাইসগুলির জন্য অনুমোদিত নয় এমন Google Play Store সামগ্রীতে পুনঃনির্দেশ করবে না৷

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

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

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