Desain layar penuh

Aplikasi layar penuh memanfaatkan seluruh layar dengan menggambar UI di bawah kolom sistem.

Gambar 1. Kiri. Aplikasi yang tidak ditampilkan dalam layar penuh. Ya. Aplikasi yang ditampilkan dalam layar penuh.

Poin-poin penting

  • Gambar latar belakang dan konten scroll di bawah kolom sistem untuk pengalaman layar penuh.
  • Hindari menambahkan gestur ketuk atau target tarik di bawah inset sistem; hal ini bertentangan dengan navigasi layar penuh dan gestur.
Gambar 2. Aplikasi dengan inset gestur yang ditandai dengan warna hijau.

Menggambar konten di belakang kolom sistem

Fitur layar penuh memungkinkan Anda menggambar UI di bawah kolom sistem untuk pengalaman yang imersif.

Aplikasi dapat mengatasi tumpang-tindih konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda perlu di-padding agar tidak tumpang-tindih dengan kolom sistem atau dengan fitur perangkat fisik seperti potongan layar. Baca cara mendukung tampilan layar penuh dan menangani inset di Compose dan View.

Perhatikan jenis inset berikut saat mendesain kasus penggunaan layar penuh:

  • 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 meluas ke permukaan layar, seperti potongan kamera.

Pertimbangan status bar

Lihat Kolom Sistem Android untuk panduan desain kolom 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. Di Material 3, panel aplikasi atas kecil dapat diciutkan ke tinggi status bar atau di-scroll ke luar layar. Panel aplikasi atas berukuran sedang dan besar dapat diciutkan menjadi panel aplikasi yang lebih kecil. Lihat [panduan Material][10].

Anjuran

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

Anjuran

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

Status bar harus tembus cahaya saat UI di-scroll di bawahnya, sehingga ikon status bar tidak terlihat berantakan. Untuk melakukannya, pertama-tama buat UI yang dapat di-scroll dari tepi ke tepi dengan menerapkan langkah-langkah dalam dokumentasi LazyColumn atau RecyclerView. Kemudian, pastikan kolom sistem tembus cahaya dengan melakukan salah satu hal berikut:

  • Andalkan perlindungan otomatis TopAppBar Material 3 saat men-scroll, jika berlaku.
  • Buat composable gradien kustom atau gunakan GradientProtection untuk View. Untuk mengetahui informasi selengkapnya tentang cara melakukannya di compose, lihat Perlindungan kolom sistem.
Gambar 3. Aplikasi dengan inset gestur yang 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 menampilkan 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 Kolom Sistem Android untuk panduan desain menu navigasi dasar. Bagian berikut mencakup pertimbangan menu navigasi tambahan.

Men-scroll konten

[BottomAppBar][10] harus diciutkan saat men-scroll menggunakan parameter scrollBehavior.

Anjuran

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

Anjuran

Buat navigasi gestur tetap transparan dan jangan tambahkan scrim tambahan.

Namun, tetap tampilkan [NavigationBar]11 saat men-scroll karena tidak memiliki parameter scrollBehavior.

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

Sisipkan UI penting menggunakan inset potongan layar.

Jangan

Menempatkan UI penting di tepi layar.

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

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

Pastikan carousel horizontal digambar ke potongan layar.

Gambar 6. Tampilan horizontal layar penuh, dengan carousel yang di-scroll melalui potongan layar.

Baca cara mendukung potongan layar di Compose.

Panduan lainnya

Secara umum, latar belakang dan garis pembagi juga harus digambar edge-to-edge, sedangkan konten seperti teks dan tombol harus di-inset untuk menghindari elemen UI sistem dan hardware.