Kolom sistem Android

Bersama-sama, status bar, kolom teks, dan menu navigasi disebut kolom sistem. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan peringatan notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja.

Penting untuk mempertimbangkan keunggulan kolom sistem, baik saat 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 kolom sistem saat mendesain aplikasi Anda. Perhitungkan zona aman UI, interaksi sistem, metode input, potongan layar, status bar, kolom teks, menu navigasi, dan kemampuan perangkat lainnya.

  • Jaga agar status sistem dan menu navigasi tetap transparan atau transparan dan gambar konten di belakang kolom ini untuk menampilkan konten layar penuh.

  • Gunakan tata letak kanonis yang menggunakan ruang layar secara efisien.

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

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

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

Saat notifikasi tiba, ikon biasanya muncul di status bar. Hal ini memberi sinyal kepada pengguna bahwa ada sesuatu yang dapat dilihat di panel notifikasi. Ikon atau simbol ini dapat berupa ikon aplikasi Anda untuk merepresentasikan channel. Lihat Desain notifikasi.

Gambar 4. Ikon notifikasi di status bar.

Menetapkan gaya status bar

Jadikan status bar transparan atau transparan untuk memastikan konten aplikasi Anda mencakup seluruh layar. Kemudian, tetapkan gaya ikon kolom sistem Anda agar ikon memiliki kontras yang tepat.

Layar penuh diterapkan di Android 15 sehingga status bar transparan secara default. Panggil enableEdgeToEdge() untuk kompatibilitas mundur.

Pada gambar sisi kiri berikut, status bar transparan dan latar belakang hijau TopAppBar digambar di belakang status bar.

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

Status bar transparan sangat ideal saat UI tidak muncul di bawah status bar atau gambar ditarik di bawah status bar. Status bar transparan sangat ideal saat UI men-scroll di bawah status bar. Untuk mengetahui informasi selengkapnya tentang perlindungan gradien, lihat Desain layar penuh.

Gambar 6. Aplikasi layar penuh dengan perlindungan gradien dua warna yang mencakup 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 keluar dari aplikasi dan menuju layar utama perangkat.
  • Ringkasan menampilkan aplikasi aktif dan aplikasi terbaru yang belum ditutup.

Pengguna dapat memilih dari berbagai konfigurasi navigasi, termasuk navigasi gestur dan navigasi adaptif. Untuk memberikan pengalaman terbaik, perhitungkan beberapa jenis navigasi.

Navigasi gestur

Navigasi gestur tidak menggunakan tombol untuk kembali, layar utama, dan ringkasan, tetapi menampilkan satu tuas gestur untuk kemudahan. Pengguna berinteraksi dengan menggeser dari tepi kiri atau kanan layar untuk kembali dan dari bawah ke atas untuk membuka layar utama. Menggeser ke atas dan menahan akan membuka ringkasan.

Navigasi gestur adalah pola navigasi yang lebih skalabel untuk mendesain di seluruh layar seluler dan yang lebih besar. Untuk memberikan pengalaman pengguna terbaik, perhitungkan navigasi gestur dengan melakukan hal berikut:

  • Mendukung konten layar penuh.
  • Hindari menambahkan interaksi atau target sentuh di bawah inset navigasi gestur.

Untuk mengetahui informasi selengkapnya, lihat Menambahkan dukungan untuk navigasi gestur.

Gambar 7. Menu navigasi tuas gestur.

Navigasi adaptif

Pola navigasi umum lainnya di Android adalah beralih antara kolom samping navigasi dan menu navigasi, bergantung pada class ukuran jendela layar. Komponen navigasi adaptif di Jetpack Compose menangani beberapa faktor bentuk sekaligus menjaga agar kolom sistem tidak berantakan.

Untuk mengetahui informasi selengkapnya, lihat Membangun navigasi adaptif.

Ikon navigasi juga dapat muncul secara berbeda bergantung pada preferensi atau tema yang ditetapkan pengguna. Untuk mengetahui informasi selengkapnya, lihat Ikon kolom sistem.

Menetapkan gaya navigasi

Android menangani perlindungan visual antarmuka pengguna dalam mode navigasi gestur dan dalam mode tombol. Sistem menerapkan adaptasi warna dinamis, yang membuat konten kolom sistem berubah warna berdasarkan konten di belakangnya.

Mode navigasi gestur

Setelah menargetkan Android 15 atau memanggil enableEdgeToEdge di Activity, sistem menggambar menu navigasi gestur transparan dan menerapkan adaptasi warna dinamis. Pada contoh berikut, tuas di menu navigasi berubah menjadi warna gelap jika ditempatkan di atas konten terang, dan sebaliknya.

Gambar 8. Adaptasi warna dinamis.

Menu navigasi gestur transparan selalu direkomendasikan.

Anjuran

Mempertahankan menu navigasi gestur transparan.

Larangan

Menambahkan latar belakang ke kolom navigasi gestur.

Mode tombol

Setelah menargetkan Android 15 atau memanggil enableEdgeToEdge di Activity, sistem menerapkan layar transparan di belakang menu navigasi tombol, yang dapat Anda hapus dengan menyetel Window.setNavigationBarContrastEnforced() ke salah (false).

Gambar 9. 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 di-scroll di bawah menu navigasi tiga tombol. Untuk mendapatkan menu navigasi transparan, setel Window.setNavigationBarContrastEnforced() ke false dan beri padding pada panel aplikasi bawah untuk digambar di bawah menu navigasi sistem, seperti yang terlihat pada Gambar 7, 8, dan 9. Lihat Perlindungan kolom sistem untuk mengetahui informasi selengkapnya.

Gunakan navigasi tiga tombol transparan untuk men-scroll konten. Untuk mengetahui informasi selengkapnya tentang pertimbangan panel navigasi transparan, lihat Desain layar penuh.

Keyboard dan navigasi

Gambar 10. Keyboard virtual dengan panel 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 lancar yang menyinkronkan transisi aplikasi dengan keyboard yang meluncur naik dan turun dari bagian bawah layar, gunakan WindowInsetsAnimationCompat.

Tata letak

Tata letak adaptif menampilkan konten aplikasi sehingga dapat memanfaatkan ruang yang tersedia dengan sebaik-baiknya. Tata letak ini menyederhanakan UI dengan memindahkan konten ke panel sekunder atau tersier.

Untuk mengetahui informasi selengkapnya, lihat Tata letak kanonis.

Potongan layar

Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar untuk memberikan ruang bagi sensor yang menghadap ke depan. Potongan layar dapat bervariasi, bergantung pada produsen. Pertimbangkan cara potongan layar berinteraksi dengan konten, orientasi, dan layar penuh.

Gambar 11. Contoh potongan layar.

Mode imersif

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

Anda dapat menyembunyikan kolom sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna tetap dapat mengetuk untuk menampilkan kolom sistem dan menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan kolom sistem untuk mode imersif.