Bersama-sama, status bar dan menu navigasi disebut kolom sistem. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan pemberitahuan notifikasi, dan menyediakan interaksi perangkat langsung dari mana saja.
Anda harus memperhatikan keterlihatan bilah sistem, mendesain UI untuk interaksi dengan OS Android, metode {i>input<i}, atau kemampuan perangkat. Tempatkan bilah sistem di bagian atas sebagian besar lapisan untuk memastikan mereka diperhitungkan.
Poin-poin penting
Sertakan bilah sistem dalam desain Anda untuk memperhitungkan zona aman UI, sistem interaksi, metode input, potongan layar, dan kemampuan perangkat lainnya. Tempatkan bilah sistem di lapisan paling atas untuk memastikannya diperhitungkan.
Lakukan: Buat kolom sistem transparan dan tata letak aplikasi Anda dalam layar penuh, melanjutkan UI di bawah menu untuk memberikan pengalaman dari tepi ke tepi sepenuhnya.
Jika Anda tidak dapat menetapkan kedua batang menjadi transparan, pastikan warna batang sesuai dengan warna bodi aplikasi Anda. Misalnya, cocokkan bagian bawah warna menu navigasi dengan warna panel gestur, dan status bar bagian atas warna dengan warna {i>body<i}.
Gambar 2: Pastikan warna panel sistem sesuai dengan warna isi aplikasi Anda Hindari menambahkan gestur ketuk atau target tarik di bawah inset gestur; berikut bertentangan dengan navigasi {i>edge-to-edge<i} dan {i>gesture<i}.
Gambar 3: Inset gestur sistem. Hindari melakukan ketukan target di bawah area ini
Menggambar konten Anda di belakang kolom sistem
Fitur tepi-ke-tepi memungkinkan Android menggambar UI di bawah bilah sistem untuk pengalaman yang lebih imersif. Sebaiknya gunakan tata letak layar penuh karena menu navigasi transparan adalah permintaan umum dari pengguna. (Baca tentang cara mendukung layar penuh).
Aplikasi dapat mengatasi tumpang-tindih dalam konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda yang perlu ditambahkan untuk menghindari tumpang-tindih dengan dari UI Android OS seperti bilah navigasi atau bilah status, atau dengan fitur perangkat fisik seperti potongan layar.
Perhatikan jenis inset berikut saat mendesain untuk penggunaan tata letak layar penuh kasus:
- Inset kolom sistem berlaku untuk UI yang dapat diketuk dan yang seharusnya tidak terhalang secara visual oleh bilah sistem.
- Inset gestur sistem berlaku untuk area navigasi gestur yang digunakan oleh sistem yang diprioritaskan daripada aplikasi Anda.
Status bar
Di Android, status bar berisi ikon notifikasi dan ikon sistem. Tujuan pengguna berinteraksi dengan bilah status dengan menariknya ke bawah untuk mengakses notifikasi bayangan.
{i>Status bar<i} dapat muncul secara berbeda tergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda juga dapat menyetel gaya status bar, seperti dalam contoh berikut.
Pastikan konten aplikasi Anda kini memenuhi seluruh layar dengan tata letak layar penuh tidak diperlukan. Gunakan kolom sistem transparan dengan konten dari tepi ke tepi, seperti yang ditunjukkan pada contoh berikut.
Saat notifikasi masuk, ikon biasanya muncul di status bar. Ini memberi sinyal kepada pengguna bahwa ada sesuatu yang bisa dilihat di panel samping notifikasi. Ikon ini dapat menjadi ikon atau simbol aplikasi untuk mewakili channel. Lihat Desain notifikasi.
Menetapkan gaya status bar
Sesuaikan gaya latar belakang status bar sebagai bagian dari tema aplikasi Anda, dengan warna kustom atau gaya, beserta setelan transparansi dan opasitas.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Jika Anda menetapkan warna latar belakang secara manual, Anda dapat memilih untuk menata gaya status konten sebagai terang atau gelap untuk kontras yang optimal.
Menampilkan potongan dan status bar
Potongan layar adalah area di beberapa perangkat yang memanjang ke layar guna menyediakan ruang bagi sensor yang menghadap ke depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi bergantung pada produsennya.
Baca cara mendukung potongan layar.
Menu navigasi
Android memungkinkan pengguna mengontrol navigasi menggunakan kontrol kembali, layar utama, dan ringkasan:
- Kembali akan langsung kembali ke tampilan sebelumnya.
- Transisi layar utama keluar dari aplikasi dan ke layar utama perangkat.
- Ringkasan menunjukkan aplikasi terbuka dan baru saja dibuka.
Pengguna dapat memilih dari berbagai konfigurasi menu navigasi, termasuk gestur navigasi (disarankan) dan navigasi tiga tombol.
Navigasi gestur
Diperkenalkan di Android 10 (API level 29), navigasi gestur direkomendasikan jenis navigasi yang berbeda, meskipun Anda tidak dapat mengganti preferensi pengguna. Gestur navigasi tidak menggunakan tombol kembali, beranda, dan ikhtisar, melainkan menampilkan {i>gesture <i}tunggal untuk {i>affordance<i}. Pengguna berinteraksi dengan menggeser dari kiri atau tepi kanan layar untuk kembali, maju, dan ke atas dari bawah untuk rumah. Menggeser ke atas dan menahan akan membuka ringkasan.
Navigasi {i>gesture <i}adalah pola navigasi yang lebih terukur untuk mendesain di seluruh seluler dan layar yang lebih besar. Untuk memberikan pengalaman pengguna terbaik, perhitungkan navigasi gestur dengan:
- Mendukung konten tata letak layar penuh.
- Hindari menambahkan interaksi atau target sentuh di bagian inset navigasi gestur.
Baca tentang menerapkan navigasi gestur.
Navigasi tiga tombol
Navigasi tiga tombol menyediakan tiga tombol untuk kembali, beranda, dan ikhtisar.
Variasi menu navigasi lainnya
Bergantung pada versi Android dan perangkat, konfigurasi menu navigasi lainnya tersedia untuk pengguna Anda. Navigasi dua tombol, misalnya, menyediakan dua untuk beranda dan kembali.
Menetapkan gaya navigasi
Contoh berikut menunjukkan cara menerapkan gaya navigasi.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android menangani semua perlindungan visual antarmuka pengguna dalam gestur mode navigasi atau dalam mode tombol.
Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, di di mana isi bilah sistem berubah warna berdasarkan konten di belakangnya. Pada contoh berikut, tuas di menu navigasi berubah menjadi warna gelap jika ditempatkan di atas konten terang, dan sebaliknya.
Gambar 13: Adaptasi warna dinamis Mode tombol: Sistem menerapkan scrim transparan di belakang sistem batang (untuk level API 29 atau yang lebih tinggi) atau kolom sistem transparan (untuk level API 28 atau lebih rendah).
Gambar 14: Adaptasi warna dinamis, dengan kolom sistem mengubah warna berdasarkan konten di belakangnya
Keyboard dan navigasi
Setiap jenis navigasi bereaksi dengan tepat terhadap keyboard virtual untuk
memungkinkan pengguna untuk melakukan tindakan seperti menutup atau bahkan mengubah
jenis keyboard. Untuk memastikan transisi keyboard yang mulus, untuk memastikan
transisi yang menyinkronkan transisi aplikasi dengan tombol geser keyboard
ke atas dan ke bawah dari bagian
bawah layar, gunakan
WindowInsetsAnimationCompat
Mode imersif
Anda dapat menyembunyikan kolom sistem saat Anda memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna harus tetap bisa mengetuk menampilkan bilah sistem dan UI untuk menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan kolom sistem untuk mode imersif.