Status bar dan menu navigasi bersama-sama disebut status bar. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi, serta memberikan interaksi langsung dengan perangkat 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. 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 panel ini agar dapat digunakan dari tepi ke tepi.
Hindari menambahkan gestur ketuk atau target tarik di bawah inset gestur; hal ini bertentangan dengan navigasi gestur dan edge-to-edge.
Gambar 2: Inset gestur sistem. Hindari menempatkan target ketuk di bawah area ini
Menggambar konten di belakang kolom sistem
Fitur edge-to-edge memungkinkan Android menggambar UI di bawah panel sistem untuk pengalaman imersif, yang merupakan permintaan umum dari pengguna.
Aplikasi dapat mengatasi tumpang-tindih konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda perlu dipadding untuk menghindari tumpang-tindih dengan bagian UI Android OS seperti menu navigasi atau status bar, atau dengan fitur perangkat fisik seperti potongan layar. Baca tentang cara mendukung layar penuh dan menangani inset di Compose dan tampilan.
Perhatikan jenis inset berikut saat mendesain untuk kasus penggunaan dari 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 panel notifikasi.
Ikon status bar dapat muncul secara berbeda bergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda dapat menetapkan gaya ikon status seperti pada contoh berikut.
Pastikan konten aplikasi Anda mencakup seluruh layar. Pastikan status dan menu navigasi transparan atau buram dengan konten tepi ke tepi seperti yang ditunjukkan dalam contoh berikut.
Tata letak layar penuh diterapkan di Android 15 sehingga panel sistem bersifat transparan atau buram secara default. Pada Android versi sebelumnya, jangan biarkan panel sistem buram.
Saat notifikasi diterima, 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
Pastikan status bar transparan di semua versi dengan memanggil
enableEdgeToEdge(). Pastikan untuk memperbarui warna ikon status bar untuk kontras.
Misalnya, untuk membuat ikon gelap:
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Menampilkan potongan layar dan status bar
Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar untuk memberikan ruang bagi sensor depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi bergantung pada produsen.
Baca cara mendukung potongan layar.
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 menunjukkan bahwa aplikasi terbuka dan baru saja dibuka.
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
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, 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. Dengan menggeser ke atas dan menahan, ringkasan akan terbuka.
Navigasi gestur adalah pola navigasi yang lebih skalabel untuk mendesain di layar seluler dan layar yang lebih besar. Untuk memberikan pengalaman pengguna terbaik, pertimbangkan navigasi gestur dengan:
- Mendukung konten layar penuh.
- 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, layar utama, dan ringkasan.
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
Pastikan menu navigasi transparan atau tembus cahaya di semua versi dengan
memanggil enableEdgeToEdge().
Di perangkat Android 15 dan yang lebih baru, atau setelah memanggil enableEdgeToEdge(), navigasi gestur
transparan secara default. Navigasi tiga tombol bersifat transparan
secara default atau buram jika berada di dalam taskbar pada perangkat layar besar.
Jika aplikasi Anda memiliki panel aplikasi bawah, tetapkan Window.setNavigationBarContrastEnforced()
ke false untuk memastikan panel aplikasi bawah dapat menggambar di bawah menu navigasi
sistem tanpa menerapkan scrim transparan dalam navigasi
tiga tombol.
Android menangani perlindungan visual antarmuka pengguna dalam mode navigasi gestur dan dalam mode tombol.
Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, yang mengubah warna konten panel sistem berdasarkan konten di belakangnya. Pada contoh berikut, handle di menu navigasi berubah menjadi warna gelap jika ditempatkan di atas konten terang, dan sebaliknya.
Gambar 12: Adaptasi warna dinamis Mode tombol: Sistem menerapkan scrim transparan di belakang menu navigasi tombol, yang dapat dihapus dengan menetapkan
Window.setNavigationBarContrastEnforced()kefalse.
Gambar 13: Adaptasi warna dinamis, dengan panel sistem mengubah 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, 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 panel sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna masih dapat mengetuk untuk menampilkan panel sistem dan UI guna menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan panel sistem untuk mode imersif.