How to implement Picture in Picture (PIP) in Android?

In this article, it is explained how to implement a Picture in Picture (PIP) in an Android application.

We have seen in many apps such as Google Maps while using navigation that when we close the app, there is a floating screen that appears at the bottom right of the screen as shown in the image below. This screen is known as PIP(Picture in Picture) mode.



What is PIP(Picture in Picture) mode?

PIP is a special type of multi-window mode mainly used for activities that need to be active on screen but should not take up the whole screen space like watching videos, video calls, navigation, etc. It lets the user watch a video in a small window pinned to a corner of the screen (by default bottom right) while navigating between apps or browsing content on the main screen. Android 8.0 (API level 26) and above allows activities to launch in PIP mode.

The PIP window appears in the top-most layer of the screen. You can drag the PIP window to another location using some special toggles. When you tap on the window two special controls appear:

  • a full-screen toggle (in the centre of the window) and
  • a close button (an “X” in the upper right corner).

Below is the implementation of the PIP mode.

  1. Create an android project in android studio.
  2. Declaring picture-in-picture support: By default, no activity has PIP mode enabled. This needs to be done via the Manifest file
    <activity android:name="VideoActivity"
        android:supportsPictureInPicture="true"
        android:configChanges=
            "screenSize|smallestScreenSize|screenLayout|orientation"
        ...
    
  3. Now, in the layout file (activity_main.xml), we will have two components in the activity:
  4. Now, let’s add some code in MainActivity.java file. In this app, we will change the activity to PIP mode on a button click.
    • First, we will get the display size using the getWindowManager().
    • After that using the function enterPictureInPictureMode() which should be provided with a PictureInPictureParams.Builder parameter.

Below is the code for the same.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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 demostrating 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>

chevron_right


MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

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());
            }
        });
    }
}

chevron_right


Output:

  • Press the button to enable PIP mode for the activity.
  • This is how the activity looks in PIP mode.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.