Cutout di Compose

Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan layar. Potongan layar memungkinkan pengalaman dari tepi ke tepi sekaligus memberikan ruang untuk sensor penting di bagian depan perangkat.

Android mendukung potongan layar di perangkat yang menjalankan Android 9 (API level 28) dan yang lebih tinggi. Namun, produsen perangkat juga dapat mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih rendah.

Halaman ini menjelaskan cara menerapkan dukungan untuk perangkat dengan potongan layar di Compose, termasuk cara menggunakan area potongan—yaitu, persegi panjang dari tepi ke tepi di permukaan layar yang berisi potongan.

Kasus default

Aplikasi yang menargetkan API level 34 atau yang lebih rendah, atau Aktivitas yang tidak memanggil enableEdgeToEdge, tidak akan menggambar ke dalam wilayah cutout secara default, kecuali jika aplikasi menggambar ke dalam panel sistem yang berisi cutout layar.

Aplikasi yang menargetkan API level 35 atau yang lebih tinggi di perangkat yang menjalankan Android 15 atau yang lebih tinggi, atau Aktivitas yang memanggil enableEdgeToEdge, menggambar ke dalam area cutout.

Dengan kata lain, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, dan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER ditafsirkan sebagai LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS untuk jendela non-mengambang di aplikasi yang menargetkan API level 35 atau yang lebih tinggi di perangkat yang menjalankan Android 15 atau yang lebih tinggi.

Menangani informasi potongan secara manual

Anda harus menangani informasi potongan untuk mencegah area potongan mengaburkan teks, kontrol, atau elemen interaktif penting yang memerlukan pengenalan sentuhan halus (sensitivitas sentuh mungkin lebih rendah di area potongan). Saat menangani potongan, jangan hardcode tinggi status bar, karena hal ini dapat menyebabkan konten tumpang-tindih atau terpotong. Sebagai gantinya, tangani potongan dengan salah satu cara berikut:

• Menggunakan WindowInsets.displayCutout, WindowInsets.safeContent, atau WindowInsets.safeDrawing

• Mengakses objek Path potongan dengan LocalView.current.rootWindowInsets.displayCutout

Untuk Compose, sebaiknya gunakan displayCutout, safeContent, atau safeDrawing untuk menangani inset cutout di composable Anda. Pendekatan ini memungkinkan Anda mematuhi padding cutout tampilan jika diperlukan, atau mengabaikannya jika tidak diperlukan.

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Menguji cara konten dirender dengan cutout

Pastikan untuk menguji semua layar dan pengalaman aplikasi Anda. Uji di perangkat dengan berbagai jenis potongan, jika memungkinkan. Jika tidak memiliki perangkat dengan potongan layar, Anda dapat menyimulasikan konfigurasi potongan layar umum di perangkat atau emulator apa pun yang menjalankan Android 9 atau yang lebih tinggi dengan melakukan hal berikut:

1. Aktifkan Opsi developer.
2. Di layar Developer options, scroll ke bawah ke bagian Drawing dan pilih Simulate a display with a cutout.
3. Pilih jenis potongan.