Membuat tata letak TV

Layar TV biasanya dilihat dari jarak sekitar 3 meter, dan meskipun jauh lebih besar daripada sebagian besar layar perangkat Android lainnya, layar TV tidak memberikan tingkat detail dan warna yang sama dengan layar perangkat yang lebih kecil. Faktor-faktor ini mengharuskan Anda membuat tata letak aplikasi dengan mempertimbangkan perangkat TV untuk menciptakan pengalaman pengguna yang berguna dan menyenangkan.

Panduan ini menjelaskan persyaratan minimum dan detail implementasi untuk membuat tata letak yang efektif bagi aplikasi TV.

Untuk mengetahui informasi selengkapnya, baca Mendesain untuk TV.

Menggunakan tema tata letak untuk TV

Tema Android dapat menyediakan dasar untuk tata letak dalam aplikasi TV Anda. Gunakan tema untuk mengubah tampilan aktivitas aplikasi Anda yang dimaksudkan untuk berjalan di perangkat TV. Bagian ini menjelaskan tema yang akan digunakan.

Tema leanback

Library androidx Leanback menyertakan Theme.Leanback, tema untuk aktivitas TV yang menyediakan gaya visual yang konsisten. Sebaiknya gunakan tema ini untuk aplikasi TV apa pun yang dibuat dengan class AndroidX Leanback. Contoh kode berikut menunjukkan cara menerapkan tema ini ke suatu aktivitas:

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

Tema NoTitleBar

Panel judul adalah elemen antarmuka pengguna standar untuk aplikasi Android di ponsel dan tablet, tetapi tidak sesuai untuk aplikasi TV. Jika tidak menggunakan class AndroidX Leanback, terapkan tema NoTitleBar ke aktivitas TV Anda agar baris judul tidak ditampilkan. Contoh kode dari manifes aplikasi TV berikut menunjukkan cara menerapkan tema ini untuk menghilangkan tampilan baris judul:

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

Tema AppCompat

Di aplikasi seluler Android, sangat umum menggunakan AppCompatActivity bersama dengan salah satu tema Theme.AppCompat. Kombinasi ini memungkinkan Anda menggunakan fitur seperti penambahan tint drawable tanpa perlu mengkhawatirkan versi Android yang berjalan di perangkat. Jika Anda mengembangkan aplikasi yang hanya berjalan di Android TV, Anda tidak perlu menggunakan AppCompatActivity, karena fitur yang diaktifkannya sudah tersedia di Android TV atau tidak relevan.

Jika Anda mem-build aplikasi dengan codebase bersama antara perangkat seluler Android dan Android TV, Anda mungkin akan mengalami beberapa tantangan karena penerapan tema. AppCompatActivity dan berbagai widget AppCompat mengharuskan Anda menggunakan Theme.AppCompat, sedangkan fragmen Leanback mengharuskan Anda menggunakan FragmentActivity dan Theme.Leanback.

Jika Anda perlu menggunakan aktivitas dasar yang sama untuk perangkat seluler Android dan Android TV, atau jika Anda ingin menggunakan tampilan kustom berdasarkan widget AppCompat seperti AppCompatImageView, gunakan tema Theme.AppCompat.Leanback. Tema tersebut memberi Anda semua tema dari AppCompat dan juga menyediakan nilai khusus Leanback.

Anda dapat menyesuaikan tema Theme.AppCompat.Leanback dengan cara yang sama seperti menyesuaikan tema lainnya. Misalnya, jika Anda ingin mengubah nilai yang spesifik untuk OnboardingSupportFragment Leanback, lakukan sesuatu yang mirip dengan berikut ini:

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

Membuat tata letak dasar untuk TV

Tata letak untuk perangkat TV harus mengikuti beberapa panduan dasar untuk membantu memastikannya dapat digunakan dan efektif di layar besar. Ikuti tips berikut untuk membuat tata letak yang dioptimalkan untuk layar TV:

  • Buat tata letak dengan orientasi lanskap. Layar TV selalu ditampilkan dalam mode lanskap.
  • Letakkan kontrol navigasi di layar di sisi kiri atau kanan layar dan simpan ruang vertikal untuk konten.
  • Buat UI yang dibagi menjadi beberapa bagian menggunakan fragmen. Gunakan kelompok tampilan seperti GridView, bukan ListView, untuk memanfaatkan ruang layar horizontal dengan lebih baik.
  • Gunakan kelompok tampilan seperti RelativeLayout atau LinearLayout untuk mengatur tampilan. Pendekatan ini memungkinkan sistem menyesuaikan posisi tampilan dengan ukuran, perataan, rasio aspek, dan kepadatan piksel layar TV.
  • Tambahkan margin yang mencukupi di antara kontrol tata letak agar UI menjadi rapi.

Overscan

Tata letak untuk TV memiliki beberapa persyaratan unik karena evolusi standar TV dan keinginan untuk selalu menyajikan gambar layar penuh kepada penonton. Karena alasan ini, perangkat TV mungkin memangkas tepi luar tata letak aplikasi untuk memastikan seluruh layar terisi. Perilaku ini umumnya disebut sebagai overscan.

Posisikan elemen layar yang harus selalu terlihat oleh pengguna di dalam area aman overscan. Menambahkan margin 5% berukuran 48 dp di tepi kiri dan kanan, serta 27 dp di tepi atas dan bawah ke tata letak akan membantu memastikan bahwa elemen layar pada tata letak berada dalam area aman overscan.

Jangan menyesuaikan elemen layar latar belakang yang tidak langsung berinteraksi dengan pengguna atau memotongnya ke area aman overscan. Pendekatan ini membantu memastikan elemen layar latar belakang terlihat benar di semua layar.

Contoh berikut menunjukkan tata letak root yang dapat berisi elemen latar belakang dan tata letak turunan bertingkat yang memiliki margin 5% dan dapat berisi elemen dalam area aman overscan:

<?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>

Perhatian: Jangan terapkan margin overscan pada tata letak jika Anda menggunakan class AndroidX Leanback, seperti BrowseFragment atau widget terkait, karena tata letak tersebut sudah menyertakan margin yang aman untuk overscan.

Membuat teks dan kontrol yang dapat digunakan

Ikuti tips berikut agar teks dan kontrol di aplikasi TV Anda lebih mudah dilihat dari jarak jauh:

  • Pisahkan teks menjadi potongan kecil yang bisa dipindai dengan cepat oleh pengguna.
  • Gunakan teks terang dengan latar belakang gelap. Gaya ini lebih mudah dibaca di TV.
  • Hindari font yang terlalu tipis atau font dengan goresan yang sangat sempit dan sangat lebar. Gunakan font sans-serif sederhana dan anti-alias untuk meningkatkan keterbacaan.
  • Gunakan ukuran font standar Android:
    <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"/>
    
  • Buat semua widget tampilan Anda cukup besar agar dapat dilihat dengan jelas oleh seseorang yang duduk sejauh 3 meter dari layar. Cara terbaik untuk melakukannya adalah menggunakan ukuran yang relatif terhadap tata letak, bukan ukuran absolut, serta satuan piksel kepadatan mandiri (dp), bukan satuan piksel absolut. Misalnya, untuk menyetel lebar widget, gunakan wrap_content, bukan ukuran piksel, dan untuk menyetel margin widget, gunakan nilai dp, bukan nilai px.

Untuk mengetahui informasi selengkapnya tentang piksel kepadatan mandiri dan membuat tata letak untuk menangani ukuran layar yang lebih besar, lihat Ringkasan kompatibilitas layar.

Mengelola resource tata letak untuk TV

Seperti semua perangkat Android lainnya, TV memiliki ukuran layar yang berbeda dan mendukung resolusi yang berbeda, termasuk, tetapi tidak terbatas pada, 720p, 1080p, dan 4K. Pastikan aplikasi Anda mendukung berbagai ukuran layar.

Ukuran dan resolusi layar yang berbeda memiliki kepadatan piksel yang berbeda pula. Untuk mempertahankan tampilan UI pada berbagai ukuran layar, resolusi, dan kepadatan piksel, tentukan pengukuran UI menggunakan piksel kepadatan mandiri (dp), bukan piksel. Kepadatan piksel layar untuk berbagai resolusi panel TV diuraikan di bawah ini.

Resolusi panel Kepadatan piksel layar
720p tvdpi
1080 xhdpi
4K xxxhdpi
Lihat Mendukung kepadatan piksel yang berbeda-beda untuk mengetahui informasi selengkapnya.

Untuk mengetahui informasi selengkapnya tentang mengoptimalkan tata letak dan resource bagi layar besar, lihat Ringkasan kompatibilitas layar.

Pola tata letak yang harus dihindari

Ada beberapa pendekatan untuk membuat tata letak yang tidak berfungsi dengan baik di perangkat TV. Berikut adalah beberapa pendekatan antarmuka pengguna yang harus dihindari saat mengembangkan tata letak untuk TV.

  • Menggunakan kembali tata letak ponsel atau tablet: jangan gunakan kembali tata letak dari aplikasi ponsel atau tablet tanpa modifikasi. Tata letak yang dibuat untuk faktor bentuk perangkat Android lainnya tidak cocok untuk perangkat TV dan harus disederhanakan agar dapat dioperasikan di TV.
  • Menggunakan ActionBar: meskipun panel tindakan direkomendasikan untuk digunakan di ponsel dan tablet, panel tindakan ini tidak sesuai untuk antarmuka TV. Menggunakan menu opsi panel tindakan, atau menu pull-down apa pun, sangat tidak disarankan untuk aplikasi TV karena kesulitan dalam menavigasi menu tersebut dengan remote control.
  • Menggunakan ViewPager: menggeser antar-layar dapat berfungsi dengan baik di ponsel atau tablet, tetapi jangan mencobanya di TV.

Untuk informasi selengkapnya tentang mendesain tata letak yang sesuai untuk TV, lihat panduan desain TV.

Menangani bitmap besar

Perangkat TV, seperti perangkat Android lainnya, memiliki jumlah memori yang terbatas. Jika Anda membuat tata letak aplikasi dengan gambar beresolusi sangat tinggi atau menggunakan banyak gambar beresolusi tinggi dalam pengoperasian aplikasi, batas memori akan cepat tercapai dan menyebabkan error memori. Untuk sebagian besar kasus, sebaiknya gunakan library Glide untuk mengambil, mendekode, dan menampilkan bitmap dalam aplikasi. Untuk informasi selengkapnya tentang mendapatkan performa terbaik saat menggunakan bitmap, lihat Praktik terbaik grafis Android umum kami.

Menampilkan iklan yang efektif

Untuk lingkungan ruang keluarga, sebaiknya gunakan solusi iklan video berlayar penuh dan dapat ditutup dalam waktu 30 detik. Fungsionalitas untuk iklan di Android TV, seperti tombol tutup dan klik-tayang, harus dapat diakses menggunakan D-pad, bukan sentuhan.

Android TV tidak menyediakan browser web. Iklan Anda tidak boleh mencoba meluncurkan browser web atau mengalihkan ke konten Google Play Store yang tidak disetujui untuk perangkat Android TV.

Catatan: Anda dapat menggunakan class WebView untuk login ke layanan media sosial.