Bild im Bild

Der Bild-im-Bild-Modus (BiB) ist eine Art Multifenstermodus, der für Aktivitäten gedacht ist, bei denen Videos im Vollbildmodus wiedergegeben werden. Nutzer können sich ein Video in einem kleinen Fenster ansehen, das an einer Ecke des Bildschirms angepinnt ist, während sie zwischen Apps wechseln oder Inhalte auf dem Hauptbildschirm durchsuchen.

Abbildung 1:Nutzer können sich Videos auch außerhalb Ihrer App ansehen

Fazit

  • Die Benutzeroberfläche muss ausgeblendet sein und die Videowiedergabe muss fortgesetzt werden, wenn die Aktivität im PiP-Modus ist.
  • Deaktivieren Sie die automatische Größenanpassung für Inhalte, die keine Videos sind.
  • Videowiedergabeaktivitäten mit einer minimalen Benutzeroberfläche bieten die beste Nutzererfahrung.
  • Außer den Videoinhalten sollte nichts zu sehen sein.

Unterstützung für den Bild-im-Bild-Modus in Ihrer App hinzufügen

Standardmäßig unterstützt das System PiP für Apps nicht automatisch. Die Funktion muss deklariert werden, damit sie unterstützt wird.

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

Einstellungen

Standardmäßig bietet Android BiB-Steuerelemente zum Schließen des Fensters, zum Maximieren auf Vollbild, zu den Einstellungen und zur Medienwiedergabe. Ihrer App können benutzerdefinierte Aktionen und entsprechende Symbol-Assets hinzugefügt werden, damit Nutzer mit den PiP-Inhalten interagieren können.

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

Im PiP-Modus werden Ihre Aktivitäten in einem kleinen Fenster angezeigt. In diesem Modus können Nutzer nicht mit den anderen UI-Elementen Ihrer App interagieren. Außerdem sind die Details kleiner UI-Elemente im PiP-Fenster möglicherweise schwer zu erkennen.

Standard-PiP-Steuerelemente
Beispiel für benutzerdefinierte PiP-Steuerelemente

Nutzung

Bieten Sie Nutzern die Möglichkeit, sich das Video nicht nur in Ihrer App, sondern auf ihrem gesamten Gerät anzusehen. Ihre App steuert, wann die aktuelle Aktivität in den PiP-Modus wechselt. Dies kann eine Interaktion sein, z. B. wenn Sie die aktuelle Ansicht verlassen oder nach oben wischen, um zur Startseite zu gelangen.

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

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

    Abbildung 4:Bild-im-Bild-Funktion für die Weiternutzung der Wegbeschreibung
  • Ihre App kann ein Video in den Bild-im-Bild-Modus versetzen, wenn der Nutzer vom Video zurückgeht, um andere Inhalte aufzurufen.

  • Ihre App kann ein Video in den PiP-Modus umschalten, während sich 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, während der Wiedergabe eines Videos zusätzliche Inhalte der Wiedergabeliste hinzuzufügen. Das Video wird im PiP-Modus fortgesetzt, während auf dem Hauptbildschirm eine Aktivität zur Inhaltsauswahl angezeigt wird.

Verwenden Sie ein Interaktionsmuster, das die Wiedergabe ergänzt, ohne sie zu stören. Wenn sich ein Video beispielsweise am Ende einer Folge befindet, muss der Nutzer beim Verlassen des Startbildschirms zusätzliche Aktionen ausführen, um zur Wiedergabe zurückzukehren und sie zu beenden oder die kleinen Steuerelemente zu bedienen.

In Ihrer App kann ein Nutzer ein neues Video auswählen, während er auf dem Hauptbildschirm nach Inhalten sucht und eine Videowiedergabe im Bild-im-Bild-Modus läuft. Spielen Sie das neue Video in der vorhandenen Wiedergabeaktivität im Vollbildmodus ab, anstatt eine neue Aktivität zu starten, die den Nutzer verwirren könnte.

Interaktionsmuster

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

Tippen Sie einmal auf das Fenster, um eine Vollbildschaltfläche, eine Schaltfläche zum Schließen, eine Schaltfläche für die Einstellungen und benutzerdefinierte Aktionen Ihrer App (z. B. Wiedergabesteuerungen) aufzurufen.

Abbildung 5:Standard-PiP-Steuerelemente

Doppeltippen Sie auf das Fenster, um zwischen der aktuellen BiB-Größe und der maximalen oder minimalen BiB-Größe zu wechseln. Wenn Sie beispielsweise auf ein maximiertes Fenster doppeltippen, wird es minimiert. Das Gegenteil ist auch der Fall.

Abbildung 6:Zwischen minimaler und maximaler Größe von PiP mit Doppeltippen wechseln

Minimieren Sie das Fenster, indem Sie es zum 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.

Abbildung 7: PiP-Minifenster minimiert

Passen Sie die Größe des BiB-Fensters an, indem Sie es auseinander- und zusammenziehen.

Wische das PiP-Fenster nach unten, um es zu entfernen.

Abbildung 8: Wischen nach unten

Übergänge

Verbesserte Animation beim Wechsel in den PiP-Modus

Wenn ein Nutzer den PiP-Modus auslöst, wird die aktuelle Aktivität vom Vollbildmodus auf ein kleines Fenster verkleinert. Die Inhalte werden weiterhin angezeigt, ohne dass die Benutzeroberfläche überlagert wird.

In Android 12 wurden die animierten Übergänge zwischen Vollbild- und PiP-Fenstern deutlich verbessert. Wir empfehlen Ihnen dringend, alle erforderlichen Änderungen vorzunehmen. Anschließend werden diese Änderungen automatisch auf große Bildschirme wie faltbare Smartphones und Tablets skaliert, ohne dass Sie weitere Maßnahmen ergreifen müssen.

Wenn Ihre App diese erforderlichen Updates nicht enthält, funktionieren PiP-Übergänge zwar weiterhin, die Animationen sind jedoch weniger ausgefeilt. Wenn du beispielsweise vom Vollbildmodus zum PiP-Modus wechselst, kann es passieren, dass das PiP-Fenster während des Übergangs verschwindet und erst nach Abschluss des Übergangs wieder angezeigt wird.

Ab Android 12 sorgt das Flag PictureInPictureParams.Builder.setAutoEnterEnabled(true) für eine viel flüssigere Animation beim Wechsel zu Videoinhalten im PiP-Modus über die Touchbedienung – z. B. wenn Sie vom Vollbildmodus zum Startbildschirm wischen. Wir empfehlen dies, wenn Ihre App zur App-Kategorie ENTERTAINMENT, COMMUNICATION oder VIDEO_PLAYER gehört.

Wenn Ihre App diese Änderung nicht enthält, funktionieren Bild-im-Bild-Übergänge mit Touch-Navigation weiterhin, die Animationen sind jedoch weniger ausgefeilt. Video 1 zeigt ein Beispiel dafür: Das Fenster schrumpft auf das App-Symbol zusammen und verschwindet, bevor es nach Abschluss der Umwandlung wieder erscheint.

Weniger flüssiger Übergang, wenn setAutoEnterEnabled in PiP nicht richtig implementiert ist
Die App wurde um setAutoEnterEnabled erweitert, um die Übergänge zu optimieren.

Flüssige Videowiedergabe

Als wir PiP in Android 8.0 eingeführt haben, gab das Symbol sourceRectHint den Bereich der Aktivität an, der nach dem Wechsel zu PiP sichtbar ist, z. B. die Videowiedergabegrenzen in einem Videoplayer. Ab Android 12 verwendet das Betriebssystem sourceRectHint, um sowohl beim Aktivieren als auch beim Deaktivieren des PiP-Modus eine viel flüssigere Animation zu implementieren.

Wenn Ihre App keine ordnungsgemäße sourceRectHint bereitstellt, funktionieren die Bild-im-Bild-Übergänge zwar weiterhin, die Animationen sind jedoch weniger ausgefeilt. Video 3 zeigt beispielsweise einen weniger ausgefeilten Übergang vom Vollbildmodus zum PiP-Modus: Nachdem das Vollbildfenster auf das PiP-Fenster geschrumpft ist, wird es von einem schwarzen Overlay verdeckt, bevor das Video wieder angezeigt wird.

Video 3:Weniger flüssige Übergänge, wenn sourceRectHint in der PiP-Funktion nicht richtig implementiert ist

Ein Beispiel dafür, wie die PiP-Animation aussieht, wenn sourceRectHint richtig implementiert ist, findest du in Video 2 im vorherigen Abschnitt.

Im Android Kotlin Picture-in-Picture-Beispiel finden Sie eine Referenz für eine reibungslose Umstellung.

Weitere Informationen zur Implementierung von PiP findest du in der Entwicklerleitfaden für Picture-in-Picture.