Secara bersamaan, status bar dan menu navigasi disebut menu sistem. Komponen ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi 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 mereka telah diperhitungkan.
Takeaway
Sertakan kolom sistem dalam desain Anda untuk memperhitungkan zona aman UI, interaksi sistem, metode input, potongan layar, dan kemampuan perangkat lainnya. Tempatkan bilah sistem di lapisan paling atas untuk memastikannya telah diperhitungkan.
Anjuran: Buat kolom sistem menjadi transparan dan atur tata letak aplikasi Anda dalam layar penuh, melanjutkan UI di bawah batang untuk memberikan pengalaman dari tepi ke tepi yang penuh.
Jika Anda tidak dapat menyetel kedua batang menjadi transparan, pastikan warna panel 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 kolom sistem sesuai dengan warna bodi aplikasi Hindari menambahkan gestur ketuk atau tarik target di bagian inset gestur; hal ini bertentangan dengan navigasi tepi-ke-tepi dan gestur.
Gambar 3: Inset gestur sistem. Hindari menempatkan target ketuk di bawah area ini
Gambar konten Anda di belakang kolom sistem
Fitur layar penuh memungkinkan Android menggambar UI di bawah kolom sistem untuk pengalaman yang lebih imersif. Sebaiknya gunakan layar dari tepi ke tepi karena membuat menu navigasi transparan adalah permintaan 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 diisi 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, status bar berisi ikon notifikasi dan ikon sistem. Pengguna berinteraksi dengan status bar dengan menariknya ke bawah untuk mengakses menu notifikasi.
Status bar dapat muncul secara berbeda bergantung pada konteks, waktu, preferensi atau tema kumpulan pengguna, dan parameter lainnya. Anda juga dapat menyetel 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 pada latar belakang status bar sebagai bagian dari tema aplikasi Anda, dengan warna atau gaya kustom, beserta setelan transparansi dan opasitas.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Jika menyetel warna latar belakang secara manual, Anda dapat menata gaya konten status bar menjadi terang atau gelap untuk kontras optimal.
Potongan tampilan dan status bar
Potongan layar adalah area di beberapa perangkat yang diperluas ke permukaan tampilan untuk menyediakan ruang bagi sensor hadap depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi tergantung pada produsennya.
Baca cara mendukung potongan layar.
Menu navigasi
Android memungkinkan pengguna mengontrol navigasi menggunakan kontrol kembali, beranda, dan ringkasan:
- Kembali akan mengembalikan langsung ke tampilan sebelumnya.
- Transisi beranda keluar dari aplikasi dan 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 handle 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 tata letak layar penuh.
- Hindari menambahkan interaksi atau target sentuh pada 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 mungkin tersedia bagi pengguna Anda. Navigasi dua tombol, misalnya, menyediakan dua tombol untuk layar utama 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, handle 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 sesuai terhadap keyboard virtual untuk
memungkinkan pengguna melakukan tindakan seperti menutup atau bahkan mengubah
jenis keyboard. Untuk memastikan transisi keyboard yang lancar, Untuk memastikan transisi yang lancar
yang menyinkronkan transisi aplikasi dengan keyboard yang bergeser
ke atas dan ke bawah dari bagian bawah layar, gunakan
WindowInsetsAnimationCompat.
Mode imersif
Anda dapat menyembunyikan kolom sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna tetap dapat mengetuk untuk menampilkan kolom sistem dan UI agar dapat membuka atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan kolom sistem untuk mode imersif.