Bild im Bild

„Bild im Bild“ (BiB) ist ein Mehrfenstermodus für Aktivitäten, bei denen Videos im Vollbildmodus wiedergegeben werden. Mit der Funktion „Bild im Bild“ können Nutzer sich ein Video in einem kleinen Fenster ansehen, das an einer Ecke des Bildschirms angepinnt ist, während sie zwischen Apps wechseln oder sich Inhalte auf dem Hauptbildschirm ansehen.

Fazit

• Achte darauf, dass UI-Elemente ausgeblendet werden und die Videowiedergabe fortgesetzt wird, wenn sich die Aktivität im BiB-Modus befindet.
• Nahtlose Größenanpassung für Inhalte, die keine Videos sind, deaktivieren
• Die beste Nutzererfahrung wird durch Videowiedergabeaktivitäten mit minimaler Benutzeroberfläche erzielt.
• Es darf nichts anderes als der Videoinhalt zu sehen sein.

Unterstützung für den Bild-im-Bild-Modus in Ihre App einfügen

Standardmäßig wird der PiP-Modus für Apps nicht automatisch unterstützt. Die Unterstützung muss deklariert werden.

Das BiB-Fenster wird in der obersten Ebene des Bildschirms in einer vom System ausgewählten Ecke angezeigt.

Steuerelemente

Standardmäßig bietet Android BiB-Steuerelemente zum Schließen des Fensters, zum Zurückkehren zum Vollbildmodus, für Einstellungen und für die Medienwiedergabe. Ihre App kann benutzerdefinierte Aktionen und entsprechende Symbol-Assets hinzufügen, damit Nutzer mit den PiP-Inhalten interagieren können.

Der Nutzer kann diese Steuerelemente über das Menü des BiB-Fensters aufrufen, indem er auf einem Mobilgerät auf das Fenster tippt oder das Menü mit der TV-Fernbedienung auswählt. Wenn eine App eine aktive Mediensitzung hat, werden auch Steuerelemente für „Wiedergabe“, „Pause“, „Weiter“ und „Zurück“ angezeigt. Weitere Informationen zum Hinzufügen dieser Steuerelemente

Im BiB-Modus wird Ihre Aktivität in einem kleinen Fenster angezeigt. Nutzer können in diesem Modus nicht mit den anderen UI-Elementen Ihrer App interagieren und die Details kleiner UI-Elemente im BiB-Fenster sind möglicherweise schwer zu erkennen.

Nutzung

Nutzer sollten Videos nicht nur in Ihrer App, sondern auch auf anderen Geräten weiter ansehen können. Ihre App steuert, wann die aktuelle Aktivität in den BiB-Modus wechselt. Dies kann durch eine Interaktion wie das Verlassen der aktuellen Ansicht oder das Wischen nach oben zum Startbildschirm erfolgen.

Hier sind einige Beispiele für mögliche Aktionen:

• Eine Aktivität kann in den BiB-Modus wechseln, wenn der Nutzer auf die Home-Schaltfläche tippt oder nach oben zur Startseite wischt. So werden in Google Maps weiterhin Wegbeschreibungen angezeigt, während der Nutzer gleichzeitig eine andere Aktivität ausführt.

  

• Deine App kann ein Video in den BiB-Modus verschieben, wenn der Nutzer vom Video zurückkehrt, um andere Inhalte zu suchen.

• Ihre App kann ein Video in den BiB-Modus wechseln, während ein Nutzer das Ende einer Folge ansieht. Auf dem Hauptbildschirm werden Werbe- oder Zusammenfassungsinformationen zur nächsten Folge der Serie angezeigt.

• Ihre App kann Nutzern die Möglichkeit bieten, zusätzliche Inhalte in die Warteschlange zu stellen, während sie ein Video ansehen. Das Video wird im BiB-Modus weiter abgespielt, während auf dem Hauptbildschirm eine Aktivität zur Auswahl von Inhalten angezeigt wird.

Verwende ein Interaktionsmuster, das die Wiedergabe ergänzt, ohne störend zu sein. Wenn sich ein Video beispielsweise am Ende einer Folge befindet und der Nutzer den Startbildschirm verlässt, während das Video im BiB-Modus wiedergegeben wird, muss er zusätzliche Aktionen ausführen, um zur App zurückzukehren und die Wiedergabe zu beenden oder die kleinen Steuerelemente zu verwenden.

In Ihrer App wählt ein Nutzer möglicherweise ein neues Video aus, während er auf dem Hauptbildschirm nach Inhalten sucht und die Videowiedergabe im BiB-Modus läuft. Spiele das neue Video im Vollbildmodus in der vorhandenen Wiedergabeaktivität ab, anstatt eine neue Aktivität zu starten, die den Nutzer verwirren könnte.

Interaktionsmuster

Nutzer können das BiB-Fenster an eine andere Stelle ziehen.

Einmal tippen: Wenn Sie einmal auf das Fenster tippen, werden eine Vollbild-Umschaltfläche, eine Schließen-Schaltfläche, eine Einstellungen-Schaltfläche und benutzerdefinierte Aktionen angezeigt, die von Ihrer App bereitgestellt werden (z. B. Steuerelemente für die Wiedergabe).

Doppeltippen Sie auf das Fenster, um zwischen der aktuellen „Bild im Bild“-Größe und der maximalen oder minimalen „Bild im Bild“-Größe zu wechseln. Wenn Sie beispielsweise auf ein maximiertes Fenster doppeltippen, wird es minimiert. Das Gegenteil ist ebenfalls möglich.

Verstauen Sie das Fenster, indem Sie es an den linken oder rechten Rand ziehen. Wenn Sie das Fenster wieder einblenden möchten, tippen Sie entweder auf den sichtbaren Teil des minimierten Fensters oder ziehen Sie es heraus.

Ändern Sie die Größe des BiB-Fensters durch Auseinander- und Zusammenziehen.

Wischen Sie das BiB-Fenster nach unten, um es zu schließen.

Übergänge

Um die Nutzerfreundlichkeit beim Wechsel in den und aus dem BiB-Modus zu verbessern, kannst du die Ein- und Ausblendübergänge anpassen.

Sanfter Übergang zur Bild-im-Bild-Animation

Wenn ein Nutzer den BiB-Modus auslöst, wird die aktuelle Aktivität vom Vollbildmodus in ein kleines Fenster verkleinert, in dem die Inhalte ohne Überlagerung von UI-Elementen weiter angezeigt werden.

In Android 12 wurden die Übergänge zwischen Vollbild- und BiB-Fenstern optisch verbessert. Nach der Implementierung werden diese Updates automatisch auf Tablets und faltbare Geräte skaliert.

Ohne diese Updates funktionieren Übergänge zwar, sind aber weniger ausgefeilt. Das BiB-Fenster kann beispielsweise während des Übergangs vorübergehend verschwinden.

Ab Android 12 sorgt das Flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) für flüssigere Übergänge bei Gesten wie dem Wischen nach oben zum Startbildschirm. Wir empfehlen dies für ENTERTAINMENT-, COMMUNICATION- oder VIDEO_PLAYER-Apps.

Ohne dieses Flag wird das Fenster bei Gestenübergängen auf das App-Symbol verkleinert, bevor es als BiB-Fenster wieder angezeigt wird (siehe Video 1).

Flüssige Videowiedergabe

Als wir BiB in Android 8.0 eingeführt haben, wurde mit sourceRectHint der Bereich der Aktivität angegeben, der nach dem Übergang in den BiB-Modus sichtbar ist, z. B. die Grenzen der Videoansicht in einem Videoplayer. Ab Android 12 verwendet das Betriebssystem sourceRectHint, um sowohl beim Aufrufen als auch beim Beenden des BiB-Modus eine viel flüssigere Animation zu ermöglichen.

Wenn Ihre App keine geeignete sourceRectHint bereitstellt, funktionieren die BiB-Übergänge weiterhin, aber die Animationen sind weniger ausgereift. In Video 3 ist beispielsweise ein weniger ausgereiftes Beispiel für einen Übergang vom Vollbild- zum BiB-Modus zu sehen: Nachdem das Vollbildfenster zum BiB-Fenster verkleinert wurde, wird es von einem schwarzen Overlay verdeckt, bevor das Video wieder angezeigt wird.

Ein Beispiel dafür, wie die BiB-Animation aussieht, wenn sourceRectHint richtig implementiert ist, finden Sie im Video 2 im vorherigen Abschnitt.

Das Android Kotlin PictureInPicture-Beispiel kann als Referenz für die Aktivierung eines reibungslosen Übergangs dienen.

Weitere Informationen zur Implementierung von BiB finden Sie in der Entwicklerdokumentation zu Bild-im-Bild.