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

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 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=".MainActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|screenLayout|orientation|smallestScreenSize"
    ...
    >
    ...
</activity>

Step 3: Working with activity_main.xml

Now, in the layout file (activity_main.xml), we will have two components in the activity: a TextView and a Button.

<?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:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/enter_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter PIP"
        />

</LinearLayout>

Step 4: Working with MainActivity file

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.

package org.geeksforgeeks.demo;

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

package org.geeksforgeeks.demo

import android.app.ActionBar
import android.app.PictureInPictureParams
import android.graphics.Point
import android.os.Build
import android.os.Bundle
import android.util.Rational
import android.widget.Button
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var enter: Button
    private var actionBar: ActionBar? = null

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        actionBar = getActionBar()
        enter = findViewById(R.id.enter_button)

        enter.setOnClickListener {
            val d = windowManager.defaultDisplay
            val p = Point()
            d.getSize(p)
            val width = p.x
            val height = p.y

            val ratio = Rational(width, height)
            val pipBuilder = PictureInPictureParams.Builder()
            pipBuilder.setAspectRatio(ratio).build()
            enterPictureInPictureMode(pipBuilder.build())
        }
    }
}

Output:

Press the button to enable PIP mode for the activity.