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 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 hijau.

Menggambar konten Anda 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 tertutup 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 mendasar. Bagian berikut membahas pertimbangan tambahan status bar.

Men-scroll konten

Panel aplikasi atas harus diciutkan saat men-scroll. Pelajari cara meminimalkan TopAppBar Material 3. Di Material 3, panel aplikasi atas kecil dapat diciutkan ke tinggi bilah status atau di-scroll ke luar layar. Panel aplikasi atas berukuran sedang dan besar dapat diciutkan menjadi panel aplikasi yang lebih kecil. Lihat Panduan materi.

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 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. Untuk mengetahui informasi selengkapnya, lihat Perlindungan panel sistem.
Gambar 3. Aplikasi dengan inset gestur yang ditandai 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 samping navigasi. Gambar ini menampilkan 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 agar bagian penting UI tidak digambar di bawah potongan layar.

Anjuran

Sisipkan 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 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.

Panduan lainnya

Secara umum, latar belakang dan garis pemisah juga harus ditampilkan di seluruh layar, sedangkan konten seperti teks dan tombol harus dimasukkan agar tidak tumpang-tindih dengan UI sistem dan elemen hardware.