Menyiapkan Tata letak layar penuh

Tampilan layar penuh memungkinkan aplikasi Anda menggambar UI-nya di belakang kolom sistem—status bar, kolom teks, dan menu navigasi—untuk memberikan pengalaman pengguna yang lebih imersif. Jika Anda menargetkan perangkat yang menjalankan Android 15 (level API 35) atau yang lebih tinggi, tampilan layar penuh akan diterapkan secara default.

Untuk menampilkan konten dengan benar dalam layar penuh di semua versi Android, ikuti langkah-langkah penyiapan berikut. Tanpa langkah-langkah ini, aplikasi Anda mungkin menggambar warna solid di belakang kolom sistem atau tidak menganimasikan kontennya secara sinkron dengan transisi keyboard di layar (IME).

1. Aktifkan layar penuh

Untuk mengaktifkan layar penuh di versi Android sebelumnya, panggil enableEdgeToEdge() dalam metode Activity.onCreate() Anda:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    ...
}

Secara default, enableEdgeToEdge() membuat kolom sistem transparan, kecuali dalam mode navigasi 3 tombol, yang menerapkan scrim transparan ke menu navigasi untuk kontras yang lebih baik. Warna ikon sistem dan scrim beradaptasi dengan tema terang atau gelap sistem.

2. Mengonfigurasi windowSoftInputMode

Tetapkan android:windowSoftInputMode="adjustResize" di entri AndroidManifest.xml Aktivitas Anda. Setelan ini memungkinkan aplikasi Anda menerima inset IME, sehingga Anda dapat menyesuaikan tata letak dengan padding saat keyboard virtual muncul atau menghilang.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. Menangani tumpang-tindih menggunakan inset

Setelah ditampilkan di layar penuh diaktifkan, beberapa konten dan elemen UI aplikasi Anda mungkin digambar di belakang kolom sistem. Untuk mencegah elemen penting atau interaktif tertutup oleh kolom sistem atau tumpang-tindih dengan gestur sistem, Anda harus menangani inset.

Inset menjelaskan bagian layar yang berpotongan dengan UI sistem atau gestur sistem. Jenis utama inset yang perlu dipertimbangkan untuk tampilan layar penuh adalah:

• Inset kolom sistem: Merepresentasikan area tempat kolom sistem ditampilkan. Gunakan ini untuk menghindari UI terhalang oleh kolom sistem.
• Inset potongan layar: Merepresentasikan area tempat potongan fisik (seperti notch kamera) ada di layar perangkat.

Di Compose, Anda dapat menangani inset menggunakan penggaris, pengubah padding, atau pengubah ukuran inset. Lihat Tentang inset jendela untuk panduan mendetail.

Topik lanjutan

Pertimbangkan hal berikut untuk kasus penggunaan layar penuh yang lebih canggih.

Mode imersif

Beberapa konten, seperti video atau peta, akan lebih baik jika ditampilkan dalam pengalaman yang sepenuhnya imersif dengan menyembunyikan kolom sistem. Anda dapat menyembunyikan kolom sistem menggunakan WindowInsetsControllerCompat:

val windowInsetsController =
    WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

Warna dan ikon kolom sistem

Saat ditampilkan dalam layar penuh, latar belakang aplikasi Anda mungkin terlihat di belakang kolom sistem, jadi Anda mungkin perlu menyesuaikan warna ikon kolom sistem untuk mendapatkan kontras yang lebih baik.

Untuk mengubah ikon status bar menjadi terang atau gelap, gunakan WindowInsetsControllerCompat:

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Perlindungan kolom sistem

Meskipun enableEdgeToEdge() menyediakan kolom sistem transparan atau tembus pandang secara default, Anda mungkin perlu menyesuaikannya. Lihat Panduan desain kolom sistem Android dan Panduan desain layar penuh untuk memutuskan kapan harus menggunakan kolom transparan versus transparan sebagian.

Untuk membuat menu navigasi 3 tombol sepenuhnya transparan, bukan tembus cahaya, Anda dapat menonaktifkan penerapan kontras:

window.isNavigationBarContrastEnforced = false

Untuk mengetahui informasi selengkapnya, lihat Tentang perlindungan kolom sistem.

Dialog

Untuk menampilkan dialog layar penuh dari tepi ke tepi, panggil WindowCompat.enableEdgeToEdge dalam metode onStart() dialog:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}