Potongan layar adalah area di beberapa perangkat yang memanjang ke permukaan layar. Hal ini memungkinkan pengalaman dari tepi ke tepi sekaligus menyediakan ruang untuk sensor penting di bagian depan perangkat.
Android mendukung potongan layar di perangkat yang menjalankan Android 9 (level API 28) dan yang lebih baru. Namun, produsen perangkat juga dapat mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih rendah.
Dokumen ini menjelaskan cara menerapkan dukungan untuk perangkat yang memiliki potongan, termasuk cara menggunakan area potongan—yaitu, persegi panjang tepi ke tepi pada permukaan layar yang berisi potongan.
![Gambar yang menunjukkan contoh potongan layar tengah atas](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-intro.png?authuser=8&hl=id)
Memilih cara aplikasi Anda menangani area potongan
Jika tidak ingin konten Anda tumpang-tindih dengan area potongan, umumnya
cukup memastikan konten Anda tidak tumpang-tindih dengan status bar dan
menu navigasi. Jika Anda merender ke area potongan, gunakan
WindowInsetsCompat.getDisplayCutout()
untuk mengambil objek DisplayCutout
yang berisi inset aman dan kotak pembatas untuk setiap potongan. API ini memungkinkan
Anda memeriksa apakah konten tumpang-tindih dengan potongan sehingga Anda dapat
mengubah posisi jika perlu.
Anda juga dapat menentukan apakah konten diletakkan di belakang area potongan. Atribut
tata letak jendela layoutInDisplayCutoutMode
mengontrol cara konten Anda digambar di area potongan.
Anda dapat menetapkan layoutInDisplayCutoutMode
ke salah satu nilai berikut:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
: konten dirender ke area potongan saat potongan layar berada di kolom sistem. Jika tidak, jendela tidak akan tumpang-tindih dengan potongan layar; misalnya, konten mungkin akan diberi tampilan lebar saat ditampilkan dalam mode lanskap. Jika aplikasi Anda menargetkan SDK 35, ini akan ditafsirkan sebagaiALWAYS
untuk jendela yang tidak mengambang.LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
: konten selalu diizinkan diperluas ke area potongan. Jika aplikasi Anda menargetkan SDK 35 dan berjalan di perangkat Android 15, mode ini adalah satu-satunya mode yang diizinkan untuk jendela yang tidak mengambang untuk memastikan tampilan tepi-ke-tepi.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
: konten dirender di area potongan dalam mode potret dan lanskap. Jangan gunakan untuk jendela mengambang. Jika aplikasi Anda menargetkan SDK 35, ini akan ditafsirkan sebagaiALWAYS
untuk jendela yang tidak mengambang.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
: konten tidak pernah dirender ke area potongan. Jika aplikasi Anda menargetkan SDK 35, parameter ini akan ditafsirkan sebagaiALWAYS
untuk jendela yang tidak mengambang.
Anda dapat menetapkan mode potongan secara terprogram atau dengan menetapkan
gaya dalam aktivitas Anda. Contoh
berikut menentukan gaya untuk menerapkan atribut LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
ke aktivitas.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> shortEdges <!-- default, shortEdges, or never --> </item> </style>
Bagian berikut ini menjelaskan berbagai mode potongan secara lebih mendetail.
Perilaku default
Jika aplikasi Anda menargetkan SDK 35 dan berjalan di perangkat Android 15,
LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
adalah perilaku default, dan
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
ditafsirkan sebagai
LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
untuk jendela yang tidak mengambang.
Jika tidak, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
adalah default.
Merender konten di area potongan tepi pendek
Jika aplikasi Anda menargetkan SDK 35 dan berjalan di perangkat Android 15,
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
akan ditafsirkan sebagai
LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
untuk jendela yang tidak mengambang.
Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
, konten akan diperluas ke area potongan di tepi pendek layar dalam
potret dan lanskap, terlepas dari apakah kolom sistem tersembunyi atau
terlihat. Saat menggunakan mode ini, pastikan tidak ada konten penting yang tumpang-tindih dengan
area potongan.
Gambar berikut adalah contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
untuk perangkat dalam mode potret:
![Gambar yang menampilkan konten dirender di area potongan saat dalam mode potret](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-short-edges-1.png?authuser=8&hl=id)
Gambar berikut adalah contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
untuk perangkat dalam mode lanskap:
![Gambar yang menampilkan konten dirender di area potongan saat dalam mode lanskap](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-short-edges-2.png?authuser=8&hl=id)
Dalam mode ini, jendela akan memanjang di bawah potongan di tepi pendek layar pada potret dan lanskap, terlepas dari apakah jendela menyembunyikan kolom sistem atau tidak.
Potongan di sudut dianggap berada di tepi pendek:
![Gambar yang menampilkan perangkat dengan potongan sudut](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-corner.png?authuser=8&hl=id)
Tidak merender konten di area potongan layar
Jika aplikasi Anda menargetkan SDK 35 dan berjalan di perangkat Android 15,
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
akan ditafsirkan sebagai
LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
untuk jendela yang tidak mengambang.
Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
, jendela tidak akan diizinkan
tumpang-tindih dengan area potongan.
Berikut adalah contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
dalam
potret:
![Gambar yang menampilkan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER untuk potret](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-never.png?authuser=8&hl=id)
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
untuk mode potret.
Berikut adalah contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
dalam
mode lanskap:
![Gambar yang menampilkan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER untuk lanskap](https://developer.android.com/static/develop/ui/views/layout/display-cutout/images/cutout-never-landscape.png?authuser=8&hl=id)
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
dalam mode lanskap.
Praktik terbaik untuk dukungan potongan layar
Saat menggunakan potongan layar, pertimbangkan hal berikut:
- Perhatikan penempatan elemen penting pada UI. Jangan biarkan area potongan mengaburkan teks, kontrol, atau informasi penting lainnya.
- Jangan tempatkan atau perluas elemen interaktif apa pun yang memerlukan pengenalan sentuhan halus ke area potongan. Sensitivitas sentuh mungkin lebih rendah di area potongan.
Jika memungkinkan, gunakan
WindowInsetsCompat
untuk mengambil tinggi status bar dan menentukan padding yang sesuai untuk diterapkan ke konten. Hindari melakukan hardcode tinggi status bar, karena dapat menyebabkan konten yang tumpang-tindih atau terpotong.Gambar 7. Gunakan WindowInsetsCompat
untuk menghindari tumpang-tindih atau memotong konten.Gunakan
View.getLocationInWindow()
untuk menentukan banyaknya ruang jendela yang digunakan aplikasi Anda. Jangan berasumsi bahwa aplikasi menggunakan seluruh jendela, dan jangan gunakanView.getLocationOnScreen()
.Gunakan mode potongan
always
,shortEdges
, ataunever
jika aplikasi Anda perlu beralih ke dan dari mode imersif. Perilaku potongan default dapat menyebabkan konten di aplikasi Anda dirender di area potongan saat kolom sistem ada, tetapi tidak saat dalam mode imersif. Hal ini menyebabkan konten bergerak naik dan turun selama transisi, seperti yang ditunjukkan dalam contoh berikut.Gambar 8. Contoh konten yang bergerak ke atas dan ke bawah selama transisi. Dalam mode imersif, berhati-hatilah saat menggunakan koordinat jendela versus koordinat layar, karena aplikasi Anda tidak menggunakan seluruh layar saat diberi tampilan lebar. Karena tampilan lebar, koordinat dari asal layar tidak sama dengan koordinat dari asal jendela. Anda dapat mengubah koordinat layar menjadi koordinat tampilan sesuai kebutuhan menggunakan
getLocationOnScreen()
. Gambar berikut menunjukkan perbedaan koordinat saat konten diberi tampilan lebar:Gambar 9. Jendela versus koordinat layar saat konten diberi tampilan lebar. Saat menangani
MotionEvent
, gunakanMotionEvent.getX()
danMotionEvent.getY()
untuk menghindari masalah koordinat serupa. Jangan gunakanMotionEvent.getRawX()
atauMotionEvent.getRawY()
.
Menguji cara konten dirender
Uji semua layar dan pengalaman aplikasi Anda. Uji di perangkat dengan jenis potongan yang berbeda, jika memungkinkan. Jika tidak memiliki perangkat dengan potongan, Anda dapat menyimulasikan konfigurasi potongan umum di perangkat atau emulator yang menjalankan Android 9 atau yang lebih tinggi dengan melakukan hal berikut:
- Aktifkan Opsi developer.
- Di layar Developer options, scroll ke bawah ke bagian Drawing, lalu pilih Simulasikan tampilan dengan potongan.
Pilih jenis potongan.
Gambar 10. Opsi developer untuk menguji cara konten dirender.
Referensi tambahan
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
- LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT