Mendukung potongan layar

perangkat dengan potongan layar

Potongan layar adalah area di beberapa perangkat yang meluas ke permukaan tampilan untuk memberikan pengalaman dari tepi ke tepi, sekaligus memberikan ruang bagi sejumlah sensor penting di bagian depan perangkat. Android secara resmi mendukung potongan layar di perangkat yang menjalankan Android 9 (API level 28) dan yang lebih tinggi. Perhatikan bahwa produsen perangkat juga dapat memilih untuk mendukung potongan layar di perangkat yang menjalankan Android 8.1 atau yang lebih rendah.

Topik ini menjelaskan cara menerapkan dukungan untuk perangkat yang memiliki potongan layar, termasuk cara menangani area potongan--yakni, persegi panjang dari tepi ke tepi di permukaan tampilan yang berisi potongan.

Yang akan ditemukan di perangkat dengan potongan layar

Untuk memastikan konsistensi dan kompatibilitas aplikasi, perangkat yang menjalankan Android 9 harus memastikan perilaku potongan layar berikut:

  • Satu tepi dapat berisi maksimal satu potongan.
  • Perangkat tidak boleh memiliki lebih dari dua potongan.
  • Perangkat tidak boleh memiliki potongan layar di tepi panjangnya.
  • Dalam orientasi potret tanpa tanda khusus yang ditetapkan, status bar harus meluas hingga setidaknya setinggi potongan.
  • Secara default, dalam orientasi lanskap atau layar penuh, seluruh area potongan harus diberi letterbox.

Memilih cara aplikasi Anda menangani area potongan

Jika tidak ingin konten Anda tumpang-tindih dengan area potongan, biasanya Anda cukup memastikan bahwa konten tidak tumpang-tindih dengan status bar dan menu navigasi. Jika merender konten ke area potongan, Anda dapat menggunakan WindowInsets.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.

Android juga memungkinkan Anda mengontrol apakah konten akan ditampilkan di dalam area potongan. Atribut tata letak jendela layoutInDisplayCutoutMode mengontrol cara konten digambar di area potongan. Anda dapat menetapkan layoutInDisplayCutoutMode ke salah satu nilai berikut:

Anda dapat menetapkan mode potongan secara terprogram atau dengan menetapkan sebuah gaya dalam aktivitas Anda. Contoh di bawah ini menentukan sebuah gaya yang dapat Anda gunakan untuk menerapkan atribut LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES ke aktivitas.

    <style name="ActivityTheme">
      <item name="android:windowLayoutInDisplayCutoutMode">
        shortEdges <!-- default, shortEdges, never -->
      </item>
    </style>
    

Bagian-bagian di bawahnya menjelaskan berbagai mode potongan secara lebih mendetail.

Perilaku default

Secara default, dalam mode potret tanpa tanda khusus yang ditetapkan, status bar di perangkat yang memiliki potongan layar akan diubah ukurannya menjadi setidaknya setinggi potongan, dan konten ditampilkan di area di bawahnya. Dalam mode lanskap atau layar penuh, jendela aplikasi Anda akan diberi letterbox 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 potongan layar dapat menjadi cara tepat untuk memberikan pengalaman dari tepi ke tepi yang lebih imersif kepada pengguna. Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, konten akan meluas ke area potongan di tepi pendek layar baik pada mode potret maupun lanskap, terlepas dari apakah kolom sistem tersembunyi atau terlihat. Perhatikan bahwa jendela tidak dapat meluas ke area potongan di tepi panjang layar. Saat menggunakan mode ini, pastikan tidak ada konten penting yang tumpang-tindih dengan area potongan.

Perhatikan bahwa Android mungkin tidak mengizinkan tampilan konten tumpang-tindih dengan kolom sistem. Untuk mengganti perilaku ini dan memaksa konten meluas ke area potongan, terapkan salah satu tanda berikut ke visibilitas tampilan melalui metode View.setSystemUiVisibility(int):

  • SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
  • SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
  • SYSTEM_UI_FLAG_LAYOUT_STABLE

Berikut beberapa contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES:

konten dirender di area potongan saat dalam mode potret

konten dirender di area potongan saat dalam mode lanskap

Perhatikan bahwa potongan di sudut dianggap berada di tepi pendek, sehingga berlaku perilaku yang sama:

perangkat dengan potongan sudut

Tidak merender konten di area potongan layar

Dengan LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER, jendela tidak diizinkan untuk tumpang-tindih dengan area potongan.

Mode ini sebaiknya digunakan dengan jendela yang untuk sementara menetapkan View.SYSTEM_UI_FLAG_FULLSCREEN atau View.SYSTEM_UI_FLAG_HIDE_NAVIGATION untuk menghindari penerapan tata letak lain dari jendela tersebut saat tanda ini ditetapkan atau dihapus.

Lihat contoh LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER di bawah:

Mode khusus

Beberapa perangkat yang menjalankan Android 8.1 (API level 27) atau yang lebih lama mendukung mode khusus yang memungkinkan pengguna meluaskan aplikasi layar penuh atau lanskap yang diberi letterbox ke area potongan. Mode ini biasanya dikontrol dengan tombol di menu navigasi yang menampilkan dialog yang memerlukan konfirmasi sebelum memperluas layar.

Praktik terbaik untuk dukungan potongan layar

Saat bekerja dengan potongan layar, pastikan untuk mempertimbangkan berikut ini:

  • Jangan biarkan area potongan mengaburkan teks, kontrol, atau informasi penting lain apa pun.
  • Jangan tempatkan atau perluas elemen interaktif apa pun yang memerlukan pengenalan sentuhan halus ke area potongan. Sensitivitas sentuhan mungkin lebih rendah di area potongan.
  • Hindari hard-coding tinggi status bar, karena hal ini dapat menyebabkan konten tumpang-tindih atau terpotong. Jika memungkinkan, gunakan WindowInsetsCompat untuk mengambil tinggi status bar dan menentukan padding yang sesuai untuk diterapkan ke konten Anda.

  • Jangan berasumsi bahwa aplikasi menempati seluruh jendela. Sebagai gantinya, konfirmasikan lokasinya menggunakan View.getLocationInWindow(). Jangan gunakan View.getLocationOnScreen().

  • Pastikan untuk menangani transisi ke dan dari mode layar penuh dengan benar. postingan blog Developer Android ini .

  • Dengan perilaku potongan default dalam mode potret, jika area potongan berada di tepi atas dan jendela tidak menetapkan FLAG_FULLSCREEN atau View.SYSTEM_UI_FLAG_FULLSCREEN, maka jendela dapat meluas ke area potongan. Demikian pula, jika area potongan berada di tepi bawah dan jendela tidak menetapkan View.SYSTEM_UI_FLAG_HIDE_NAVIGATION, jendela dapat meluas ke area potongan. Dalam mode layar penuh atau lanskap, jendela ditempatkan sedemikian rupa sehingga tidak tumpang-tindih dengan area potongan.

  • Gunakan mode potongan shortEdges atau never jika aplikasi Anda perlu bertransisi ke dan dari mode layar penuh. Perilaku potongan default dapat menyebabkan konten di aplikasi Anda bergerak naik dan turun selama transisi, seperti ditunjukkan pada gambar di bawah:

  • Dalam mode layar penuh, berhati-hatilah saat menggunakan koordinat jendela vs koordinat layar, karena aplikasi Anda tidak memenuhi seluruh layar saat diberi letterbox. Karena adanya letterbox ini, koordinat dari asal layar tidak lagi sama dengan koordinat dari asal jendela. Jika diperlukan, Anda dapat mengubah koordinat layar menjadi koordinat tampilan menggunakan getLocationOnScreen(). Gambar di bawah menunjukkan bagaimana koordinat berbeda saat konten diberi letterbox:

    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

menyimulasikan potongan layar di emulator

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

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

Referensi lainnya

Untuk informasi lebih lanjut tentang dukungan potongan layar, lihat link berikut: