Bersama-sama, status bar dan menu navigasi disebut kolom sistem. Fitur ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja.
Sangat penting untuk memperhatikan 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 memastikannya 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 diperhitungkan.
Lakukan: Buat kolom sistem transparan dan tata letak aplikasi Anda dalam layar penuh, dengan melanjutkan UI di bawah kolom untuk memberikan pengalaman dari tepi ke tepi sepenuhnya.
Jika Anda tidak dapat menetapkan kedua batang ini menjadi transparan, pastikan warna batang cocok dengan warna isi aplikasi Anda. Misalnya, cocokkan warna menu navigasi bawah dengan warna panel gestur, dan warna panel status atas dengan warna isi.
Gambar 2: Pastikan warna kolom sistem sesuai dengan warna isi aplikasi Anda Hindari menambahkan gestur ketuk atau target tarik di bawah inset gestur; hal ini bertentangan dengan navigasi tata letak layar ke tepi dan gestur.
Gambar 3: Inset gestur sistem. Hindari menempatkan target ketuk di bawah area ini
Menggambar konten Anda di belakang kolom sistem
Fitur tata letak layar penuh memungkinkan Android menggambar UI di bawah kolom sistem untuk pengalaman yang lebih imersif. Sebaiknya gunakan layar penuh karena membuat menu navigasi transparan merupakan permintaan umum dari pengguna. (Baca cara mendukung edge-to-edge).
Aplikasi dapat mengatasi tumpang-tindih dalam konten dengan bereaksi terhadap inset. Inset menjelaskan berapa banyak konten aplikasi yang perlu ditambahkan untuk menghindari 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 edge-to-edge:
- Inset kolom sistem berlaku untuk UI yang dapat diketuk dan tidak boleh terkabur 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 yang ditetapkan pengguna, dan parameter lainnya. Anda juga dapat menyetel gaya status bar, seperti pada contoh berikut.
Pastikan konten aplikasi Anda memenuhi seluruh layar karena tata letak layar penuh diperlukan. Gunakan kolom sistem transparan dengan konten tata letak layar penuh, seperti yang ditunjukkan pada contoh berikut.
Saat notifikasi masuk, ikon biasanya muncul di status bar. Tindakan ini memberi tahu 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
Tata gaya 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 sebagai terang atau gelap untuk mendapatkan kontras yang optimal.
Menampilkan potongan dan status bar
Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar untuk 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 navigasi gestur (direkomendasikan) dan navigasi tiga tombol.
Navigasi gestur
Diperkenalkan di Android 10 (level API 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, maju, dan 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, 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 mungkin tersedia untuk pengguna Anda. Misalnya, navigasi dua tombol 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. Dalam contoh berikut, handle di menu navigasi akan 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 kolom sistem (untuk level API 29 atau yang lebih tinggi) atau kolom sistem transparan (untuk level API 28 atau yang lebih rendah).
Gambar 14: Adaptasi warna dinamis, dengan kolom sistem berubah warna berdasarkan konten di belakangnya
Keyboard dan navigasi
Setiap jenis navigasi bereaksi dengan baik 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 menggeser
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 harus tetap dapat mengetuk untuk menampilkan kolom sistem dan UI agar dapat menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan kolom sistem untuk mode imersif.