Kolom sistem Android

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

Anda harus memperhatikan keterlihatan bilah sistem, mendesain UI untuk interaksi dengan OS Android, metode {i>input<i}, atau kemampuan perangkat. Tempatkan bilah sistem di bagian atas sebagian besar lapisan untuk memastikan mereka diperhitungkan.

Gambar 1: Gambar di belakang kolom sistem

Poin-poin penting

  • Sertakan bilah sistem dalam desain Anda untuk memperhitungkan zona aman UI, sistem interaksi, metode input, potongan layar, dan kemampuan perangkat lainnya. Tempatkan bilah sistem di lapisan paling atas untuk memastikannya diperhitungkan.

  • Buat kolom sistem transparan dan tata letak aplikasi Anda dalam layar penuh, melanjutkan UI di bawah menu untuk memberikan pengalaman dari tepi ke tepi sepenuhnya.

  • Hindari menambahkan gestur ketuk atau target tarik di bawah inset gestur; berikut bertentangan dengan navigasi {i>edge-to-edge<i} dan {i>gesture<i}.

    Gambar 2: Inset gestur sistem. Hindari melakukan ketukan target di bawah area ini

Menggambar konten Anda di belakang kolom sistem

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

Aplikasi dapat mengatasi tumpang-tindih dalam konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda yang perlu ditambahkan untuk menghindari tumpang-tindih dengan dari UI Android OS seperti bilah navigasi atau bilah status, atau dengan fitur perangkat fisik seperti potongan layar.

Perhatikan jenis inset berikut saat mendesain untuk penggunaan tata letak layar penuh kasus:

  • Inset kolom sistem berlaku untuk UI yang dapat diketuk dan yang seharusnya tidak terhalang secara visual oleh bilah sistem.
  • Inset gestur sistem berlaku untuk area navigasi gestur yang digunakan oleh sistem yang diprioritaskan daripada aplikasi Anda.

Status bar

Di Android, status bar berisi ikon notifikasi dan ikon sistem. Tujuan pengguna berinteraksi dengan bilah status dengan menariknya ke bawah untuk mengakses notifikasi bayangan.

Gambar 3: Wilayah status bar ditandai di bagian atas panel aplikasi atas

{i>Status bar<i} dapat muncul secara berbeda tergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda juga dapat menyetel gaya status bar, seperti dalam contoh berikut.

Gambar 4: Status bar dalam tema terang dan gelap.

Pastikan konten aplikasi Anda kini memenuhi seluruh layar dengan tata letak layar penuh tidak diperlukan. Gunakan kolom sistem transparan dengan konten dari tepi ke tepi, seperti yang ditunjukkan pada contoh berikut.

Gambar 5: Batang transparan menggunakan fitur canggih, ideal untuk menonjolkan konten Anda untuk memanfaatkan ruang layar terbesar.


Gambar 6: Atur gaya kolom sistem untuk meningkatkan kualitas konten atau menyesuaikan dengan gaya visual aplikasi Anda {i>branding.<i} Jangan biarkan kolom sistem ditetapkan ke atribut default.

Saat notifikasi masuk, ikon biasanya muncul di status bar. Ini memberi sinyal kepada pengguna bahwa ada sesuatu yang bisa dilihat di panel samping notifikasi. Ikon ini dapat menjadi ikon atau simbol aplikasi untuk mewakili channel. Lihat Desain notifikasi.

Gambar 7: Ikon notifikasi di status bar

Menetapkan gaya status bar

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

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

Jika Anda menetapkan warna latar belakang secara manual, Anda dapat memilih untuk menata gaya status konten sebagai terang atau gelap untuk kontras yang optimal.

Menampilkan potongan dan status bar

Potongan layar adalah area di beberapa perangkat yang memanjang ke layar guna menyediakan ruang bagi sensor yang menghadap ke depan. Hal ini dapat memengaruhi tampilan status bar. Potongan layar dapat bervariasi bergantung pada produsennya.

Baca cara mendukung potongan layar.

Gambar 8: Contoh potongan layar

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

  • Kembali akan langsung kembali ke tampilan sebelumnya.
  • Transisi layar utama 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 gestur navigasi (disarankan) dan navigasi tiga tombol.

Navigasi gestur

Diperkenalkan di Android 10 (API level 29), navigasi gestur direkomendasikan jenis navigasi yang berbeda, meskipun Anda tidak dapat mengganti preferensi pengguna. Gestur navigasi tidak menggunakan tombol kembali, beranda, dan ikhtisar, melainkan menampilkan {i>gesture <i}tunggal untuk {i>affordance<i}. Pengguna berinteraksi dengan menggeser dari kiri atau tepi kanan layar untuk kembali, maju, dan ke atas dari bawah untuk rumah. Menggeser ke atas dan menahan akan membuka ringkasan.

Navigasi {i>gesture <i}adalah pola navigasi yang lebih terukur untuk mendesain di seluruh 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 di bagian inset navigasi gestur.

Baca tentang menerapkan navigasi gestur.

Gambar 9: Menu navigasi handel gestur

Navigasi tiga tombol

Navigasi tiga tombol menyediakan tiga tombol untuk kembali, beranda, dan ikhtisar.

Gambar 10: Menu navigasi tiga tombol

Variasi menu navigasi lainnya

Bergantung pada versi Android dan perangkat, konfigurasi menu navigasi lainnya tersedia untuk pengguna Anda. Navigasi dua tombol, misalnya, menyediakan dua untuk beranda dan kembali.

Gambar 11: Menu navigasi dua tombol

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 gestur mode navigasi atau dalam mode tombol.

  • Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, di di mana isi bilah sistem berubah warna berdasarkan konten di belakangnya. Pada contoh berikut, tuas 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 sistem batang (untuk level API 29 atau yang lebih tinggi) atau kolom sistem transparan (untuk level API 28 atau lebih rendah).

    Gambar 13: Adaptasi warna dinamis, dengan kolom sistem mengubah warna berdasarkan konten di belakangnya

Keyboard dan navigasi

Gambar 14: Keyboard virtual dengan menu navigasi

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

Mode imersif

Gambar 15: Mode imersif yang menampilkan pengalaman layar penuh di perangkat seluler berorientasi lanskap

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