Picture-in-picture

Le mode Picture-in-picture (PIP) est un type de mode multifenêtre destiné aux activités qui diffusent des vidéos en plein écran. Elle permet à l'utilisateur de regarder une vidéo dans une petite fenêtre épinglée dans un coin de l'écran tout en naviguant entre les applis ou en parcourant le contenu de l'écran principal.

Figure 1:Vos utilisateurs peuvent poursuivre leur expérience vidéo même lorsqu'ils ne sont pas dans votre application

Points à retenir

  • Assurez-vous que les éléments de l'interface utilisateur sont masqués et que la lecture vidéo se poursuit lorsque l'activité est en mode PiP.
  • Désactiver le redimensionnement fluide pour les contenus autres que vidéo
  • Les activités de lecture vidéo avec une interface utilisateur minimale offrent la meilleure expérience utilisateur.
  • Évitez d'afficher autre chose que le contenu vidéo.

Ajouter la prise en charge de la fonctionnalité Picture-in-picture à votre application

Par défaut, le système n'est pas compatible automatiquement avec le mode PiP pour les applications et doit être déclaré pour prendre en charge cette fonctionnalité.

La fenêtre PiP s'affiche dans la couche supérieure de l'écran, dans un coin choisi par le système.

Commandes

Par défaut, Android fournit des commandes PIP pour fermer la fenêtre, la développer en plein écran, accéder aux paramètres et à la lecture multimédia. Votre application peut ajouter des actions personnalisées et des composants d'icône appropriés pour permettre aux utilisateurs d'interagir avec le contenu PiP.

L'utilisateur peut afficher ces commandes à partir du menu de la fenêtre PiP en appuyant sur la fenêtre sur un appareil mobile ou en sélectionnant le menu à partir de la télécommande du téléviseur. Si une application dispose d'une session multimédia active, les commandes de lecture, de mise en pause, de suivi et de précédent s'affichent également. Découvrez comment ajouter ces commandes.

En mode PiP, votre activité s'affiche dans une petite fenêtre. Dans ce mode, les utilisateurs ne peuvent pas interagir avec les autres éléments d'interface utilisateur de votre application. De plus, les détails des petits éléments d'interface utilisateur dans la fenêtre PiP peuvent être difficiles à voir.

Commandes PiP par défaut.
Exemple de commandes PiP personnalisées.

Utilisation

Autorisez les utilisateurs à continuer à regarder leur vidéo non seulement dans votre application, mais aussi sur leur appareil. Votre application contrôle le moment où l'activité en cours passe en mode PIP. Il peut s'agir d'une interaction telle que quitter la vue actuelle ou balayer l'écran vers le haut pour accéder à l'accueil.

Voici quelques exemples d'actions possibles:

  • Une activité peut passer en mode PiP lorsque l'utilisateur appuie sur le bouton Accueil ou balaie l'écran vers le haut pour accéder à l'accueil. C'est ainsi que Google Maps continue d'afficher les itinéraires lorsque l'utilisateur exécute une autre activité en même temps.

    Figure 4:Utilisation du mode PiP pour poursuivre l'expérience de guidage
  • Votre application peut passer une vidéo en mode PIP lorsque l'utilisateur revient de la vidéo pour parcourir d'autres contenus.

  • Votre application peut passer une vidéo en mode PIP pendant qu'un utilisateur regarde la fin d'un épisode de contenu. L'écran principal affiche des informations promotionnelles ou récapitulatives sur le prochain épisode de la série.

  • Votre application peut permettre aux utilisateurs de mettre en file d'attente du contenu supplémentaire pendant qu'ils regardent une vidéo. La vidéo continue de se lire en mode PIP, tandis que l'écran principal affiche une activité de sélection de contenu.

Utilisez un modèle d'interaction qui complète l'expérience de visionnage sans être perturbateur. Par exemple, si une vidéo est à la fin d'un épisode, l'activation du mode PIP lorsque vous quittez l'écran d'accueil nécessitera une action supplémentaire de l'utilisateur pour revenir et arrêter la lecture ou pour naviguer dans les commandes réduites.

Dans votre application, un utilisateur peut sélectionner une nouvelle vidéo lorsqu'il recherche du contenu sur l'écran principal, alors qu'une activité de lecture vidéo est en mode PIP. Lancez la nouvelle vidéo dans l'activité de lecture existante en mode plein écran, au lieu de lancer une nouvelle activité qui pourrait prêter à confusion.

Modèles d'interaction

Les utilisateurs peuvent faire glisser la fenêtre PiP vers un autre emplacement.

Appuyez une seule fois sur la fenêtre pour afficher un bouton d'activation du plein écran, un bouton de fermeture, un bouton de paramètres et des actions personnalisées fournies par votre application (par exemple, les commandes de lecture).

Figure 5:Commandes PiP par défaut

Appuyez deux fois sur la fenêtre pour basculer entre la taille actuelle de la fenêtre PIP et la taille maximale ou minimale de la fenêtre PIP. Par exemple, si vous appuyez deux fois sur une fenêtre maximisée, elle sera réduite, et inversement.

Figure 6:Basculement entre la taille minimale et maximale de la PIP en appuyant deux fois

Masquer la fenêtre en la faisant glisser vers le bord gauche ou droit. Pour retirer la fenêtre de l'espace de stockage, appuyez sur la partie visible de la fenêtre masquée ou faites-la glisser.

Figure 7:PiP stocké

Redimensionnez la fenêtre PIP à l'aide du pincement pour zoomer.

Balayez la fenêtre PiP vers le bas pour la supprimer.

Figure 8:Balayer l'écran vers le bas

Transitions

Animation fluide de l'entrée en mode PiP

Lorsqu'un utilisateur déclenche le mode PiP, l'activité en cours passe de l'écran plein écran à une petite fenêtre, qui continue d'afficher le contenu sans recouvrir l'UI.

Android 12 a apporté des améliorations esthétiques importantes aux transitions animées entre les fenêtres en plein écran et PiP. Nous vous recommandons vivement d'implémenter toutes les modifications applicables. Une fois que vous l'aurez fait, ces modifications s'adapteront automatiquement aux grands écrans tels que les appareils pliables et les tablettes, sans aucune autre action requise.

Si votre application n'inclut pas ces mises à jour applicables, les transitions PiP restent fonctionnelles, mais les animations sont moins soignées. Par exemple, la transition du mode plein écran au mode PiP peut entraîner la disparition de la fenêtre PiP pendant la transition, avant qu'elle ne réapparaisse une fois la transition terminée.

À partir d'Android 12, l'indicateur PictureInPictureParams.Builder.setAutoEnterEnabled(true) fournit une animation beaucoup plus fluide pour passer au contenu vidéo en mode PIP à l'aide de la navigation par gestes (par exemple, lorsque vous balayez l'écran vers le haut pour accéder à l'accueil depuis l'écran plein écran). Nous vous recommandons de le faire si votre application appartient à la catégorie ENTERTAINMENT, COMMUNICATION ou VIDEO_PLAYER.

Si votre application n'inclut pas cette modification, les transitions PIP avec la navigation par gestes restent fonctionnelles, mais les animations sont moins soignées. La vidéo 1 en est un exemple: la fenêtre se réduit dans l'icône de l'application et disparaît, puis réapparaît une fois la transition terminée.

Expérience de transition moins soignée lorsque setAutoEnterEnabled n'est pas correctement implémenté dans le mode PiP
Ajout d'une expérience de transition soignée avec setAutoEnterEnabled dans l'application.

Visuels vidéo fluides

Lorsque nous avons lancé le mode PiP dans Android 8.0, sourceRectHint indiquait la zone de l'activité visible après la transition vers le mode PiP (par exemple, les limites de la vue vidéo dans un lecteur vidéo). À partir d'Android 12, l'OS utilise sourceRectHint pour implémenter une animation beaucoup plus fluide à la fois lors de l'entrée et de la sortie du mode PiP.

Si votre application ne fournit pas de sourceRectHint approprié, les transitions PIP restent fonctionnelles, mais les animations sont moins soignées. Par exemple, la vidéo 3 montre un exemple moins soigné de transition du mode plein écran au mode PIP: après que la fenêtre plein écran est réduite à la fenêtre PIP, elle est recouverte d'un calque noir avant de révéler à nouveau la vidéo.

Vidéo 3:Expérience de transition moins soignée lorsque sourceRectHint n'est pas correctement implémenté dans le mode Picture-in-picture

Pour voir un exemple de l'animation PiP lorsque sourceRectHint est correctement implémenté, regardez la vidéo 2 de la section précédente.

Consultez l'exemple Android Kotlin PictureInPicture pour activer une expérience de transition soignée.

Pour en savoir plus sur l'implémentation du mode Picture-in-picture, consultez la documentation destinée aux développeurs sur le mode Picture-in-picture.