Pantalla en pantalla

La función pantalla en pantalla (PIP) es un tipo de modo multiventana diseñado para actividades que reproducen videos 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.

Figura 1: Los usuarios pueden continuar con la experiencia de video incluso cuando no están en la app

Puck robado

  • Asegúrate de que los elementos de la IU estén ocultos y de que la reproducción de video continúe cuando la actividad esté en modo de PIP.
  • Inhabilita el cambio de tamaño fluido para 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 solo el contenido de video.

Cómo agregar compatibilidad con la función pantalla en pantalla a tu app

De forma predeterminada, el sistema no admite automáticamente PIP para apps y se debe declarar para admitir 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 y volver a expandirla a la pantalla completa, la configuración y la reproducción de contenido multimedia. Tu app puede agregar acciones personalizadas y elementos de íconos apropiados para permitir que los usuarios interactúen con el contenido de PIP.

El usuario puede mostrar estos controles desde el menú de la ventana de PIP presionando 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 información para agregar estos controles.

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

Figura 2: Controles de PIP predeterminados


Figura 3: Ejemplo de controles de PIP personalizados

Transiciones

Animación de entrada a PIP fluida

Un usuario que activa el modo de PIP hace que la actividad actual se reduzca de la pantalla completa a una ventana pequeña, lo que continúa mostrando el contenido sin superponerse en ninguna IU.

Android 12 agregó mejoras estéticas significativas a las transiciones animadas entre las ventanas de pantalla completa y de PIP. Te recomendamos que implementes todos los cambios aplicables. Una vez que lo hagas, estos se ajustarán automáticamente a pantallas grandes, como dispositivos plegables y tablets, sin necesidad de realizar ningún trabajo adicional.

Si tu app no incluye estas actualizaciones aplicables, las transiciones de PIP seguirán funcionando, pero las animaciones estarán menos pulidas. Por ejemplo, la transición de la pantalla completa al modo de PIP puede hacer que la ventana de PIP desaparezca durante la transición antes de que vuelva a aparecer cuando se complete la transición.

A partir de Android 12, la marca PictureInPictureParams.Builder.setAutoEnterEnabled(true) proporciona una animación mucho más fluida para hacer la transición al contenido de video en modo de PIP con la navegación por gestos, por ejemplo, cuando se desliza el dedo hacia arriba para ir a la pantalla principal desde la pantalla completa. Te recomendamos esta opción si tu app pertenece a la categoría ENTERTAINMENT, COMMUNICATION o VIDEO_PLAYER.

Si tu app no incluye este cambio, las transiciones de PIP con navegación por gestos seguirán funcionando, pero las animaciones estarán menos pulidas. En el video 1, se muestra un ejemplo de esto: la ventana se reduce y se muestra como el ícono de la app, desaparece y vuelve a aparecer cuando se completa la transición.

Video 1: Experiencia de transición menos pulida cuando PIP no tiene setAutoEnterEnabled implementado de forma correcta

En el video 2, se muestra un ejemplo de la misma transición, pero con setAutoEnterEnabled agregado a la app.

Video 2: Experiencia de transición mejorada

Imágenes de video fluidas

Cuando presentamos PIP en Android 8.0, sourceRectHint indicó el área de la actividad que es visible después de la transición a PIP; por ejemplo, los límites de 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 al modo de PIP y cuando se sale de él.

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

Video 3: Experiencia de transición menos pulida cuando PIP no tiene sourceRectHint implementado de forma correcta

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

Consulta el ejemplo de PictureInPicture de Kotlin para Android como referencia para habilitar una experiencia de transición mejorada.

Uso

Permite que los usuarios sigan mirando el video no solo en tu app, sino también en todo su dispositivo. Tu app controla cuándo ingresa al modo de PIP la actividad actual. Esta 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 PIP cuando el usuario presiona el botón de inicio o desliza el dedo hacia arriba para llegar a la pantalla principal. Así es como Google Maps sigue mostrando instrucciones sobre cómo llegar mientras el usuario ejecuta otra actividad al mismo tiempo.

    Figura 4: Se usa PIP para continuar con la experiencia de búsqueda de rutas
  • 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.

Utiliza un patrón de interacción que complemente la experiencia de visualización sin ser disruptivo. Por ejemplo, si un video se encuentra al final de un episodio de contenido, ingresar PIP al salir de la pantalla principal requerirá una acción adicional del usuario para mostrar y detener la reproducción, o navegar por 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 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.

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

  • Presionar 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).

    Figura 5: Controles de PIP predeterminados
  • Presiona dos veces la ventana para activar o desactivar el tamaño de PIP actual y su tamaño máximo o mínimo (por ejemplo, presionar dos veces una ventana maximizada se minimiza, y viceversa también.

    Figura 6: Alterna entre el tamaño mínimo y máximo PIP cuando se presiona dos veces
  • Para almacenar la ventana, arrástrala 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.

    Figura 7: PIP guardado
  • Cambiar el tamaño de la ventana de PIP con la función de pellizcar para hacerle zoom.

  • Desliza el PIP hacia abajo para quitar la ventana.

    Figura 8: Deslizamiento hacia abajo

Si quieres obtener más información para implementar PIP, consulta la documentación para desarrolladores de pantalla en pantalla.