Kolom sistem Android

Status bar, kolom teks, dan menu navigasi secara bersama-sama disebut kolom sistem. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi pemberitahuan, 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.

Gambar 1. Gambar di belakang kolom sistem.

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 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.

Gambar 2. Area status bar ditandai di atas panel aplikasi atas.

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.

Gambar 3. Ikon status bar dalam tema terang dan gelap.

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.

Gambar 4. Ikon notifikasi di status bar.

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.

Gambar 5. Gunakan layar penuh untuk meningkatkan kualitas konten Anda. Tidak memiliki kolom sistem buram.

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.

Gambar 6. Aplikasi dari tepi ke tepi dengan perlindungan gradien dua warna yang membentang di dua panel di belakang status bar sistem.

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

Sebaiknya gunakan navigasi gestur, kecuali jika pengguna memilih sebaliknya di preferensi mereka. 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 layar 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.

Gambar 7. Menu navigasi handle gestur.

Navigasi tiga tombol

Navigasi tiga tombol menyediakan tiga tombol untuk kembali, layar utama, dan ringkasan.

Gambar 8. Menu navigasi tiga tombol.

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.

Gambar 9. Menu navigasi dua tombol.

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.

Gambar 10. Adaptasi warna dinamis.

Menu navigasi gestur transparan selalu direkomendasikan.

Anjuran

Pastikan menu navigasi gestur tetap transparan.

Larangan

Menambahkan latar belakang ke menu navigasi gestur.

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.

Gambar 11. Adaptasi warna dinamis, dengan scrim transparan.

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

Gambar 12. Keyboard virtual dengan menu 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.

Gambar 13. Contoh potongan layar.

Mode imersif

Gambar 14. Mode imersif yang menampilkan pengalaman layar penuh di perangkat seluler berorientasi lanskap.

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.