Picture-in-picture

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

Poin-poin penting

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

Menambahkan dukungan picture-in-picture ke aplikasi Anda

Secara default, sistem tidak otomatis mendukung PiP untuk aplikasi dan perlu dideklarasikan untuk mendukung fitur ini.

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

Kontrol

Secara default, Android menyediakan kontrol PiP untuk menutup jendela, meluaskannya 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 ditampilkan. Baca cara menambahkan kontrol ini.

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

Penggunaan

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

Berikut beberapa contoh kemungkinan tindakan:

• Aktivitas dapat memasuki mode PiP saat pengguna mengetuk tombol layar utama atau menggeser ke atas untuk beralih ke layar utama. Beginilah cara Google Maps terus menampilkan rute saat pengguna menjalankan aktivitas lain secara bersamaan.

  

• 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.

Gunakan 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 Anda, pengguna dapat memilih video baru saat mencari 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.

Pola interaksi

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).

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 meminimalkan jendela tersebut, dan sebaliknya.

Sembunyikan jendela dengan menariknya ke tepi kiri atau kanan. Untuk membuka jendela, ketuk bagian yang terlihat dari jendela yang disembunyikan atau tarik.

Ubah ukuran jendela PiP menggunakan cubit untuk zoom.

Geser PiP ke bawah untuk menghapus jendela.

Transisi

Untuk membuat pengalaman pengguna yang lebih baik saat beralih ke dan keluar dari mode PiP, sesuaikan transisi masuk dan keluar.

Animasi masuk ke PiP yang mulus

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

Android 12 memperkenalkan peningkatan tampilan pada transisi antara jendela layar penuh dan PiP. Setelah diterapkan, pembaruan ini akan otomatis menyesuaikan skala untuk tablet dan perangkat foldable.

Tanpa pembaruan ini, transisi berfungsi, tetapi kurang optimal. Misalnya, jendela PiP mungkin menghilang sementara selama transisi.

Mulai Android 12, tanda PictureInPictureParams.Builder.setAutoEnterEnabled(true) memberikan transisi gestur yang lebih lancar (seperti menggeser ke atas untuk kembali ke layar utama). Kami merekomendasikan hal ini untuk aplikasi ENTERTAINMENT, COMMUNICATION, atau VIDEO_PLAYER.

Tanpa tanda ini, transisi gestur akan mengecilkan jendela menjadi ikon aplikasi sebelum muncul kembali sebagai jendela PiP (seperti yang ditunjukkan dalam Video 1).

Visual video yang lancar

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 memasuki dan keluar dari mode PiP.

Jika aplikasi Anda tidak menyediakan sourceRectHint yang tepat, transisi PiP masih berfungsi, tetapi animasinya kurang sempurna. Misalnya, video 3 menampilkan contoh transisi dari mode layar penuh ke mode PiP yang kurang sempurna: setelah jendela layar penuh mengecil menjadi jendela PiP, jendela tersebut ditutupi oleh overlay hitam sebelum menampilkan video sekali lagi.

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

Lihat contoh PictureInPicture Kotlin Android sebagai referensi untuk mengaktifkan pengalaman transisi yang lancar.

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