Layar TV biasanya ditonton dari jarak sekitar 3 meter, dan meskipun lebih besar dari layar perangkat berteknologi Android pada umumnya, layar TV tidak memiliki tingkat detail dan warna yang sama seperti layar perangkat yang lebih kecil. Faktor tersebut mengharuskan Anda membuat tata letak aplikasi yang sesuai dengan perangkat TV guna menciptakan pengalaman pengguna yang berguna dan menyenangkan.
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 yang ditujukan untuk berjalan di perangkat TV. Bagian ini menjelaskan tema yang harus digunakan.
Tema leanback
Library androidx.leanback yang tidak digunakan lagi mencakup Theme.Leanback,
tema untuk aktivitas TV yang menyediakan gaya visual yang konsisten untuk aplikasi toolkit UI Leanback. 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
Baris 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 agar bar judul tidak ditampilkan. 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 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 Anda membangun aplikasi dengan codebase bersama antara perangkat seluler Android dan Android TV, Anda mungkin menghadapi beberapa tantangan karena penerapan tema. AppCompatActivity dan berbagai
widget AppCompat mengharuskan Anda menggunakan Theme.AppCompat, sementara
fragmen toolkit UI Leanback mengharapkan 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 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 tema lainnya. Misalnya, jika Anda ingin mengubah nilai yang khusus untuk
toolkit UI Leanback
OnboardingSupportFragment,
lakukan sesuatu yang serupa 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 memastikan tata letak tersebut 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 layar di sisi kiri atau kanan layar dan sisakan ruang vertikal untuk konten.
- Buat UI yang dibagi menjadi beberapa bagian menggunakan fragmen. Gunakan kelompok tampilan seperti
GridViewbukanListViewagar dapat menggunakan ruang layar horizontal dengan lebih baik. - Gunakan kelompok tampilan seperti
RelativeLayoutatauLinearLayoutuntuk mengatur tampilan. Cara 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 standar TV yang terus berkembang untuk menyajikan gambar layar penuh kepada penonton. Karena alasan ini, perangkat TV mungkin memangkas tepi luar tata letak aplikasi untuk memastikan seluruh layarnya terisi. Perilaku ini umumnya disebut sebagai overscan.
Posisikan elemen layar yang harus selalu terlihat oleh pengguna dalam area aman overscan. Menambahkan 5% margin dari 48 dp di tepi kiri dan kanan serta 27 dp di tepi atas dan bawah ke tata letak dapat membantu memastikan elemen layar dalam tata letak tersebut berada dalam area aman overscan.
Jangan sesuaikan elemen layar latar belakang yang tidak secara langsung diakses oleh pengguna, dan jangan potong elemen 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 Leanback AndroidX, seperti
BrowseSupportFragment
atau widget terkait, karena tata letak tersebut sudah menyertakan margin yang aman untuk overscan.
Membangun 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 untuk 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 mutlak, serta unit piksel kepadatan mandiri (dp), bukan unit piksel mutlak. 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 (dip) 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. Untuk mempertahankan tampilan UI Anda di 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.
| Resolusi panel | Kepadatan piksel layar |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Untuk mengetahui informasi selengkapnya tentang mengoptimalkan tata letak dan resource bagi layar berukuran besar, lihat Ringkasan kompatibilitas layar.
Pola tata letak yang harus dihindari
Ada beberapa pendekatan dalam 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 adanya perubahan. Tata letak yang dibuat untuk faktor bentuk perangkat Android lainnya tidak cocok untuk perangkat TV dan harus disederhanakan agar bisa berjalan di TV.
- Menggunakan
ActionBar: meskipun disarankan untuk digunakan di ponsel dan tablet, kolom tindakan tidak sesuai untuk antarmuka TV. Penggunaan menu opsi panel tindakan, atau menu pull-down apa pun, sangat tidak disarankan untuk aplikasi TV karena akan menyulitkan penjelajahan jenis menu tersebut dengan remote control. - Menggunakan
ViewPager: menggeser layar dapat berfungsi sangat baik di ponsel atau tablet, tetapi jangan mencobanya di TV.
Untuk mengetahui 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 operasi aplikasi, batasan memori akan cepat tercapai dan menyebabkan error pada memori. Untuk sebagian besar kasus, sebaiknya gunakan library Glide untuk mengambil, mendekode, dan menampilkan bitmap dalam aplikasi Anda. 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 dalam layar penuh dan bisa ditutup dalam 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 Anda tidak boleh berupaya 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.