Desain layar penuh

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

Gambar 1. Kiri. Aplikasi yang bukan layar penuh. Kanan. Aplikasi yang 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 akan bertentangan dengan layar penuh dan navigasi 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 imersif.

Aplikasi dapat mengatasi tumpang tindih dalam konten dengan bereaksi terhadap inset. Inset menjelaskan seberapa banyak konten aplikasi Anda perlu diberi padding untuk menghindari tumpang tindih dengan kolom 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 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 diprioritaskan daripada aplikasi Anda.
  • Inset potongan layar berlaku untuk area perangkat yang diperluas 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 the 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 ke panel aplikasi yang lebih kecil. Lihat panduan Material.

Anjuran

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

Anjuran

Tambahkan gradien warna latar belakang yang cocok jika panel aplikasi atas kecil tidak bersifat sticky.

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 menjadi layar penuh dengan menerapkan langkah-langkah dalam dokumentasi LazyColumn atau RecyclerView. Kemudian, pastikan kolom sistem tembus cahaya dengan melakukan salah satu hal berikut:

  • Mengandalkan perlindungan otomatis TopAppBar Material 3 saat men-scroll, jika berlaku.
  • Membuat composable gradien kustom atau menggunakan 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.

Larangan

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 bagian aplikasi lainnya.

Gambar 4. Status bar tembus cahaya 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 Kolom Sistem Android untuk panduan desain menu navigasi dasar. Bagian berikut menyertakan pertimbangan menu navigasi tambahan.

Men-scroll konten

Panel aplikasi bawah harus diciutkan saat men-scroll.

Anjuran

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

Anjuran

Pertahankan navigasi gestur agar tetap transparan dan jangan menambahkan 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

Inset UI penting menggunakan inset potongan layar.

Larangan

Menempatkan UI penting di 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 layar, sedangkan UI penting di-inset.

Pastikan carousel horizontal digambar ke dalam potongan layar.

Gambar 6. Tampilan horizontal layar penuh, tempat carousel 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 layar penuh, sedangkan konten seperti teks dan tombol harus di-inset untuk menghindari UI sistem dan elemen hardware.