Menyiapkan Tata letak layar penuh

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

Untuk menampilkan konten dengan benar dari tepi ke tepi di semua versi Android, ikuti langkah-langkah penyiapan ini. 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() dalam metode Activity.onCreate():

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

Secara default, enableEdgeToEdge() membuat kolom sistem menjadi 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 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 tampilan layar penuh diaktifkan, beberapa konten dan elemen UI aplikasi Anda mungkin dirender di belakang kolom sistem. Untuk mencegah elemen penting atau interaktif terhalang oleh kolom sistem atau tumpang-tindih dengan gestur sistem, Anda perlu menangani inset.

Inset menjelaskan bagian layar yang bersinggungan dengan UI sistem atau gestur sistem. Jenis utama inset 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) berada 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 lanjut.

Mode imersif

Beberapa konten, seperti video atau peta, mendapatkan manfaat dari pengalaman imersif sepenuhnya tempat 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())

Warna dan ikon kolom sistem

Saat menggunakan tampilan layar penuh, latar belakang aplikasi Anda mungkin terlihat di balik kolom sistem, sehingga 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 cahaya default, Anda mungkin perlu menyesuaikannya. Lihat Panduan desain kolom sistem Android dan Panduan desain layar penuh untuk memutuskan kapan harus menggunakan kolom transparan atau 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.

Berikutnya
Tentang WindowInsetsRulers