Imagen en imagen

El modo de pantalla en pantalla (PIP) es un tipo de modo multiventana diseñado para actividades que reproducen video en pantalla completa. Permite al usuario ver un video en una ventana pequeña fijada en una esquina de la pantalla mientras navega entre apps o explora contenido en la pantalla principal.

Conclusiones

• Asegúrate de que los elementos de la IU estén ocultos y la reproducción de video continúe cuando la actividad esté en modo de PIP.
• Inhabilita el cambio fluido de tamaño de contenido que no sea video.
• Las actividades de reproducción de video con una IU mínima proporcionan la mejor experiencia del usuario.
• Evita mostrar algo que no sea el contenido de video.

Cómo agregar compatibilidad con pantalla en pantalla a tu app

De forma predeterminada, el sistema no admite automáticamente PIP para apps y debe declararse que admite la función.

La ventana de PIP aparece en la capa superior de la pantalla, en una esquina que elige el sistema.

Controles

De forma predeterminada, Android proporciona controles de PIP para cerrar la ventana, expandirla a pantalla completa, acceder a la configuración y controlar la reproducción de contenido multimedia. Tu app puede agregar acciones personalizadas y recursos de íconos adecuados para permitir que los usuarios interactúen con el contenido del PIP.

El usuario puede mostrar estos controles desde el menú de la ventana de PIP tocando la ventana en un dispositivo móvil o seleccionando el menú desde el control remoto de la TV. Si una app tiene una sesión multimedia activa, también se muestran los controles de reproducción, pausa, siguiente y anterior. Obtén más información para agregar estos controles.

En el modo de PIP, tu actividad se muestra en una ventana pequeña. Los usuarios no pueden interactuar con los demás elementos de la IU de la app en este modo, y los detalles de los elementos pequeños de la IU en la ventana de PIP pueden ser difíciles de ver.

Uso

Permite que los usuarios sigan mirando sus videos no solo en tu app, sino también en todo su dispositivo. Tu app controla cuándo ingresa en modo de PIP la actividad actual. Esto puede ser una interacción, como salir de la vista actual o deslizar el dedo hacia arriba para ir a la pantalla principal.

Estos son algunos ejemplos de acciones posibles:

• Una actividad puede ingresar al modo de PIP cuando el usuario presiona el botón de inicio o desliza el dedo hacia arriba para ir a la pantalla principal. Así es como Google Maps sigue mostrando indicaciones mientras el usuario ejecuta otra actividad al mismo tiempo.

  

• Tu app puede mover un video al modo de PIP cuando el usuario navega hacia atrás desde el video para explorar otro contenido.

• Tu app puede cambiar un video al modo de PIP mientras un usuario mira el final de un episodio de contenido. La pantalla principal muestra información promocional o de resumen sobre el próximo episodio de la serie.

• Tu app puede proporcionar una manera para que los usuarios pongan en cola contenido adicional mientras miran un video. El video sigue reproduciéndose en modo de PIP mientras la pantalla principal muestra una actividad de selección de contenido.

Usa un patrón de interacción que complemente la experiencia de visualización sin interrumpirla. Por ejemplo, si un video está al final de un episodio de contenido, ingresar al modo de PIP cuando se salga de la pantalla principal requerirá que el usuario realice acciones adicionales para regresar y detener la reproducción o navegar por los controles pequeños.

En tu app, un usuario puede seleccionar un video nuevo cuando busca contenido en la pantalla principal, mientras una actividad de reproducción de video está en modo de PIP. Reproduce el video nuevo en la actividad de reproducción existente en modo de pantalla completa, en lugar de iniciar una actividad nueva que podría confundir al usuario.

Patrones de interacción

Los usuarios pueden arrastrar la ventana de PIP a otra ubicación.

Presiona una vez la ventana para mostrar un botón de activación de pantalla completa, un botón de cierre, un botón de configuración y acciones personalizadas que proporciona tu app (por ejemplo, controles de reproducción).

Presiona dos veces la ventana para cambiar entre el tamaño actual de PiP y el tamaño máximo o mínimo de PiP. Por ejemplo, si presionas dos veces una ventana maximizada, se minimizará, y viceversa.

Almacena la ventana arrastrándola hacia el borde izquierdo o derecho. Para dejar de almacenar la ventana, presiona la parte visible de la ventana almacenada o arrástrala hacia afuera.

Cambia el tamaño de la ventana de PIP con la función de pellizcar para hacerle zoom.

Desliza la ventana de PIP hacia abajo para quitarla.

Transiciones

Para que la experiencia del usuario sea impecable cuando se cambia al modo de PIP y se sale de él, personaliza las transiciones de entrada y salida.

Animación de entrada fluida al modo de PiP

Cuando un usuario activa el modo de PIP, la actividad actual se reduce de pantalla completa a una ventana pequeña, que sigue mostrando el contenido sin superponer ninguna IU.

Android 12 introdujo mejoras estéticas en las transiciones entre ventanas de pantalla completa y de PiP. Una vez implementadas, estas actualizaciones se adaptan automáticamente a tablets y dispositivos plegables.

Sin estas actualizaciones, las transiciones funcionan, pero son menos refinadas. Por ejemplo, es posible que la ventana de PIP desaparezca temporalmente durante la transición.

A partir de Android 12, la marca PictureInPictureParams.Builder.setAutoEnterEnabled(true) proporciona transiciones de gestos más fluidas (como deslizar el dedo hacia arriba para ir a la pantalla principal). Recomendamos esta opción para las apps de ENTERTAINMENT, COMMUNICATION o VIDEO_PLAYER.

Sin esta marca, las transiciones de gestos reducen la ventana al ícono de la app antes de que vuelva a aparecer como la ventana PIP (como se muestra en el video 1).

Imágenes de video fluidas

Cuando presentamos el modo de PIP en Android 8.0, sourceRectHint indicaba el área de la actividad que se veía después de la transición al modo de PIP, por ejemplo, los límites de la vista de video en un reproductor de video. A partir de Android 12, el SO usa sourceRectHint para implementar una animación mucho más fluida cuando se ingresa y se sale del modo de PIP.

Si tu app no proporciona un sourceRectHint adecuado, las transiciones de PIP seguirán funcionando, pero las animaciones serán menos pulidas. Por ejemplo, el video 3 muestra un ejemplo menos pulido de una transición del modo de pantalla completa al modo PIP: después de que la ventana de pantalla completa se reduce a la ventana PIP, se cubre con una capa negra antes de volver a mostrar el video.

Para ver un ejemplo de cómo se ve la animación de PiP cuando sourceRectHint se implementa correctamente, consulta el video 2 de la sección anterior.

Consulta la muestra de Android Kotlin PictureInPicture como referencia para habilitar una experiencia de transición perfeccionada.

Para obtener más información sobre la implementación de PIP, consulta la documentación para desarrolladores sobre pantalla en pantalla.