Secara keseluruhan, status bar dan menu navigasi disebut system bar. Komponen ini menampilkan informasi penting seperti level baterai, waktu, dan pemberitahuan notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja.
Sangat penting untuk mempertimbangkan keterlihatan kolom sistem, baik Anda mendesain UI untuk interaksi dengan Android OS, metode input, maupun kemampuan perangkat lainnya. Tempatkan kolom sistem di bagian atas sebagian besar lapisan untuk memastikan lapisan tersebut telah diperhitungkan.
Takeaway
Menyertakan kolom sistem dalam desain Anda untuk memperhitungkan zona aman UI, interaksi sistem, metode input, potongan layar, dan kemampuan perangkat lainnya. Tempatkan kolom sistem di lapisan paling atas untuk memastikannya diperhitungkan.
Anjuran: Buat kolom sistem menjadi transparan dan tata letak aplikasi Anda dalam layar penuh, melanjutkan UI di bawah panel untuk memberikan pengalaman dari tepi ke tepi yang penuh.
Jika Anda tidak dapat menyetel kedua batang menjadi transparan, pastikan warna batang cocok dengan warna isi aplikasi Anda. Misalnya, cocokkan warna menu navigasi bawah dengan warna panel gestur, dan warna status bar atas dengan warna isi.
Gambar 2: Pastikan warna panel sistem cocok dengan warna isi aplikasi Hindari menambahkan gestur ketuk atau target tarik di bagian inset gestur; hal ini bertentangan dengan navigasi layar dan gestur.
Gambar 3: Inset gestur sistem. Hindari menempatkan target ketuk di bawah area ini
Menggambar konten Anda di belakang kolom sistem
Fitur tepi-ke-tepi memungkinkan Android menggambar UI di bawah kolom sistem untuk pengalaman yang lebih imersif. Sebaiknya gunakan dari tepi ke tepi karena membuat menu navigasi transparan adalah permintaan yang umum dari pengguna. (Baca cara mendukung tepi ke tepi).
Aplikasi dapat mengatasi tumpang-tindih dalam konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda yang perlu ditambahkan agar tidak tumpang-tindih dengan bagian UI Android OS seperti menu navigasi atau status bar, atau dengan fitur perangkat fisik seperti potongan layar.
Perhatikan jenis inset berikut saat mendesain untuk kasus penggunaan tepi ke tepi:
- Inset kolom sistem berlaku untuk UI yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.
- Inset gestur sistem berlaku untuk area navigasi gestur yang digunakan oleh sistem yang lebih diprioritaskan daripada aplikasi Anda.
Status bar
Di Android, bilah status berisi ikon notifikasi dan ikon sistem. Pengguna berinteraksi dengan status bar dengan menariknya ke bawah untuk mengakses menu notifikasi.
Status bar dapat muncul berbeda bergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda juga dapat menetapkan gaya status bar, seperti pada contoh berikut.
Saat notifikasi masuk, ikon biasanya muncul di bilah status. Ini memberi tahu pengguna bahwa ada sesuatu yang dapat dilihat di panel samping notifikasi. Ini bisa berupa ikon atau simbol aplikasi Anda untuk mewakili saluran. Lihat Desain notifikasi.
Menetapkan gaya status bar
Beri gaya latar belakang status bar sebagai bagian dari tema aplikasi Anda, dengan warna atau gaya kustom, serta setelan transparansi dan opasitas.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Jika menetapkan warna latar belakang secara manual, Anda juga dapat menata gaya konten status bar menjadi terang atau gelap untuk kontras optimal.
Potongan layar dan status bar
Potongan layar adalah area di beberapa perangkat yang diperluas ke permukaan layar untuk menyediakan ruang bagi sensor yang menghadap ke depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi tergantung produsennya.
Baca cara mendukung potongan layar.
Menu navigasi
Android memungkinkan pengguna mengontrol navigasi menggunakan kontrol kembali, beranda, dan ringkasan:
- Kembali akan langsung mengembalikan ke tampilan sebelumnya.
- Transisi layar utama keluar dari aplikasi ke layar utama perangkat.
- Ringkasan menampilkan aplikasi terbuka dan baru saja dibuka.
Pengguna dapat memilih dari berbagai konfigurasi menu navigasi, termasuk navigasi gestur (direkomendasikan) dan navigasi tiga tombol.
Navigasi gestur
Diperkenalkan di Android 10 (API level 29), navigasi gestur adalah jenis navigasi yang direkomendasikan, meskipun Anda tidak dapat mengganti preferensi pengguna. Navigasi gestur tidak menggunakan tombol untuk kembali, layar utama, dan ringkasan, melainkan menampilkan satu tuas gestur untuk kemampuan. Pengguna berinteraksi dengan menggeser dari tepi kiri atau kanan layar untuk kembali dan maju, serta ke atas dari bawah untuk membuka layar utama. Menggeser ke atas dan menahan akan membuka ringkasan.
Navigasi gestur adalah pola navigasi yang lebih skalabel untuk mendesain di perangkat seluler dan layar yang lebih besar. Untuk memberikan pengalaman pengguna terbaik, pertimbangkan navigasi gestur dengan:
- Mendukung konten dari tepi ke tepi.
- Hindari menambahkan interaksi atau target sentuh di bawah inset navigasi gestur.
Baca cara menerapkan navigasi gestur.
Navigasi tiga tombol
Navigasi tiga tombol menyediakan tiga tombol untuk kembali, beranda, dan ringkasan.
Variasi menu navigasi lainnya
Bergantung pada versi Android dan perangkat, konfigurasi menu navigasi lainnya mungkin tersedia bagi pengguna Anda. Navigasi dua tombol, misalnya, menyediakan dua tombol 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 mode navigasi gestur atau dalam mode tombol.
Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, dengan konten kolom 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 15: Adaptasi warna dinamis Mode tombol: Sistem menerapkan scrim transparan di belakang kolom sistem (untuk API level 29 atau yang lebih tinggi) atau kolom sistem transparan (untuk API level 28 atau yang lebih rendah).
Gambar 16: Adaptasi warna dinamis, dengan kolom sistem berubah warna berdasarkan konten di belakangnya
Keyboard dan navigasi
Setiap jenis navigasi bereaksi dengan tepat terhadap keyboard virtual untuk
memungkinkan pengguna melakukan tindakan seperti menutup atau bahkan mengubah
jenis keyboard. Untuk memastikan transisi keyboard yang lancar, gunakan
WindowInsetsAnimationCompat untuk memastikan transisi yang lancar
yang menyinkronkan transisi aplikasi dengan keyboard yang bergeser
ke atas dan ke bawah dari bagian bawah layar.
Mode imersif
Anda dapat menyembunyikan kolom sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna masih dapat mengetuk untuk menampilkan kolom sistem dan UI untuk membuka atau berinteraksi dengan kontrol sistem. Pelajari cara mendesain untuk mode layar penuh lebih lanjut, atau baca cara menyembunyikan kolom sistem untuk mode imersif.