Menyiapkan Tata letak layar penuh

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

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

1. Aktifkan layar penuh

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

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 tembus cahaya ke menu navigasi untuk kontras yang lebih baik. Warna ikon sistem dan scrim menyesuaikan 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 layar penuh diaktifkan, beberapa konten dan elemen UI aplikasi Anda mungkin akan digambar di belakang kolom sistem. Untuk mencegah elemen penting atau interaktif terhalang 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 inset utama yang perlu dipertimbangkan untuk tampilan layar penuh adalah:

• Inset kolom sistem: Mewakili area tempat kolom sistem ditampilkan. Gunakan inset ini untuk menghindari UI terhalang oleh kolom sistem.
• Inset potongan layar: Mewakili 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, mendapatkan manfaat dari pengalaman yang sepenuhnya imersif saat kolom sistem disembunyikan. 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 menggunakan layar penuh, latar belakang aplikasi Anda mungkin terlihat di belakang kolom sistem, sehingga Anda mungkin perlu menyesuaikan warna ikon kolom sistem untuk 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 cahaya default, Anda mungkin perlu menyesuaikannya. Lihat panduan desain kolom sistem Android dan Panduan desain layar penuh untuk memutuskan kapan harus menggunakan kolom transparan versus tembus cahaya.

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 dalam mode layar penuh, panggil WindowCompat.enableEdgeToEdge dalam metode onStart() dialog:

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