Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Membuat tata letak untuk TV

Layar TV biasanya ditonton dari jarak sekitar 3 meter, dan meskipun lebih besar dari layar perangkat Android pada umumnya, tipe layar ini tidak memiliki tingkat detail dan warna yang tajam seperti perangkat yang lebih kecil. Faktor tersebut mengharuskan Anda untuk membuat tata letak aplikasi yang sesuai dengan perangkat TV guna menciptakan pengalaman pengguna yang berguna dan menyenangkan.

Tutorial ini menjelaskan tentang persyaratan minimum dan detail implementasi untuk membuat tata letak yang efektif dalam aplikasi TV.

Anda juga harus membaca Desain Android TV

Menggunakan tema tata letak untuk TV

Tema Android dapat menyediakan dasar untuk tata letak dalam aplikasi TV Anda. Anda harus menggunakan tema untuk mengubah tampilan aktivitas aplikasi yang ditujukan untuk berjalan di perangkat TV. Bagian ini menjelaskan tema yang harus Anda gunakan.

Tema Leanback

v17 leanback support library menyertakan Theme.Leanback, tema untuk aktivitas TV yang menyediakan gaya visual yang konsisten. Kami sangat merekomendasikan penggunaan tema ini untuk aplikasi TV apa pun yang dibuat dengan kelas v17 leanback. Sampel 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 tidak menggunakan kelas v17 leanback, Anda harus menerapkan tema ini ke aktivitas TV agar bar judul tidak ditampilkan. Contoh kode dari manifes aplikasi TV berikut mendemonstrasikan 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>
    

Membuat tata letak dasar untuk TV

Tata letak untuk perangkat TV harus mengikuti beberapa panduan dasar agar bisa digunakan dan efektif di layar berukuran besar. Ikuti tips ini untuk membuat tata letak lanskap 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, dan gunakan grup tampilan seperti GridView, bukan ListView, untuk memanfaatkan ruang layar horizontal dengan lebih baik.
  • Gunakan grup tampilan seperti RelativeLayout atau LinearLayout untuk mengatur tampilan. Cara ini memungkinkan sistem menyesuaikan posisi tampilan dengan ukuran, perataan, rasio tinggi lebar, 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 dan keinginan untuk selalu menyajikan gambar dalam 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.

Elemen layar yang harus selalu terlihat oleh pengguna harus diposisikan 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 memastikan elemen layar dalam tata letak tersebut berada dalam area aman overscan.

Elemen layar latar belakang yang tidak secara langsung diakses oleh pengguna tidak boleh disesuaikan atau terpotong ke area aman overscan. Pendekatan ini memastikan elemen layar latar belakang akan selalu sesuai pada ukuran layar apa pun.

Contoh berikut menunjukkan tata letak root yang bisa berisi elemen latar belakang, dan tata letak turunan bertumpuk yang memiliki margin 5% dan bisa 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 kelas v17 leanback, seperti BrowseFragment atau widget terkait, karena tata letak tersebut sudah menyertakan margin yang aman untuk overscan.

Membuat teks dan kontrol yang bisa digunakan

Teks dan kontrol dalam tata letak aplikasi TV harus mudah dilihat dan dijelajahi dari jauh. Ikuti tips ini agar elemen antarmuka pengguna 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"/>
        
  • Pastikan semua widget tampilan Anda cukup besar untuk dilihat dengan jelas oleh seseorang yang duduk sejauh 3 meter dari layar (jarak ini lebih baik untuk layar yang sangat besar). Cara terbaik untuk melakukannya adalah menggunakan ukuran yang relatif terhadap tata letak, bukan ukuran mutlak, serta unit piksel kepadatan mandiri (dip), bukan unit piksel mutlak. Misalnya, untuk menyetel lebar widget, gunakan wrap_content, bukan ukuran piksel. Kemudian untuk menyetel margin bagi widget, gunakan nilai dip, bukan nilai px.

Untuk informasi selengkapnya tentang piksel kepadatan mandiri (dip) dan membuat tata letak untuk menangani ukuran layar yang lebih besar, lihat Mendukung beberapa layar.

Mengelola resource tata letak untuk TV

Resolusi layar TV definisi tinggi umumnya adalah 720p, 1080i, dan 1080p. Tata letak TV Anda harus menargetkan ukuran layar 1920 x 1080 piksel, kemudian memungkinkan sistem Android untuk menurunkan skala elemen tata letak menjadi 720p jika perlu. Secara umum, menurunkan skala (menghilangkan piksel) tidak akan mengurangi kualitas penyajian tata letak Anda. Namun, menaikkan skala bisa menimbulkan artefak tampilan yang mengurangi kualitas tata letak dan berdampak buruk bagi pengalaman pengguna aplikasi Anda.

Untuk mendapatkan hasil penskalaan gambar terbaik, sediakan gambar sebagai elemen gambar 9-patch jika memungkinkan. Jika Anda menyediakan gambar berkualitas rendah atau kecil dalam tata letak, gambar akan tampak pecah, kabur, atau berbintik, yang akan menjadi pengalaman buruk bagi pengguna. Sebagai gantinya, gunakan gambar berkualitas tinggi.

Untuk informasi selengkapnya tentang mengoptimalkan tata letak dan resource bagi layar berukuran besar, lihat Mendesain untuk beberapa layar.

Menghindari antipola tata letak

Ada beberapa pendekatan dalam membuat tata letak yang harus Anda hindari karena tidak berfungsi dengan baik di perangkat TV dan mengakibatkan pengalaman pengguna yang buruk. Berikut adalah beberapa pendekatan antarmuka pengguna yang secara khusus tidak boleh Anda gunakan 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.
  • ActionBar - Walaupun disarankan untuk digunakan di ponsel atau tablet, ketentuan antarmuka pengguna ini tidak sesuai untuk antarmuka TV. Secara khusus, penggunaan menu opsi bar tindakan (atau dalam hal ini adalah menu pull-down) sangat tidak disarankan karena akan menyulitkan penjelajahan jenis menu tersebut dengan remote kontrol.
  • ViewPager - Menggeser layar bisa berfungsi sangat 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 operasi aplikasi, batasan memori akan cepat tercapai dan menyebabkan error pada memori. Untuk sebagian besar situasi, sebaiknya Anda menggunakan library Glide guna mengambil, mendekode, dan menampilkan bitmap dalam aplikasi. Untuk informasi selengkapnya tentang mendapatkan kinerja terbaik saat bekerja dengan bitmap, lihat Praktik terbaik grafis Android umum kami.

Menyediakan iklan yang efektif

Untuk lingkungan ruang keluarga, kami menyarankan Anda menggunakan solusi iklan video dalam layar penuh dan bisa ditutup dalam 30 detik. Fungsionalitas untuk iklan di Android TV, seperti tombol tutup dan klik-tayang, harus bisa diakses lebih mudah menggunakan D-pad daripada 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 bisa menggunakan kelas WebView untuk login ke layanan media sosial.