Picture-in-picture (PIP) est un type de mode multifenêtre destiné aux activités qui lisent 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 applications ou en parcourant le contenu de l'écran principal.
Points à retenir
- Assurez-vous que les éléments d'interface utilisateur sont masqués et que la lecture de la vidéo se poursuit lorsque l'activité est en mode PIP.
- Désactivez le redimensionnement fluide pour le contenu non vidéo.
- Les activités de lecture vidéo avec une UI minimale offrent la meilleure expérience utilisateur.
- Évitez de montrer autre chose que le contenu vidéo.
Ajouter la prise en charge du mode Picture-in-picture à votre application
Par défaut, le système ne prend pas automatiquement en charge le mode PIP pour les applications. Il doit être déclaré pour prendre en charge cette fonctionnalité.
La fenêtre PIP apparaît au premier plan 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 redimensionner en plein écran, accéder aux paramètres et contrôler la lecture multimédia. Votre application peut ajouter des actions personnalisées et des éléments 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 à l'aide de la télécommande du téléviseur. Si une application dispose d'une session multimédia active, les commandes de lecture, de pause, de titre suivant et de titre précédent s'affichent également. Découvrez comment ajouter ces contrôles.
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, et les détails des petits éléments d'interface utilisateur de la fenêtre PIP peuvent être difficiles à voir.
Commandes PiP par défaut.
Exemple de commandes PiP personnalisées.
Utilisation
Permettez aux utilisateurs de 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 la sortie de la vue actuelle ou le balayage vers le haut pour revenir à l'écran d'accueil.
Voici quelques exemples d'actions possibles :
Une activité peut passer en mode PIP lorsque l'utilisateur appuie sur le bouton Accueil ou balaye l'écran vers le haut pour revenir à l'écran d'accueil. C'est ainsi que Google Maps continue d'afficher les itinéraires pendant que l'utilisateur exécute une autre activité en même temps.
Figure 4 : PIP utilisé pour poursuivre l'expérience de navigation Votre application peut déplacer une vidéo en mode PIP lorsque l'utilisateur revient en arrière depuis 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 un résumé du prochain épisode de la série.
Votre application peut permettre aux utilisateurs d'ajouter du contenu à une file d'attente pendant qu'ils regardent une vidéo. La lecture de la vidéo se poursuit 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 la perturber. Par exemple, si une vidéo se trouve à la fin d'un épisode de contenu, l'entrée en mode PIP lorsque l'utilisateur quitte l'écran d'accueil nécessitera une action supplémentaire de sa part pour revenir en arrière et arrêter la lecture ou naviguer dans les petites commandes.
Dans votre application, un utilisateur peut sélectionner une nouvelle vidéo lorsqu'il recherche du contenu sur l'écran principal, tandis qu'une activité de lecture vidéo est en mode Picture-in-picture. Lisez la nouvelle vidéo dans l'activité de lecture existante en mode plein écran, au lieu de lancer une nouvelle activité qui pourrait dérouter l'utilisateur.
Schémas d'interaction
Les utilisateurs peuvent faire glisser la fenêtre PiP vers un autre emplacement.
Appuyez une fois sur la fenêtre pour afficher un bouton bascule plein écran, un bouton de fermeture, un bouton de paramètres et les actions personnalisées fournies par votre application (par exemple, les commandes de lecture).
Appuyez deux fois sur la fenêtre pour alterner entre la taille actuelle de la fenêtre PIP et sa taille maximale ou minimale. Par exemple, si vous appuyez deux fois sur une fenêtre agrandie, elle est réduite, et inversement.
Rangez la fenêtre en la faisant glisser vers le bord gauche ou droit. Pour désencombrer la fenêtre, appuyez sur la partie visible de la fenêtre encombrée ou faites-la glisser.
Redimensionnez la fenêtre PIP à l'aide du zoom par pincement.
Balayez la fenêtre PIP vers le bas pour la supprimer.
Transitions
Pour améliorer l'expérience utilisateur lors du passage au mode PIP et de la sortie de ce mode, personnalisez les transitions d'entrée et de sortie.
Animation d'entrée fluide en mode PIP
Lorsqu'un utilisateur déclenche le mode PIP, l'activité en cours passe du plein écran à une petite fenêtre, qui continue d'afficher le contenu sans superposer d'UI.
Android 12 a apporté des améliorations esthétiques aux transitions entre les fenêtres plein écran et PIP. Une fois implémentées, ces mises à jour s'adaptent automatiquement aux tablettes et aux appareils pliables.
Sans ces mises à jour, les transitions sont fonctionnelles, mais moins fluides. Par exemple, la fenêtre PIP peut disparaître temporairement pendant la transition.
À partir d'Android 12, l'indicateur PictureInPictureParams.Builder.setAutoEnterEnabled(true) permet des transitions de gestes plus fluides (comme le balayage vers le haut pour revenir à l'écran d'accueil). Nous vous recommandons cette option pour les applications ENTERTAINMENT, COMMUNICATION ou VIDEO_PLAYER.
Sans cet indicateur, les transitions gestuelles réduisent la fenêtre en icône d'application avant qu'elle ne réapparaisse en tant que fenêtre PIP (comme illustré dans la vidéo 1).
Transition moins fluide lorsque le mode PIP n'est pas correctement implémenté avec setAutoEnterEnabled
Expérience de transition soignée avec setAutoEnterEnabled ajouté à l'application.
Des images vidéo fluides
Lorsque nous avons introduit 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 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 : une fois que la fenêtre plein écran est réduite à la taille de la fenêtre PIP, elle est recouverte d'un calque noir avant d'afficher à nouveau la vidéo.
sourceRectHintPour voir un exemple d'animation PIP lorsque sourceRectHint est correctement implémenté, consultez la vidéo 2 de la section précédente.
Consultez l'exemple Picture-in-Picture Android Kotlin pour savoir comment offrir une expérience de transition fluide.
Pour en savoir plus sur l'implémentation du mode PIP, consultez la documentation pour les développeurs sur le mode Picture-in-picture.