Picture-in-picture

Picture-in-picture (PiP) adalah jenis mode multi-aplikasi yang ditujukan untuk aktivitas yang memutar video layar penuh. Fitur ini memungkinkan pengguna menonton video di jendela kecil yang disematkan ke sudut layar sambil beralih antar-aplikasi atau menjelajahi konten di layar utama.

Gambar 1: Pengguna dapat melanjutkan pengalaman video mereka bahkan saat tidak menggunakan aplikasi Anda

Takeaway

  • Pastikan elemen UI disembunyikan dan pemutaran video berlanjut saat aktivitas dalam mode PiP.
  • Menonaktifkan pengubahan ukuran yang lancar untuk konten non-video.
  • Aktivitas pemutaran video dengan UI minimal akan memberikan pengalaman pengguna terbaik.
  • Hindari menampilkan apa pun kecuali konten video.

Menambahkan dukungan picture-in-picture ke aplikasi Anda

Secara default, sistem tidak otomatis mendukung PiP untuk aplikasi dan harus dideklarasikan untuk mendukung fitur tersebut.

Jendela PiP akan muncul di lapisan paling atas pada layar, di sudut yang dipilih oleh sistem.

Kontrol

Secara default, Android menyediakan kontrol PiP untuk menutup jendela, memperluasnya kembali ke layar penuh, setelan, dan pemutaran media. Aplikasi Anda dapat menambahkan tindakan kustom dan aset ikon yang sesuai untuk memungkinkan pengguna berinteraksi dengan konten PiP.

Pengguna dapat menampilkan kontrol ini dari menu jendela PiP dengan mengetuk jendela di perangkat seluler atau memilih menu dari remote TV. Jika aplikasi memiliki sesi media aktif, kontrol untuk putar, jeda, berikutnya, dan sebelumnya juga akan ditampilkan. Baca cara menambahkan kontrol tersebut.

Dalam mode PiP, aktivitas akan ditampilkan di jendela kecil. Pengguna tidak dapat berinteraksi dengan elemen UI lainnya di aplikasi Anda dalam mode ini, dan detail elemen UI kecil di jendela PiP mungkin sulit dilihat.

Gambar 2: Kontrol PiP default


Gambar 3: Contoh kontrol PiP kustom

Transisi

Masuk halus ke animasi PiP

Pengguna yang memicu mode PiP menyebabkan aktivitas saat ini menyusut dari layar penuh ke jendela kecil, yang terus menampilkan konten tanpa menempatkan UI apa pun.

Android 12 menambahkan peningkatan tampilan yang signifikan pada transisi animasi antara jendela layar penuh dan PiP. Sebaiknya terapkan semua perubahan yang berlaku. Setelah melakukannya, perubahan ini akan otomatis diskalakan ke layar besar seperti perangkat foldable dan tablet tanpa perlu tindakan lebih lanjut.

Jika aplikasi Anda tidak menyertakan update yang berlaku ini, transisi PiP akan tetap berfungsi, tetapi animasinya kurang rapi. Misalnya, transisi dari layar penuh ke mode PiP dapat menyebabkan jendela PiP menghilang selama transisi sebelum muncul kembali saat transisi selesai.

Mulai Android 12, flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) menyediakan animasi yang jauh lebih lancar untuk bertransisi ke konten video dalam mode PiP menggunakan navigasi gestur—misalnya, saat menggeser ke layar utama dari layar penuh. Sebaiknya gunakan opsi ini jika aplikasi Anda termasuk dalam kategori aplikasi ENTERTAINMENT, COMMUNICATION, atau VIDEO_PLAYER.

Jika aplikasi Anda tidak menyertakan perubahan ini, transisi PiP dengan navigasi gestur tetap berfungsi, tetapi animasinya kurang rapi. Video 1 menunjukkan contohnya: jendela menyusut menjadi ikon aplikasi dan menghilang, lalu muncul kembali saat transisi selesai.

Video 1: Pengalaman transisi yang kurang sempurna saat PiP tidak menerapkan setAutoEnterEnabled dengan benar

Video 2 menunjukkan contoh transisi yang sama, tetapi dengan menambahkan setAutoEnterEnabled ke aplikasi.

Video 2: Pengalaman transisi yang sempurna

Visual video yang halus

Saat kami memperkenalkan PiP di Android 8.0, sourceRectHint menunjukkan area aktivitas yang terlihat setelah transisi ke PiP—misalnya, batas tampilan video di pemutar video. Mulai Android 12, OS menggunakan sourceRectHint untuk menerapkan animasi yang jauh lebih lancar saat masuk dan keluar dari mode PiP.

Jika aplikasi Anda tidak menyediakan sourceRectHint yang tepat, transisi PiP akan tetap berfungsi, tetapi animasinya kurang rapi. Misalnya, video 3 menampilkan contoh transisi dari layar penuh ke mode PiP yang kurang rapi: setelah jendela layar penuh dikecilkan ke jendela PiP, jendela akan tertutupi oleh overlay hitam sebelum menampilkan video sekali lagi.

Video 3: Pengalaman transisi yang kurang sempurna saat PiP tidak menerapkan sourceRectHint dengan benar

Untuk melihat contoh tampilan animasi PiP saat sourceRectHint diimplementasikan dengan benar, lihat video 2 di bagian sebelumnya.

Lihat contoh PictureInPicture Android Kotlin sebagai referensi untuk memungkinkan pengalaman transisi yang disempurnakan.

Penggunaan

Memungkinkan pengguna untuk terus menonton video mereka tidak hanya dalam aplikasi Anda, tetapi juga di seluruh perangkat mereka. Aplikasi Anda mengontrol kapan aktivitas saat ini memasuki mode PiP–ini dapat berupa interaksi seperti keluar dari tampilan saat ini atau menggeser ke atas untuk membuka layar utama.

Berikut beberapa contoh tindakan yang dapat dilakukan:

  • Suatu aktivitas dapat memasuki mode PiP saat pengguna mengetuk tombol layar utama atau menggeser ke atas ke layar utama. Ini adalah cara Google Maps terus menampilkan rute saat pengguna menjalankan aktivitas lain secara bersamaan.

    Gambar 4: PiP digunakan untuk melanjutkan pengalaman pemilihan rute

  • Aplikasi dapat memindahkan video ke mode PiP saat pengguna kembali dari video untuk menjelajahi konten lain.

  • Aplikasi dapat mengalihkan video ke mode PiP saat pengguna menonton bagian akhir sebuah episode konten. Layar utama menampilkan informasi promosi atau ringkasan tentang episode berikutnya dalam serial.

  • Aplikasi dapat memberi pengguna cara mengantrekan konten tambahan saat menonton video. Video terus diputar dalam mode PiP sementara layar utama menampilkan aktivitas pemilihan konten.

Manfaatkan pola interaksi yang melengkapi pengalaman menonton tanpa mengganggu. Misalnya, jika video berada di akhir episode konten, memasuki PiP saat keluar dari layar utama akan memerlukan tindakan pengguna tambahan untuk kembali dan menghentikan pemutaran atau menavigasi kontrol kecil.

Di aplikasi, pengguna dapat memilih video baru saat menjelajahi konten di layar utama, selagi aktivitas pemutaran video berlangsung dalam mode PiP. Putar video baru dalam aktivitas pemutaran yang ada dalam mode layar penuh, bukan meluncurkan aktivitas baru yang dapat membingungkan pengguna.

Pengguna dapat menarik jendela PiP ke lokasi lain.

  • Ketuk satu kali jendela untuk menampilkan tombol layar penuh, tombol tutup, tombol setelan, dan tindakan kustom yang disediakan oleh aplikasi Anda (misalnya, kontrol putar).

    Gambar 5: Kontrol PiP default

  • Ketuk dua kali jendela untuk beralih antara ukuran PiP saat ini dan ukuran PiP maksimum atau minimum—misalnya, mengetuk dua kali jendela yang dimaksimalkan akan meminimalkannya, dan hal sebaliknya juga akan berlaku.

    Gambar 6: Beralih antara PiP ukuran minimum dan maksimum dengan mengetuk dua kali

  • Tempelkan jendela dengan menariknya ke tepi kiri atau kanan. Untuk membuka jendela, ketuk bagian yang terlihat di jendela yang disembunyikan, atau tarik keluar.

    Gambar 7: PiP disimpan

  • Ubah ukuran jendela PiP menggunakan cubit untuk zoom.

  • Geser PiP ke bawah untuk menghapus jendela.

    Gambar 8: Menggeser ke bawah

Untuk mengetahui informasi selengkapnya tentang cara menerapkan PiP, lihat dokumentasi developer Picture-in-picture.