¿Cómo implementar Picture in Picture (PIP) en Android?

En este artículo se explica cómo implementar un Picture in Picture (PIP) en una aplicación de Android .
Hemos visto en muchas aplicaciones como Google Maps mientras usamos la navegación que cuando cerramos la aplicación, aparece una pantalla flotante en la parte inferior derecha de la pantalla como se muestra en la imagen a continuación. Esta pantalla se conoce como modo PIP (Picture in Picture).
 

¿Qué es el modo PIP (imagen en imagen)?
PIP es un tipo especial de modo multiventana que se usa principalmente para actividades que deben estar activas en la pantalla pero que no deben ocupar todo el espacio de la pantalla, como ver videos, videollamadas, navegación, etc. Permite al usuario ver un video en un pequeña ventana anclada en una esquina de la pantalla (de forma predeterminada en la parte inferior derecha) mientras navega entre aplicaciones o explora contenido en la pantalla principal. Android 8.0 (API nivel 26) y superior permite que las actividades se inicien en modo PIP.
La ventana PIP aparece en la capa superior de la pantalla. Puede arrastrar la ventana PIP a otra ubicación usando algunos conmutadores especiales. Cuando toca la ventana, aparecen dos controles especiales: 
 

  • un interruptor de pantalla completa (en el centro de la ventana) y
  • un botón de cierre (una “X” en la esquina superior derecha).

A continuación se muestra la implementación del modo PIP.
 

  1. Cree un proyecto de Android en Android Studio .
  2. Declaración de soporte de imagen en imagen: de forma predeterminada, ninguna actividad tiene habilitado el modo PIP. Esto debe hacerse a través del archivo Manifiesto
    <activity android:name="VideoActivity"
        android:supportsPictureInPicture="true"
        android:configChanges=
            "screenSize|smallestScreenSize|screenLayout|orientation"
        ...
  3. Ahora, en el archivo de diseño ( actividad_principal.xml ), tendremos dos componentes en la actividad: 
  4. Ahora, agreguemos algo de código en el archivo MainActivity.java . En esta aplicación, cambiaremos la actividad al modo PIP con un clic de botón. 
    • Primero, obtendremos el tamaño de visualización usando getWindowManager() .
    • Después de eso, use la función enterPictureInPictureMode() que debe proporcionarse con un parámetro PictureInPictureParams.Builder .

A continuación se muestra el código para el mismo.
 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="App for demonstrating the Picture
                      in Picture mode in Android"
        android:layout_gravity="center"
        android:gravity="center_horizontal|bottom"
        android:textSize="25dp"
        android:layout_weight="1"/>
  
    <Button
        android:id="@+id/enter_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:layout_gravity="center"
        android:text="Enter PIP"
        android:textSize="25dp"
        android:background="#FFF"
        />
  
</LinearLayout>

MainActivity.java

package com.vaibhav.pictureinpicture;
  
import androidx.appcompat.app.AppCompatActivity;
import android.app.ActionBar;
import android.app.PictureInPictureParams;
import android.content.res.Configuration;
import android.graphics.Point;
import android.os.Bundle;
import android.util.Rational;
import android.view.Display;
import android.view.View;
import android.widget.Button;
  
public class MainActivity extends AppCompatActivity {
  
    private Button enter;
    ActionBar actionBar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        actionBar = getActionBar();
        enter = findViewById(R.id.enter_button);
  
        enter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                Display d = getWindowManager()
                                .getDefaultDisplay();
                Point p = new Point();
                d.getSize(p);
                int width = p.x;
                int height = p.y;
  
                Rational ratio
                    = new Rational(width, height);
                PictureInPictureParams.Builder
                    pip_Builder
                    = new PictureInPictureParams
                          .Builder();
                pip_Builder.setAspectRatio(ratio).build();
                enterPictureInPictureMode(pip_Builder.build());
            }
        });
    }
}

Producción:
 

  • Presione el botón para habilitar el modo PIP para la actividad.
  • Así es como se ve la actividad en modo PIP.

Publicación traducida automáticamente

Artículo escrito por vaibhavjain5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *