Status bar, kolom teks, dan menu navigasi secara bersama-sama disebut kolom sistem. Layar ini menampilkan informasi penting seperti level baterai, waktu, dan notifikasi, 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.
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 panel ini agar dapat digunakan dari tepi ke tepi.
Hindari menambahkan gestur ketuk atau target tarik di bawah inset gestur; gestur ini bertentangan dengan navigasi gestur dan edge-to-edge.
Menggambar konten di belakang kolom sistem
Fitur edge-to-edge memungkinkan Android menggambar UI di bawah panel sistem untuk pengalaman imersif, yang merupakan permintaan umum dari pengguna.
Aplikasi dapat mengatasi tumpang-tindih konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda perlu dipadding untuk menghindari tumpang-tindih dengan bagian UI Android OS seperti status bar, kolom teks, menu navigasi; atau dengan fitur perangkat fisik seperti cutout tampilan. Baca tentang cara mendukung layar penuh dan menangani inset di Compose dan tampilan.
Perhatikan jenis inset berikut saat mendesain untuk kasus penggunaan dari tepi ke tepi:
- Inset kolom sistem berlaku untuk UI yang dapat diketuk dan tidak boleh terhalang secara visual oleh kolom sistem.
- Inset gestur sistem berlaku untuk area navigasi gestur yang digunakan oleh sistem yang lebih diprioritaskan daripada aplikasi Anda.
- Inset potongan layar berlaku untuk area perangkat yang memanjang ke permukaan layar, seperti potongan kamera.
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.
Ikon status bar dapat muncul secara berbeda bergantung pada konteks, waktu, preferensi atau tema yang ditetapkan pengguna, dan parameter lainnya. Anda dapat menetapkan gaya ikon status seperti pada contoh berikut.
Pastikan konten aplikasi Anda mencakup seluruh layar. Pastikan status dan menu navigasi transparan atau buram dengan konten tepi ke tepi seperti yang ditunjukkan dalam contoh berikut.
Tata letak layar penuh diterapkan di Android 15 sehingga panel sistem bersifat transparan atau buram secara default. Pada Android versi sebelumnya, jangan biarkan panel sistem buram.
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.
Menetapkan gaya status bar
Pastikan status bar transparan di semua versi dengan memanggil
enableEdgeToEdge(). Pastikan untuk memperbarui warna ikon status bar untuk kontras.
Misalnya, untuk membuat ikon gelap:
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Menu navigasi
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 menunjukkan bahwa aplikasi terbuka dan baru saja dibuka.
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
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, 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. Dengan menggeser ke atas dan menahan, ringkasan akan terbuka.
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:
- Mendukung konten layar penuh.
- Hindari menambahkan interaksi atau target sentuh di bawah inset navigasi gestur.
Baca cara menerapkan navigasi gestur.
Navigasi tiga tombol
Navigasi tiga tombol menyediakan tiga tombol untuk kembali, layar utama, dan ringkasan.
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.
Menetapkan gaya navigasi
Pastikan menu navigasi transparan atau tembus cahaya di semua versi dengan
memanggil enableEdgeToEdge().
Di perangkat Android 15 dan yang lebih baru, atau setelah memanggil enableEdgeToEdge(), navigasi gestur
transparan secara default. Navigasi tiga tombol bersifat transparan secara
default atau buram jika berada di dalam taskbar pada perangkat layar besar.
Jika aplikasi Anda memiliki panel aplikasi bawah, tetapkan Window.setNavigationBarContrastEnforced()
ke false untuk memastikan panel aplikasi bawah dapat menggambar di bawah menu navigasi
sistem tanpa menerapkan scrim transparan dalam navigasi
tiga tombol.
Android menangani perlindungan visual antarmuka pengguna dalam mode navigasi gestur dan dalam mode tombol.
Mode navigasi gestur: Sistem menerapkan adaptasi warna dinamis, dengan konten panel sistem mengubah 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 transparan di belakang menu navigasi
tombol, yang dapat dihapus dengan menetapkan
Window.setNavigationBarContrastEnforced() ke false.
Keyboard dan 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 keyboard yang lancar, 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.
Potongan layar dapat memengaruhi tampilan UI Anda. Saat menargetkan Android 15 (API level 35) atau yang lebih tinggi, aplikasi akan menggambar ke dalam area potongan tampilan secara default. Aplikasi harus menangani inset potongan layar sehingga UI penting tidak digambar di bawah potongan layar. Baca cara mendukung potongan layar.
Mode imersif
Anda dapat menyembunyikan panel sistem saat memerlukan pengalaman layar penuh, misalnya saat pengguna menonton film. Pengguna masih dapat mengetuk untuk menampilkan panel sistem dan UI guna menavigasi atau berinteraksi dengan kontrol sistem. Pelajari lebih lanjut cara mendesain untuk mode layar penuh, atau baca cara menyembunyikan panel sistem untuk mode imersif.