Tata letak di toolkit UI Leanback

Membangun aplikasi dengan lebih baik menggunakan Compose
Membuat UI yang menarik dengan kode minimal menggunakan Jetpack Compose untuk Android TV OS.
Compose untuk TV →

Layar TV biasanya ditonton dari jarak sekitar 3 meter, dan meskipun jauh lebih besar dari kebanyakan layar perangkat berbasis Android lainnya, layar TV tidak menampilkan tingkat detail dan warna sebagai layar perangkat yang lebih kecil. Faktor-faktor ini mengharuskan Anda membuat tata letak aplikasi dengan perangkat TV untuk menciptakan pengalaman pengguna yang berguna dan menyenangkan.

Menggunakan tema tata letak untuk TV

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

Tema leanback

Library androidx.Lean menyertakan Theme.Leanback, tema untuk aktivitas TV yang memberikan gaya visual yang konsisten. Gunakan tema ini untuk aplikasi TV apa pun yang dibuat dengan class Leanback AndroidX. Contoh kode berikut memperlihatkan cara menerapkan tema ini ke aktivitas: 

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

Tema NoTitleBar

Bilah judul adalah elemen antarmuka pengguna standar untuk aplikasi Android di ponsel dan tablet, tetapi tidak sesuai untuk aplikasi TV. Jika Anda tidak menggunakan class AndroidX Leanback, terapkan NoTitleBar ke aktivitas TV Anda untuk menyembunyikan tampilan baris judul. Contoh kode berikut dari manifes aplikasi TV 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 untuk menggunakan AppCompatActivity beserta salah satu tema Theme.AppCompat. Kombinasi ini memungkinkan Anda menggunakan fitur seperti pewarnaan drawable tanpa mengkhawatirkan versi Android yang berjalan di perangkat. Jika Anda mengembangkan aplikasi yang hanya berjalan di Android TV, jangan gunakan AppCompatActivity, karena fitur yang diaktifkan sudah tersedia di Android TV atau tidak relevan.

Jika membangun aplikasi dengan codebase bersama antara perangkat seluler Android dan Android TV, Anda dapat menjalankan menjadi beberapa tantangan karena penerapan tema. AppCompatActivity dan berbagai Widget AppCompat mengharuskan Anda menggunakan Theme.AppCompat, sedangkan Fragmen toolkit UI Leanback yang dapat Anda gunakan FragmentActivity dan Theme.Leanback.

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

Anda dapat menyesuaikan tema Theme.AppCompat.Leanback dengan cara yang sama seperti yang Anda lakukan pada tema lainnya tema. Misalnya, jika Anda ingin mengubah nilai yang spesifik untuk Toolkit UI Leanback OnboardingSupportFragment, 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 untuk perangkat layar besar. Ikuti tips berikut untuk membangun 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.
  • Membuat 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 untuk gambar layar penuh kepada pemirsa. Karena alasan ini, perangkat TV mungkin memotong tepi luar aplikasi untuk memastikan seluruh tampilan terisi. Perilaku ini secara umum disebut sebagai overscan.

Posisikan elemen layar yang harus selalu terlihat oleh pengguna dalam mode overscan-safe area tersebut. Menambahkan margin 5% dari 48 dp di tepi kiri dan kanan serta 27 dp di bagian atas dan bawah tepian ke tata letak membantu memastikan elemen layar dalam tata letak berada dalam kategori yang aman untuk overscan area tersebut.

Jangan sesuaikan elemen layar latar belakang yang tidak berinteraksi langsung dengan pengguna, dan jangan klip elemen ke area aman untuk {i>overscan<i}. Pendekatan ini membantu memastikan bahwa elemen layar latar belakang terlihat benar di semua layar.

Contoh berikut menunjukkan tata letak root yang bisa berisi elemen latar belakang dan lapisan tata letak turunan yang memiliki margin 5% dan dapat berisi elemen dalam area yang aman untuk 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 ke tata letak jika Anda menggunakan Class Leanback AndroidX, seperti BrowseSupportFragment 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 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"/>
  • Membuat semua widget tampilan Anda cukup besar agar terlihat jelas oleh seseorang duduk 3 meter dari layar. Tujuan cara terbaik untuk melakukannya adalah dengan menggunakan ukuran tata letak daripada ukuran absolut, dan satuan piksel kepadatan mandiri (dp), bukan satuan piksel absolut. Misalnya, untuk menyetel lebar widget, gunakan wrap_content, bukan ukuran piksel, serta untuk menyetel untuk widget, gunakan nilai dp, bukan nilai px.

Untuk informasi selengkapnya tentang piksel kepadatan mandiri dan membangun tata letak untuk menangani ukuran layar, lihat Kompatibilitas layar ringkasan.

Mengelola resource tata letak untuk TV

Seperti semua perangkat Android lainnya, TV memiliki berbagai ukuran layar dan mendukung resolusi, 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 Anda di seluruh ukuran layar, resolusi, dan kepadatan piksel, menentukan pengukuran UI menggunakan piksel kepadatan mandiri (dp) bukan piksel. Kepadatan piksel layar untuk berbagai panel TV resolusinya diuraikan di bawah ini.

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

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

Pola tata letak yang harus dihindari

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

  • Menggunakan kembali tata letak ponsel atau tablet: jangan gunakan kembali tata letak dari ponsel atau aplikasi tablet tanpa modifikasi. Tata letak yang dibuat untuk faktor bentuk perangkat Android lain tidak cocok untuk perangkat TV dan harus disederhanakan operasinya di TV.
  • Menggunakan ActionBar: saat panel tindakan direkomendasikan untuk digunakan pada ponsel dan tablet, keduanya tidak sesuai untuk antarmuka TV. Menggunakan menu opsi panel tindakan, atau menu pull-down apa pun, sangat tidak disarankan untuk aplikasi TV kesulitan dalam menavigasi menu seperti itu dengan {i>remote control<i}.
  • Menggunakan ViewPager: menggeser antar-layar dapat berfungsi dengan baik di ponsel atau tablet, tapi 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 terbatas. Jika Anda membangun menggunakan tata letak aplikasi dengan gambar beresolusi sangat tinggi atau menggunakan banyak gambar beresolusi tinggi dalam aplikasi Anda, ia dapat dengan cepat mencapai batas memori dan menyebabkan kesalahan memori. Untuk sebagian besar sebaiknya gunakan tombol Glide untuk mengambil, mendekode, dan menampilkan bitmap dalam aplikasi. Untuk informasi selengkapnya tentang cara mendapatkan performa terbaik saat bekerja dengan bitmap, lihat referensi Praktik terbaik grafis Android.

Menampilkan iklan yang efektif

Untuk lingkungan ruang keluarga, sebaiknya gunakan solusi iklan video dalam mode layar penuh dan dapat ditutup dalam 30 detik. Fungsi untuk beriklan di Android TV, seperti tombol tutup dan klik-tayang, harus dapat diakses menggunakan D-pad daripada 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.

Referensi lainnya

Mendesain untuk TV

Sebelumnya
Praktik terbaik untuk mendorong interaksi di Google TV
Berikutnya
Bermigrasi ke Compose untuk TV