Kolom sistem Android

Status bar dan menu navigasi secara bersamaan disebut bar sistem. Aplikasi ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi notifikasi, serta menyediakan interaksi perangkat langsung dari mana saja.

Penting untuk memperhitungkan keterlihatan sistem, baik Anda mendesain UI untuk interaksi dengan OS Android, metode input, maupun kemampuan perangkat lainnya. Tempatkan kolom sistem di bagian atas sebagian besar lapisan untuk memastikan penghitungannya.

Poin-poin penting

• Sertakan kolom sistem dalam desain Anda untuk memperhitungkan zona aman UI, interaksi sistem, metode input, potongan layar, dan kemampuan perangkat lainnya. Pastikan kolom sistem berada di lapisan paling atas, sehingga panel tersebut diperhitungkan.

• Lakukan: Buat kolom sistem transparan dan tata letak aplikasi dalam layar penuh, teruskan UI di bawah kolom untuk memberikan pengalaman tata letak layar penuh.

• Jika Anda tidak dapat menetapkan kedua batang agar transparan, pastikan warna batang sesuai dengan warna isi aplikasi Anda. Misalnya, cocokkan warna menu navigasi bawah dengan warna menu gestur, dan warna status bar atas dengan warna isi.

  

• Hindari penambahan gestur ketuk atau target tarik di bawah inset gestur; ini bertentangan dengan navigasi tepi ke tepi dan gestur.

  

Menggambar konten di belakang kolom sistem

Fitur dari tepi ke tepi memungkinkan Android menggambar UI di bawah kolom sistem untuk pengalaman yang lebih imersif. Sebaiknya gunakan tata letak layar penuh karena membuat menu navigasi menjadi transparan adalah permintaan umum dari pengguna. (Baca cara mendukung edge-to-edge).

Aplikasi dapat mengatasi konten yang tumpang tindih dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda perlu dilengkapi agar tidak tumpang-tindih dengan bagian UI Android OS seperti menu navigasi atau status bar, atau dengan fitur perangkat fisik seperti potongan layar.

Perhatikan jenis inset berikut saat mendesain untuk kasus penggunaan dari tepi ke tepi:

• Inset kolom sistem berlaku untuk UI yang dapat diketuk dan yang tidak boleh dilihat 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 menu notifikasi.

Status bar dapat muncul berbeda bergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda juga dapat menetapkan gaya status bar, seperti dalam contoh berikut.

Saat notifikasi tiba, ikon biasanya muncul di status bar. Hal ini memberi tahu pengguna bahwa ada sesuatu yang perlu dilihat di panel samping notifikasi. Ini dapat berupa ikon atau simbol aplikasi Anda untuk mewakili saluran. Lihat Desain notifikasi.

Menetapkan gaya status bar

Beri gaya latar belakang status bar sebagai bagian dari tema aplikasi Anda, dengan warna atau gaya kustom, bersama dengan transparansi dan opasitas setelan.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

Jika menetapkan warna latar belakang secara manual, Anda dapat menata gaya konten status bar secara terang sebagai terang atau gelap agar kontrasnya optimal.

Potongan layar dan status bar

Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan tampilan untuk menyediakan ruang bagi sensor yang menghadap ke depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi tergantung pada produsennya.

Baca cara mendukung potongan layar.

Menu navigasi

Android memungkinkan pengguna mengontrol navigasi menggunakan kontrol kembali, layar utama, dan ringkasan:

• Kembali langsung kembali ke tampilan sebelumnya.
• Layar utama bertransisi keluar dari aplikasi dan ke layar utama perangkat.
• Ringkasan menampilkan aplikasi yang terbuka dan baru saja dibuka.

Pengguna dapat memilih dari berbagai konfigurasi menu navigasi, termasuk navigasi gestur (direkomendasikan) dan navigasi tiga tombol.

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, melainkan menampilkan satu tuas gestur untuk keterjangkauan. Pengguna berinteraksi dengan menggeser dari tepi kiri atau kanan layar untuk kembali dan maju serta naik dari bawah untuk kembali ke layar utama. Menggeser dan menahan akan 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, perhitungkan navigasi gestur dengan:

• Mendukung konten tata letak layar penuh.
• Hindari menambahkan interaksi atau target sentuh pada inset navigasi gestur.

Baca cara menerapkan navigasi gestur.

Navigasi tiga tombol

Navigasi tiga tombol menyediakan tiga tombol untuk kembali, beranda, 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

Contoh berikut menunjukkan cara menerapkan gaya navigasi.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android menangani semua perlindungan visual antarmuka pengguna dalam mode navigasi gestur atau dalam mode tombol.

• Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, yang kontennya pada kolom sistem berubah warna berdasarkan konten di belakangnya. Pada contoh berikut, handle di menu navigasi berubah menjadi warna gelap jika ditempatkan di atas konten terang, dan sebaliknya.

  

• Mode tombol: Sistem menerapkan scrim tembus cahaya di belakang kolom sistem (untuk API level 29 atau yang lebih tinggi) atau kolom sistem transparan (untuk API level 28 atau yang lebih rendah).

  

Keyboard dan navigasi

Setiap jenis navigasi bereaksi dengan sesuai terhadap keyboard virtual untuk memungkinkan pengguna melakukan tindakan seperti menutup atau bahkan mengubah jenis keyboard. Untuk memastikan transisi keyboard yang lancar, untuk memastikan transisi halus yang menyinkronkan transisi aplikasi dengan keyboard bergeser ke atas dan ke bawah dari bagian bawah layar, gunakan WindowInsetsAnimationCompat.

Mode imersif

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