81. An Android Picture-in-Picture Tutorial

Following on from the previous chapters, this chapter will take the existing VideoPlayer project and enhance it to add Picture-in-Picture support, including detecting PiP mode changes and the addition of a PiP action designed to display information about the currently running video.

81.1 Adding Picture-in-Picture Support to the Manifest

The first step in adding PiP support to an Android app project is to enable it within the project Manifest file. Open the manifests -> AndroidManifest.xml file and modify the activity element to enable PiP support:

.

.

<activity android:name=".MainActivity"

 android:supportsPictureInPicture="true"

 android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation">

    <intent-filter>

        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />

    </intent-filter>

</activity>

.

.

81.2 Adding a Picture-in-Picture Button

As currently designed, the layout for the VideoPlayer activity consists solely of a VideoView instance. A button will now be added to the layout for the purpose of switching into PiP mode. Load the activity_main.xml file into the layout editor and drag a Button object from the palette onto the layout so that it is positioned as shown in Figure 81-1:

Figure 81-1

Change the text on the button so that it reads “Enter PiP Mode” and extract the string to a resource named enter_pip_mode. Before moving on to the next step, change the ID of the button to pipButton and configure the button to call a method named enterPipMode.

81.3 Entering Picture-in-Picture Mode

The enterPipMode onClick callback method now needs to be added to the MainActivity.kt class file. Locate this file, open it in the code editor and add this method as follows:

.

.

import android.app.PictureInPictureParams

import android.util.Rational

import android.view.View

import android.content.res.Configuration

.

.

fun enterPipMode(view: View) {

 

    val rational = Rational(videoView1.width,

            videoView1.height)

 

    val params = PictureInPictureParams.Builder()

            .setAspectRatio(rational)

            .build()

 

    pipButton.visibility = View.INVISIBLE

    videoView1.setMediaController(null)

...

81.4 Detecting Picture-in-Picture Mode Changes

As discussed in the previous chapter, PiP mode changes are detected by overriding the onPictureInPictureModeChanged() method within the affected activity. In this case, the method needs to be written such that it can detect whether the activity is entering or exiting PiP mode and to take appropriate action to re-activate the PiP button and the playback controls. Remaining within the MainActivity.kt file, add this method now:

override fun onPictureInPictureModeChanged(

       isInPictureInPictureMode: Boolean, newConfig: Configuration?) {

    super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)

    if (isInPictureInPictureMode) {

 

    } else {

        pipButton.visibility = View.VISIBLE

        videoView1.setMediaController...

81.5 Adding a Broadcast Receiver

The final step in the project is to add an action to the PiP window. The purpose of this action is to display a Toast message containing the name of the currently playing video. This will require some communication between the PiP window and the activity. One of the simplest ways to achieve this is to implement a broadcast receiver within the activity, and the use of a pending intent to broadcast a message from the PiP window to the activity. These steps will need to be performed each time the activity enters PiP mode so code will need to be added to the onPictureInPictureModeChanged() method. Locate this method now and begin by adding some code to create an intent filter and initialize the broadcast receiver:

.

.

import android.content.BroadcastReceiver

import android.content.Context

import android.content.Intent

import android.content.IntentFilter

import android.widget.Toast

.

.

class MainActivity : AppCompatActivity...

81.6 Adding the PiP Action

With the broadcast receiver implemented, the next step is to create a RemoteAction object configured with an image to represent the action within the PiP window. For the purposes of this example, an image icon file named ic_info_24dp.xml will be used. This file can be found in the project_icons folder of the source code download archive available from the following URL:

https://www.ebookfrenzy.com/retail/as41kotlin/index.php

Locate this icon file and copy and paste it into the app -> res -> drawables folder within the Project tool window:

Figure 81-4

The next step is to create an Intent that will be sent to the broadcast receiver. This intent then needs to be wrapped up within a PendingIntent object, allowing the intent to be triggered later when the user taps the action button in the PiP window.

Edit the MainActivity.kt file to add a method to create the Intent and PendingIntent objects as follows:

.

.

import android.app...

81.7 Testing the Picture-in-Picture Action

Build and run the app once again and place the activity into PiP mode. Tap on the PiP window so that the new action button appears as shown in Figure 81-5:

Figure 81-5

Click on the action button and wait for the Toast message to appear displaying the name of the video:

Figure 81-6

81.8 Summary

This chapter has demonstrated addition of Picture-in-Picture support to an Android Studio app project including enabling and entering PiP mode and the implementation of a PiP action. This included the use of a broadcast receiver and pending intents to implement communication between the PiP window and the activity.