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 yang dapat di-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 gestur dan layar penuh.
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 diberi padding untuk menghindari tumpang-tindih dengan kolom sistem atau dengan fitur perangkat fisik seperti potongan layar. Baca artikel tentang 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 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 tambahan status bar.

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 bilah status atau di-scroll keluar layar. Panel aplikasi atas berukuran sedang dan besar dapat diciutkan menjadi panel aplikasi yang lebih kecil. Lihat Panduan material.

Anjuran

Menciutkan panel aplikasi atas kecil ke tinggi bilah status jika panel aplikasi bersifat tetap.

Anjuran

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

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

  • Mengandalkan perlindungan otomatis TopAppBar Material 3 saat men-scroll, jika berlaku.
  • Buat composable gradien kustom atau gunakan GradientProtection untuk Tampilan. Untuk mengetahui informasi selengkapnya tentang cara melakukannya di Compose, lihat Perlindungan panel 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 menunjukkan perlindungan status bar untuk panel navigasi, tetapi bukan aplikasi.

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

Lihat Kolom Sistem Android untuk panduan desain kolom navigasi dasar. Bagian berikut mencakup pertimbangan tambahan untuk bilah navigasi.

Men-scroll konten

Panel aplikasi bawah harus diciutkan saat men-scroll.

Anjuran

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

Anjuran

Biarkan navigasi gestur 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

Menyisipkan UI penting menggunakan inset potongan layar.

Jangan

Tempatkan UI penting di tepi layar.

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

Gambar 5. Latar belakang kolom aplikasi yang solid ditarik ke dalam potongan layar, sementara UI penting disisipkan.

Pastikan carousel horizontal ditarik ke potongan layar.

Gambar 6. Tampilan horizontal layar penuh, tempat carousel men-scroll melalui potongan layar.

Baca cara mendukung potongan layar di Compose dan View.

Panduan lainnya

Secara umum, latar belakang dan garis pemisah juga harus ditampilkan di layar penuh, sedangkan konten seperti teks dan tombol harus dimasukkan untuk menghindari UI sistem dan elemen hardware.