How to Use Android Oreo's Picture-in-Picture Feature?

Ever wondered while watching your favourite show on Netflix, you simultaneously track your food delivery in Swiggy on your Android phone? This would be interesting and a majority of smartphones support this feature. As an Android developer, this is exciting, and thanks to the new update on Android OS, Oreo made it possible and introduced the new feature - Picture In Picture (PiP).

You might be aware of this feature in YouTube or Ola cabs and other applications. When you're watching a video on YouTube, the video can be minimised and one small window will appear on the bottom of the screen to continue playing that particular video.

PiP on Youtube

You can experience this feature even in Google navigation. When the navigation is started, you can minimise the application and it will be continued in the smaller window. The current screen will be at the bottom and you can drag it to any corner of the screen instead of terminating the navigation.

PiP in google navigation

Basically, there are two activities

the main activity where the actual screen of the application, and there's a second activity for the Picture in Picture feature. There's one main activity which is having a list of video (recycler view), clicking on one will take to the next activity where the PiP is implemented and the particular video will start playing.

Make sure to set these attributes in the manifest (regarding the PiP activity).

android:name="PiPActivity"
android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
android:label="Title"
android:launchMode="singleTask"
android:resizeableActivity="true"
android:supportsPictureInPicture="true"
android:theme="AppTheme.NoAction"/>

android:configChanges -- to make sure that the Activity doesn't lose any data while changing the screen size particularly.
android:resizeableActivity -- to make sure that the activity can be resized when the PiP is triggered.

In PiPActivity there are three major methods for PiP support

1. enterPictureInPictureMode() - Pass an instance of the PiP builder in here and this method starts the PiP

2. onPictureInPictureModeChanged() - Triggered when the PiP has occurred and you can hide the UI elements when the PiP is enabled

3. onUserLeaveHint() - Triggered when the user presses the home/recent options to come outside the application

For implementation, click on the button and call function which triggers PiP and the function will be blocked

private void startPictureInPictureFeature() {
Rational aspectRatio = new Rational(videoView.getWidth(), videoView.getHeight());
pictureInPictureParamsBuilder.setAspectRatio(aspectRatio).build();
enterPictureInPictureMode(pictureInPictureParamsBuilder.build());
}

Here we are changing the width and height of the VideoView to preview size before starting the PiP mode.

When a user presses the back button--

@Override
public void onUserLeaveHint() {
if(!isInPictureInPictureMode()) {
Rational aspectRatio = new Rational(videoView.getWidth(), videoView.getHeight());
pictureInpictureParamsBuilder.setAspectRatio(aspectRatio).build();
enterPictureInPictureMode(pictureInPictureParamsBuilder.build());
}
}

Here we hide the toolbar as well as FloatingActionButton

@Override
Public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
if(isInPictureInPictureMode) {
fab.hide();
toolbar.setVisibility(View.GONE);
}else{
fab.show();
toolbar.setVisibility(View.VISIBLE);
}
}

onNewIntent gets triggered when an intent to an existing activity is done.

Inside the onNewIntent, we are updating the VideoView

@Override
Public void onNewIntent(Intent i) {
updateVideoView(i);
}
private void updateVideoView(Intent i) {
//here we are getting the video url from MainActivity
//from MainActivity send the Url through intent
String videoUrl = i.getStringExtra("videoUrl");
videoView.setVideoURI(Uri.parse(videoUrl));
videoView.requestFocus();
}

Well, if you have any questions related to "Picture in Picture," please feel to drop in your queries in the comment section. Reach out to Appiness Interactive, a company that provides services on Android App Development in Bangalore.