Desain layar penuh

Aplikasi dari tepi ke tepi memanfaatkan seluruh layar dengan menggambar UI di bawah menu sistem.

Gambar 1. Kiri. Aplikasi yang tidak menggunakan layar penuh. Kanan. Aplikasi yang memiliki tata letak layar penuh.

Poin-poin penting

  • Menggambar latar belakang dan konten scroll di bawah panel sistem untuk pengalaman menyeluruh.
  • Hindari menambahkan gestur ketuk atau target tarik di bawah inset sistem; hal ini bertentangan dengan navigasi gestur dan dari tepi ke tepi.
Gambar 2. Aplikasi dengan inset gestur ditandai dengan warna hijau.

Menggambar konten di belakang kolom sistem

Fitur dari tepi ke tepi memungkinkan Anda menggambar UI di bawah panel sistem untuk pengalaman yang imersif.

Aplikasi dapat mengatasi tumpang-tindih konten dengan bereaksi terhadap inset. Insets menjelaskan seberapa banyak konten aplikasi Anda perlu diberi padding untuk menghindari tumpang-tindih dengan panel sistem atau dengan fitur perangkat fisik seperti potongan layar. Baca cara mendukung layar penuh dan menangani inset di Compose dan View.

Perhatikan jenis inset berikut saat mendesain 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 OS yang lebih diprioritaskan daripada aplikasi Anda.
  • Inset potongan layar berlaku untuk area perangkat yang memanjang ke permukaan layar, seperti potongan kamera.

Pertimbangan status bar

Lihat Panel Sistem Android untuk panduan desain panel sistem dasar. Bagian berikut membahas pertimbangan status bar tambahan.

Men-scroll konten

Panel aplikasi atas harus diciutkan saat men-scroll. Pelajari cara menciutkan TopAppBar Material 3.

Anjuran

Ciutkan panel aplikasi atas ke tinggi status bar jika panel aplikasi melekat.

Anjuran

Tambahkan gradien warna latar belakang yang cocok jika panel aplikasi atas tidak melekat.

Status bar harus transparan saat UI di-scroll di bawah, sehingga ikon status bar tidak terlihat berantakan. Untuk melakukannya, buat UI yang dapat di-scroll dari tepi ke tepi terlebih dahulu dengan menerapkan langkah-langkah dalam dokumentasi LazyColumn atau RecyclerView. Kemudian, pastikan panel sistem transparan dengan melakukan salah satu tindakan berikut:

  • Andalkan perlindungan otomatis TopAppBar Material 3 saat men-scroll, jika berlaku.
  • Buat composable kustom dengan alfa 60% atau gunakan GradientProtection untuk Tampilan.
Gambar 3. Aplikasi dengan inset gestur ditandai dengan warna hijau.

Untuk tata letak adaptif, pastikan ada perlindungan terpisah untuk panel dengan warna latar belakang yang berbeda.

Jangan

Memiliki perlindungan gradien yang tidak cocok dengan latar belakang setiap panel

Anjuran

Memiliki perlindungan gradien yang cocok dengan latar belakang setiap panel.

Demikian pula, panel navigasi juga harus memiliki perlindungan terpisah dari aplikasi lainnya.

Gambar 4. Status bar transparan untuk panel navigasi. Gambar ini menunjukkan perlindungan status bar untuk panel navigasi, tetapi tidak untuk aplikasi.

Jangan menumpuk perlindungan status bar, misalnya dengan menggunakan perlindungan bawaan TopAppBar Material 3 dan perlindungan kustom.

Lihat Panel Sistem Android untuk panduan desain panel navigasi dasar. Bagian berikut menyertakan pertimbangan menu navigasi tambahan.

Men-scroll konten

Panel aplikasi bawah akan diciutkan saat men-scroll.

Anjuran

Menambahkan scrim panel sistem untuk navigasi tiga tombol saat panel aplikasi bawah dianimasikan.

Anjuran

Pastikan navigasi gestur tetap transparan dan jangan tambahkan scrim tambahan.

Potongan layar

Potongan layar dapat memengaruhi tampilan UI Anda. Aplikasi harus menangani inset potongan layar sehingga bagian penting UI tidak digambar di bawah potongan layar.

Anjuran

Menyisipkan UI penting menggunakan inset potongan layar.

Jangan

Tempatkan UI penting di bagian paling tepi layar.

Namun, latar belakang panel aplikasi solid harus digambar ke dalam potongan layar seperti yang ditunjukkan pada gambar berikut.

Gambar 5. Latar belakang panel aplikasi solid digambar ke dalam potongan tampilan, sedangkan UI penting disisipkan.

Pastikan carousel horizontal digambar ke dalam potongan layar.

Gambar 6. Tampilan horizontal dari tepi ke tepi, dengan carousel yang di-scroll melalui potongan layar.

Baca cara mendukung potongan layar di Compose dan View.

Panduan lainnya

Secara umum, latar belakang dan garis pemisah juga harus digambar dari tepi ke tepi, sedangkan konten seperti teks dan tombol harus disisipkan untuk menghindari UI sistem dan elemen hardware.