Mendukung potongan layar

Coba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan potongan layar di Compose.

Potongan layar adalah area di beberapa perangkat yang memanjang ke permukaan tampilan. 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 (API level 28) dan yang lebih baru. Namun, produsen perangkat juga dapat mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih lama.

Dokumen ini menjelaskan cara mengimplementasikan dukungan untuk perangkat yang memiliki potongan, termasuk cara menggunakan area potongan—yaitu, persegi panjang dari tepi ke tepi pada permukaan layar yang berisi potongan.

Gambar yang menunjukkan contoh potongan layar bagian tengah atas
Gambar 1. 1 Potongan tampilan.

Memilih cara aplikasi Anda menangani area potongan

Jika Anda tidak ingin konten tumpang-tindih dengan area potongan, biasanya Anda cukup memastikan konten 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 posisinya jika perlu.

Anda juga dapat menentukan apakah konten berada di belakang area potongan. Atribut tata letak jendela layoutInDisplayCutoutMode mengontrol cara menggambar konten Anda di area potongan. Anda dapat menetapkan layoutInDisplayCutoutMode ke salah satu nilai berikut:

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

Secara default, dalam mode potret tanpa tanda khusus yang disetel, status bar di perangkat dengan potongan layar akan diubah ukurannya menjadi setidaknya setinggi potongan, dan konten Anda ditampilkan di area di bawahnya. Dalam mode lanskap atau layar penuh, jendela aplikasi Anda akan diberi tampilan lebar sehingga tidak ada konten yang ditampilkan di area potongan.

Merender konten di area potongan tepi pendek

Untuk beberapa konten, seperti video, foto, peta, dan game, rendering di area terpotong dapat menjadi cara yang tepat untuk memberikan pengalaman dari tepi ke tepi ke tepi yang lebih imersif bagi pengguna. Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, konten diperluas ke area potongan di tepi pendek tampilan dalam potret dan lanskap, terlepas dari apakah kolom sistem disembunyikan 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 yang dirender ke area potongan saat dalam mode potret
Gambar 2. Konten dirender ke area potongan saat dalam mode potret.

Gambar berikut adalah contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES untuk perangkat dalam mode lanskap:

Gambar yang menampilkan konten dirender ke area potongan saat dalam mode lanskap
Gambar 3. Konten dirender ke area potongan saat berada dalam mode lanskap.

Dalam mode ini, jendela memanjang di bawah potongan di tepi pendek layar dalam mode potret dan lanskap, terlepas dari apakah jendela menyembunyikan kolom sistem atau tidak.

Potongan di sudut dianggap berada di tepi pendek:

Gambar yang menunjukkan perangkat dengan potongan sudut
Gambar 4. Perangkat dengan potongan sudut.

Tidak merender konten di area potongan layar

Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER, jendela tidak akan pernah 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
Gambar 5. Contoh 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
Gambar 6. Contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER dalam mode lanskap.

Praktik terbaik untuk dukungan potongan layar

Saat bekerja dengan potongan layar, pertimbangkan hal berikut:

  • Perhatikan penempatan elemen penting UI. Jangan biarkan area cut-out mengaburkan teks, kontrol, atau informasi penting lainnya.
  • Jangan menempatkan atau memperluas elemen interaktif apa pun yang memerlukan pengenalan sentuhan ke area potongan. Sensitivitas sentuhan mungkin lebih rendah di area pemotongan.
  • Jika memungkinkan, gunakan WindowInsetsCompat untuk mengambil tinggi status bar dan menentukan padding yang sesuai untuk diterapkan ke konten Anda. Hindari melakukan hardcode tinggi status bar karena dapat menyebabkan konten tumpang-tindih atau terpotong.

    Gambar yang menampilkan konten yang dipotong di bagian atas untuk penyiapan inset yang tidak tepat
    Gambar 7. Gunakan WindowInsetsCompat untuk menghindari tumpang tindih atau pemotongan konten.
  • Gunakan View.getLocationInWindow() untuk menentukan banyaknya ruang jendela yang digunakan aplikasi Anda. Jangan berasumsi bahwa aplikasi menggunakan seluruh jendela, dan jangan gunakan View.getLocationOnScreen().

  • Gunakan mode potongan shortEdges atau never jika aplikasi Anda perlu beralih ke dan keluar 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 turun selama transisi, seperti yang ditunjukkan dalam contoh berikut.

    Gambar yang menampilkan konten yang bergerak naik dan turun selama transisi.
    Gambar 8. Contoh konten yang bergerak naik dan turun selama transisi.
  • Dalam mode imersif, berhati-hatilah saat menggunakan koordinat jendela versus layar, karena aplikasi Anda tidak menggunakan seluruh layar saat dijadikan tampilan lebar. Karena adanya 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 yang menampilkan koordinat jendela versus layar saat konten diberi tampilan lebar.
    Gambar 9. Koordinat jendela versus layar saat konten diberi tampilan lebar.
  • Saat menangani MotionEvent, gunakan MotionEvent.getX() dan MotionEvent.getY() untuk menghindari masalah koordinat serupa. Jangan gunakan MotionEvent.getRawX() atau MotionEvent.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 yang memiliki potongan, Anda dapat menyimulasikan konfigurasi potongan umum pada 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 cut.
  3. Pilih jenis potongan.

    Gambar yang menunjukkan cara menyimulasikan potongan layar di emulator
    Gambar 10. Opsi developer untuk menguji cara konten Anda dirender.

Referensi lainnya