Layar TV biasanya dilihat dari jarak sekitar 3 meter, dan meskipun jauh lebih besar daripada layar perangkat Android lainnya, layar TV tidak memberikan tingkat detail dan warna yang sama seperti layar perangkat yang lebih kecil. Faktor-faktor tersebut mengharuskan Anda membuat tata letak aplikasi dengan mempertimbangkan perangkat TV untuk menciptakan pengalaman pengguna yang bermanfaat dan menyenangkan.
Menggunakan tema tata letak untuk TV
Tema Android dapat menyediakan dasar untuk tata letak di 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.Lean menyertakan Theme.Leanback, sebuah tema untuk aktivitas TV yang
menyediakan gaya visual yang konsisten. 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
Kolom 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
tema NoTitleBar ke aktivitas TV Anda untuk menyembunyikan tampilan baris judul. 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 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 diaktifkannya sudah tersedia di
Android TV atau tidak relevan.
Jika membangun aplikasi dengan codebase bersama antara perangkat seluler Android dan Android TV, Anda dapat mengalami
beberapa tantangan karena temanya. AppCompatActivity dan berbagai widget AppCompat mengharuskan Anda menggunakan Theme.AppCompat, sedangkan fragmen toolkit UI Leanback mengharapkan Anda untuk menggunakan FragmentActivity dan Theme.Leanback.
Jika Anda perlu menggunakan aktivitas dasar yang sama untuk perangkat seluler Android dan Android TV, atau jika ingin menggunakan
tampilan kustom berdasarkan widget AppCompat seperti
AppCompatImageView,
gunakan tema Theme.AppCompat.Leanback. Tema ini memberi Anda semua tema 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. Misalnya, jika Anda ingin mengubah nilai yang spesifik untuk OnboardingSupportFragment toolkit UI Leanback, lakukan sesuatu seperti berikut:
<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 guna membantu memastikannya dapat digunakan dan efektif di 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.
- Tempatkan kontrol navigasi layar di sisi kiri atau kanan layar dan hemat ruang vertikal untuk konten.
- Membuat UI yang dibagi menjadi beberapa bagian menggunakan fragmen. Gunakan kelompok tampilan seperti
GridView, bukanListView, untuk 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 TV memiliki beberapa persyaratan unik karena evolusi standar TV untuk menyajikan gambar layar penuh kepada penonton. Karena alasan ini, perangkat TV mungkin memotong tepi luar tata letak aplikasi untuk memastikan seluruh tampilan terisi. Perilaku ini umumnya disebut sebagai overscan.
Posisikan elemen layar yang harus selalu terlihat oleh pengguna di dalam area aman untuk overscan. Menambahkan margin 5% sebesar 48 dp di tepi kiri dan kanan serta 27 dp di tepi atas dan bawah ke tata letak akan membantu memastikan elemen layar dalam tata letak berada dalam area yang aman untuk overscan.
Jangan menyesuaikan elemen layar latar belakang yang tidak berinteraksi secara langsung dengan pengguna, dan jangan klip elemen tersebut ke area yang aman untuk overscan. 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 tata letak turunan bertingkat 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 pada 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"/> - Jadikan semua widget tampilan Anda cukup besar agar terlihat 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. Selain itu, untuk menyetel margin widget, gunakan nilai dp, bukan nilai px.
Untuk 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 berbagai 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 di berbagai ukuran, resolusi, dan kepadatan piksel layar, 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 |
Untuk mengetahui informasi selengkapnya tentang cara mengoptimalkan tata letak dan resource untuk perangkat 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 digunakan di TV.
- Menggunakan
ActionBar: meskipun panel tindakan direkomendasikan untuk digunakan di ponsel dan tablet, panel tindakan 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 seperti ini 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 terbatas. Jika Anda membuat tata letak aplikasi dengan gambar beresolusi sangat tinggi atau menggunakan banyak gambar beresolusi tinggi dalam pengoperasian aplikasi, aplikasi dapat segera mencapai batas memori dan menyebabkan error kehabisan memori. Untuk sebagian besar kasus, sebaiknya gunakan library Glide untuk mengambil, mendekode, dan menampilkan bitmap dalam aplikasi. Untuk mengetahui informasi selengkapnya tentang mendapatkan performa terbaik saat bekerja dengan bitmap, lihat Praktik terbaik grafis Android umum kami.
Menampilkan iklan yang efektif
Untuk lingkungan ruang keluarga, sebaiknya gunakan solusi iklan video layar penuh dan dapat ditutup dalam waktu 30 detik. Fungsi 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 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.