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.
- Create an android project in android studio.
- 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" ... - Now, in the layout file (activity_main.xml), we will have two components in the activity:
- 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
<?xml version="1.0" encoding="utf-8"?><LinearLayout 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()); } }); }} |
Output:
- Press the button to enable PIP mode for the activity.
- This is how the activity looks in PIP mode.
