Kolom sistem Android

Status bar, kolom teks, dan menu navigasi adalah kolom sistem. Widget menampilkan informasi penting seperti level baterai, waktu, dan pemberitahuan notifikasi, serta memberikan interaksi perangkat langsung dari mana saja.

Selalu pertimbangkan keberadaan dan keunggulan kolom sistem, baik saat Anda mendesain tata letak, metode input, atau kemampuan perangkat lainnya.

Gambar 1. Gambar di belakang kolom sistem.

Poin-poin penting

  • Sertakan kolom sistem dalam tata letak Anda untuk berbagai ukuran layar dan faktor bentuk. Perhitungkan zona aman UI, interaksi sistem, metode input, potongan layar, status bar, kolom teks, menu navigasi, dan kemampuan perangkat lainnya.

  • Buat status sistem dan menu navigasi tetap transparan atau tembus cahaya, dan gambar konten di belakang panel ini untuk menampilkan konten dalam layar penuh.

  • Gunakan WindowInsets untuk menangani gangguan kolom sistem dengan benar dan memastikan konten Anda tidak terhalang dalam tata letak adaptif.

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

Status bar

Status bar berisi ikon notifikasi dan ikon sistem. Pengguna berinteraksi dengan status bar dengan menariknya ke bawah untuk mengakses menu notifikasi. Gaya status bar dapat berupa transparan atau tembus cahaya.

Gambar 2. Region 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 masuk, ikon biasanya muncul di status bar. Hal ini menunjukkan kepada pengguna bahwa ada sesuatu yang dapat dilihat di panel samping notifikasi. Ini dapat berupa ikon atau simbol aplikasi Anda untuk mewakili saluran. Lihat Desain notifikasi.

Gambar 4. Ikon notifikasi di status bar.

Menetapkan gaya status bar

Buat status bar transparan atau tembus cahaya 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 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. Terapkan tampilan layar penuh untuk meningkatkan kualitas konten Anda. Jangan gunakan 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 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, layar utama, dan ringkasan:

  • Tombol kembali akan mengembalikan Anda ke tampilan sebelumnya.
  • Home beralih dari aplikasi ke 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 pengguna yang optimal, pertimbangkan beberapa jenis navigasi.

Navigasi gestur

Navigasi gestur tidak menggunakan tombol untuk kembali, layar utama, dan ringkasan, melainkan menampilkan satu tuas gestur untuk affordance. Pengguna berinteraksi dengan menggeser dari tepi kiri atau kanan layar untuk kembali dan menggeser 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 seluruh layar perangkat seluler dan layar 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 handle 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 mencegah kolom sistem mengganggu tata letak komponen navigasi.

Dalam tata letak adaptif, pertimbangkan bagaimana kolom sistem mungkin berperilaku atau diberi gaya secara berbeda di berbagai konteks, seperti ukuran jendela yang ringkas atau diperluas atau postur perangkat foldable yang berbeda.

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 akan menggambar menu navigasi gestur transparan dan menerapkan adaptasi warna dinamis. Dalam 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

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 menyetel Window.setNavigationBarContrastEnforced() ke salah (false).

Gambar 9. Adaptasi warna dinamis, dengan scrim transparan.

Gunakan menu navigasi tiga tombol transparan jika ada panel aplikasi bawah atau menu navigasi aplikasi bawah, atau jika UI tidak di-scroll di bawah menu navigasi tiga tombol. Untuk mendapatkan menu navigasi transparan, tetapkan Window.setNavigationBarContrastEnforced() ke false dan beri padding pada panel aplikasi bawah untuk menggambar di bawah menu navigasi sistem, seperti yang terlihat pada gambar 7, 8, dan 9. Lihat Perlindungan kolom sistem untuk mengetahui informasi selengkapnya.

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

Keyboard dan navigasi

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

Tata letak

Tata letak adaptif mengoptimalkan ruang tampilan yang tersedia. Panel ini mengatur UI aplikasi dengan memindahkan konten ke panel sekunder atau tersier.

Saat mendesain tata letak adaptif, pertimbangkan cara kolom sistem berinteraksi dengan konten Anda. Gunakan WindowInsets untuk memastikan UI Anda tidak terhalang oleh kolom sistem pada layar seperti layar besar, perangkat foldable, dan jendela aplikasi dalam mode multi-aplikasi dan mode jendela desktop.

Saat aplikasi Anda ditampilkan dari tepi ke tepi, pastikan konten dan kontrol tidak tertutup oleh UI sistem. Misalnya, jika menu navigasi menutupi tombol, pengguna mungkin tidak dapat mengklik tombol tersebut.

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 bagaimana potongan layar akan berinteraksi dengan konten, orientasi, dan tampilan 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 harus tetap dapat mengetuk untuk menampilkan kolom sistem dan menavigasi atau berinteraksi dengan kontrol sistem. Untuk mengetahui informasi selengkapnya, lihat Konten imersif dan Menyembunyikan kolom sistem untuk mode imersif.