Status bar, kolom teks, dan menu navigasi secara bersama-sama disebut kolom sistem. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi, serta memberikan interaksi perangkat langsung dari mana saja.
Penting untuk mempertimbangkan keterlihatan panel sistem, baik Anda mendesain UI untuk interaksi dengan Android OS, metode input, atau kemampuan perangkat lainnya.
Poin-poin penting
Sertakan panel sistem saat mendesain aplikasi Anda. Pertimbangkan zona aman UI, interaksi sistem, metode input, potongan tampilan, status bar, panel teks, menu navigasi, dan kemampuan perangkat lainnya.
Pastikan status sistem dan menu navigasi tetap transparan atau buram dan gambar konten di belakang kolom ini agar dapat digunakan dari tepi ke tepi.
Status bar
Di Android, status bar berisi ikon notifikasi dan ikon sistem. Pengguna berinteraksi dengan status bar dengan menariknya ke bawah untuk mengakses panel notifikasi. Gaya status bar dapat berupa transparan atau buram.
Ikon status bar
Ikon status bar dapat muncul secara berbeda bergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Untuk mengetahui informasi selengkapnya, lihat Ikon panel sistem.
Saat notifikasi masuk, ikon biasanya muncul di status bar. Tindakan ini memberi sinyal kepada pengguna bahwa ada sesuatu yang harus dilihat di panel samping notifikasi. Ini dapat berupa ikon atau simbol aplikasi Anda untuk mewakili channel. Lihat Desain notifikasi.
Menetapkan gaya status bar
Buat status bar transparan atau buram untuk memastikan konten aplikasi Anda mencakup seluruh layar. Kemudian, tetapkan gaya ikon panel sistem agar ikon memiliki kontras yang tepat.
Layar penuh diterapkan di Android 15 sehingga status bar menjadi transparan
secara default. Panggil enableEdgeToEdge() untuk kompatibilitas mundur.
Pada gambar sebelah kiri berikut, status bar transparan dan
latar belakang hijau TopAppBar digambar di belakang status bar.
Status bar transparan ideal jika UI tidak muncul di bawah status bar atau gambar digambar di bawah status bar. Status bar transparan ideal saat UI di-scroll di bawah status bar. Untuk mengetahui informasi selengkapnya tentang perlindungan gradien, lihat Desain dari tepi ke tepi.
Menu navigasi
Android memungkinkan pengguna mengontrol navigasi menggunakan kontrol kembali, beranda, dan ringkasan:
- Kembali akan langsung kembali ke tampilan sebelumnya.
- Beranda bertransisi keluar dari aplikasi dan ke layar utama perangkat.
- Ringkasan menampilkan aplikasi aktif dan aplikasi terbaru yang tidak ditutup.
Pengguna dapat memilih dari berbagai konfigurasi menu navigasi, termasuk navigasi gestur (direkomendasikan) dan navigasi tiga tombol. Untuk memberikan pengalaman terbaik, pertimbangkan beberapa jenis navigasi.
Navigasi gestur
Navigasi gestur tidak menggunakan tombol untuk kembali, layar utama, dan ringkasan, tetapi menampilkan satu handle gestur untuk kemampuan. Pengguna berinteraksi dengan menggeser dari tepi kiri atau kanan layar untuk kembali dan ke atas dari bawah untuk membuka layar utama. Geser ke atas dan tahan untuk 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 melakukan hal berikut:
- Mendukung konten layar penuh.
- Hindari menambahkan interaksi atau target sentuh di bawah inset navigasi gestur.
Untuk informasi selengkapnya, lihat Menambahkan dukungan untuk navigasi gestur.
Navigasi tiga tombol
Navigasi tiga tombol menyediakan tiga tombol untuk kembali, layar utama, dan ringkasan.
Variasi menu navigasi lainnya
Bergantung pada versi Android dan perangkat, konfigurasi menu navigasi lainnya mungkin tersedia untuk pengguna Anda. Navigasi dua tombol, misalnya, menyediakan dua tombol untuk layar utama dan kembali.
Ikon menu navigasi
Ikon menu navigasi juga dapat muncul secara berbeda, bergantung pada tema atau preferensi yang ditetapkan pengguna. Untuk informasi selengkapnya, lihat Ikon panel sistem.
Menetapkan gaya menu navigasi
Android menangani perlindungan visual antarmuka pengguna dalam mode navigasi gestur dan dalam mode tombol. Sistem menerapkan adaptasi warna dinamis, yang mengubah warna konten panel sistem berdasarkan konten di belakangnya.
Mode navigasi gestur
Setelah menargetkan Android 15 atau memanggil enableEdgeToEdge di Activity, sistem akan menggambar menu navigasi gestur transparan dan menerapkan adaptasi
warna dinamis. Pada contoh berikut, handle di menu navigasi berubah
menjadi warna gelap jika ditempatkan di atas konten terang, dan sebaliknya.
Menu navigasi gestur transparan selalu direkomendasikan.
Anjuran
Larangan
Mode tombol
Setelah menargetkan Android 15 atau memanggil enableEdgeToEdge di Activity, sistem akan menerapkan scrim transparan di belakang menu navigasi tombol, yang dapat Anda hapus dengan menetapkan Window.setNavigationBarContrastEnforced() ke salah.
Sebaiknya gunakan menu navigasi tiga tombol transparan jika ada menu aplikasi
bawah atau menu navigasi aplikasi bawah, atau jika UI tidak men-scroll di bawah
menu navigasi tiga tombol. Untuk mendapatkan menu navigasi transparan, tetapkan
Window.setNavigationBarContrastEnforced() ke salah dan isi panel aplikasi bawah untuk
menggambar di bawah menu navigasi sistem, seperti yang terlihat pada Gambar 7, 8, dan 9. Lihat
Perlindungan panel sistem untuk mengetahui informasi selengkapnya.
Gunakan navigasi tiga tombol transparan untuk men-scroll konten. Untuk mengetahui informasi selengkapnya tentang pertimbangan menu navigasi transparan, lihat .
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 yang lancar yang menyinkronkan transisi
aplikasi dengan keyboard yang bergeser ke atas dan ke bawah dari bagian bawah layar, gunakan
WindowInsetsAnimationCompat.
Potongan layar
Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar untuk memberikan ruang bagi sensor depan. Potongan layar dapat bervariasi bergantung pada produsen. Pertimbangkan cara cutout layar akan berinteraksi dengan konten, orientasi, dan layar penuh.
Mode imersif
Anda dapat menyembunyikan panel sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna masih dapat mengetuk untuk menampilkan panel sistem dan menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan panel sistem untuk mode imersif.