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
GridViewbukanListViewuntuk memanfaatkan ruang layar horizontal dengan lebih baik. - Gunakan kelompok tampilan seperti
RelativeLayoutatauLinearLayoutuntuk 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 |
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.