Membuat navigasi TV

Perangkat TV menyediakan serangkaian kontrol navigasi yang terbatas untuk aplikasi. Membuat skema navigasi yang efektif untuk aplikasi TV bergantung pada pemahaman tentang kontrol yang terbatas ini dan batas persepsi pengguna saat mengoperasikan aplikasi Anda. Ketika membuat aplikasi Android untuk TV, perhatikan dengan cermat bagaimana sebenarnya pengguna melakukan navigasi dalam aplikasi saat menggunakan tombol remote kontrol, bukan layar sentuh.

Tutorial ini menjelaskan persyaratan minimum untuk membuat skema navigasi aplikasi TV yang efektif dan cara menerapkannya pada aplikasi Anda.

Mengaktifkan navigasi D-pad

Di perangkat TV, pengguna melakukan navigasi dengan kontrol yang ada di perangkat remote kontrol, baik menggunakan tombol arah (D-Pad) maupun tombol panah. Tipe kontrol seperti ini membatasi gerakan ke atas, bawah, kiri, dan kanan. Untuk membuat aplikasi terbaik yang dioptimalkan bagi TV, Anda harus menyediakan skema navigasi yang mudah dipelajari oleh pengguna menggunakan kontrol yang terbatas ini.

Framework Android menangani navigasi direksional antara elemen tata letak secara otomatis sehingga Anda tidak perlu melakukan tindakan tambahan untuk aplikasi. Namun, Anda harus menguji navigasi secara menyeluruh dengan pengontrol D-pad untuk menemukan masalah navigasi. Ikuti panduan ini untuk menguji apakah sistem navigasi aplikasi Anda berfungsi baik dengan D-pad di perangkat TV:

  • Pastikan pengguna bisa menjelajahi semua kontrol yang terlihat di layar dengan pengontrol D-pad.
  • Untuk men-scroll daftar dengan fokus, pastikan tombol atas dan bawah D-pad men-scroll daftar, dan tombol Enter memilih item dalam daftar. Pastikan pengguna bisa memilih elemen dalam daftar dan daftar tersebut masih bisa di-scroll saat elemen dipilih.
  • Pastikan peralihan antarkontrol tidak rumit dan bisa diprediksi.

Mengubah navigasi direksional

Framework Android secara otomatis menerapkan skema navigasi direksional berdasarkan posisi relatif elemen yang bisa difokuskan dalam tata letak. Anda harus menguji skema navigasi yang dihasilkan dalam aplikasi menggunakan pengontrol D-pad. Setelah mengujinya, jika ingin agar pengguna bisa berpindah dalam tata letak dengan cara khusus, Anda bisa menetapkan navigasi direksional eksplisit untuk kontrol Anda.

Catatan: Hanya gunakan atribut ini untuk mengubah urutan navigasi jika urutan default yang diterapkan sistem tidak berfungsi dengan baik.

Sampel kode berikut ini menunjukkan cara menentukan kontrol berikutnya untuk menerima fokus bagi objek tata letak TextView :

    <TextView android:id="@+id/Category1"
            android:nextFocusDown="@+id/Category2"\>
    

Tabel berikut ini mencantumkan semua atribut navigasi yang tersedia untuk widget antarmuka pengguna Android:

Atribut Fungsi
nextFocusDown Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke bawah.
nextFocusLeft Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke kiri.
nextFocusRight Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke kanan.
nextFocusUp Menentukan tampilan berikutnya yang akan menerima fokus ketika pengguna mengarahkan ke atas.

Untuk menggunakan salah satu atribut navigasi eksplisit ini, atur nilai pada ID (nilai android:id) widget lain dalam tata letak. Anda harus menetapkan urutan navigasi sebagai loop agar kontrol yang paling akhir mengarahkan fokus kembali ke yang pertama.

Menyediakan fokus dan pemilihan yang jelas

Keberhasilan skema navigasi aplikasi di perangkat TV bergantung pada seberapa mudah pengguna bisa menentukan elemen antarmuka pengguna yang sedang difokuskan di layar. Jika Anda tidak menyediakan petunjuk yang jelas tentang item yang difokuskan (dan item apa yang bisa ditindaklanjuti oleh pengguna), pengguna akan merasa kesulitan lalu segera menutup aplikasi Anda. Untuk alasan yang sama, penting untuk selalu memiliki item dalam fokus yang bisa langsung ditindaklanjuti pengguna setelah aplikasi dimulai, atau kapan pun aplikasi sedang tidak digunakan.

Implementasi dan tata letak aplikasi harus menggunakan warna, ukuran, animasi, atau kombinasi dari semua atribut ini untuk memudahkan pengguna menentukan tindakan apa yang bisa mereka ambil berikutnya. Gunakan skema seragam untuk menunjukkan fokus dalam aplikasi Anda.

Android menyediakan Resource daftar status yang dapat digambar untuk mengimplementasikan sorotan bagi kontrol yang difokuskan dan dipilih. Contoh kode berikut ini mendemonstrasikan cara mengaktifkan perilaku visual bagi sebuah tombol untuk menunjukkan bahwa pengguna telah menjelajah ke kontrol kemudian memilihnya:

    <!-- res/drawable/button.xml -->
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true"
              android:drawable="@drawable/button_pressed" /> <!-- pressed -->
        <item android:state_focused="true"
              android:drawable="@drawable/button_focused" /> <!-- focused -->
        <item android:state_hovered="true"
              android:drawable="@drawable/button_focused" /> <!-- hovered -->
        <item android:drawable="@drawable/button_normal" /> <!-- default -->
    </selector>
    

Kode sampel XML tata letak berikut menerapkan daftar status sebelumnya yang dapat digambar ke Button:

    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:background="@drawable/button" />
    

Pastikan untuk menyediakan padding yang mencukupi dalam kontrol yang bisa difokuskan dan bisa dipilih agar sorotan di sekelilingnya terlihat jelas.

Untuk rekomendasi selengkapnya tentang mendesain pemilihan dan fokus yang efektif bagi aplikasi TV Anda, lihat Pola untuk TV.