Android picture in picture mode

Making magic moments with picture in picture

PIP, PIP, Hooray

Picture in Picture (PIP) is an interesting feature that gives the user a magical experience. Pip is a special case of the multi-window UI. Video playback and camera activities can often be enhanced by using PIP. For example, while watching YouTube you can select another video to add to your playlist while continuing to watch the current video because the running video goes into PIP mode. This is a magical moment that lets you comfortably do two things at once.

Another great use of PIP is checking your calendar while you are on a video chat. The video can shrink and move out of the way allowing you to check your appointments. You can stay engaged in the conversation while completing another task.

Using PIP in your app

Starting with Android 8.0 (API level 26), you can easily put your activity into PIP mode.

Your activity must declare that it supports PIP. In your manifest you should set the supportsPictureInPicture flag to true .

Entering PIP on purpose

There are several appropriate times to enter PIP mode. The simplest way is with a button or menu item. Material design provides standard PIP icons; however a menu option might make more sense for your app.

The icon should indicate what happens when entering PIP. For example, if your PIP window shows in the top right of the screen, use an icon to give the user a subtle hint of what to expect.

PIP as an alternative to switching apps

It is often useful to enter PIP instead of leaving an app, for example when the user presses the home or back button.

PIP might be a better experience than closing your app.

When the user selects back, it may be useful to enter PIP mode rather than closing a running video. For instance, the user might be browsing for more content to view, and could continue to watch the original program in PIP mode. If you do enter PIP mode in this way, be sure to provide an option to dismiss the PIP window.

If the user selects home, recent apps, or opens a notification while handling a video call or watching a video, it might make more sense to enter PIP rather than leave the app.

The Android Activity lifecycle has a callback hook that you can use to detect when the user is leaving the app. You can override onUserLeaveHint(), as explained below, and enter PIP mode instead of leaving.

Diving Deeper

When you are in PIP mode, you should hide everything except the most important thing. In most cases, that will be the video or the camera.

Before entering PIP, you should prepare by performing these tasks:

1. Hide any controls or overlays on the view. For example, hide video playback controls or a camera options menu.
2. Create a PictureInPictureParams.Builder
3. Set the aspect ratio based on your view. For example, the Google Maps navigation has a vertical PIP window while YouTube videos appear in a horizontal window.
4. Optionally add custom actions. For example, provide rewind/fast forward for video playback or a mute action for video calls.
5. Optionally set a Rect bounds to smooth the transition for the activity into PIP.

Here is an example of entering PIP mode in response to a button:

Here is an example of onUserLeaveHint() to catch the app switching and enter PIP as a side effect, with no user action required.

You should create a PictureInPictureParams to pass to enterPictureInPictureMode() . There is an overloaded method with no parameters that is deprecated. Android Studio can help make sure that you are not using the deprecated API.

Switching in and out of Picture in Picture mode

Entering PIP mode is pretty easy but what if the user restores your window to full-screen? You should restore your activity to how it was before entering PIP. For example, showing the playback controls that you hid. Activity has a callback, onPictureInPictureModeChanged(), that you can override that listens for such events. There is also a callback for Fragments.

If the user restores the window to fullscreen, isInPictureInPictureMode will be false. You want to restore your view to before you entered PIP mode. For example, show the video playback controls or restore the camera’s option menu overlay.

Note that you get a reference to the new configuration, like you do when the configuration itself changes.

Adding custom actions

Even though you should simplify the UI when in PIP mode, you can still allow user interaction with remote actions. The PictureInPictureParams.Builder has setActions() which takes a list of RemoteActions. If there are more than getMaxNumPictureInPictureActions() actions, the input list will be truncated to that number.

You can add custom simplistic actions that preserve some of your full-screen features, such as a play/pause toggle. The sample app, defines two custom actions; a play/pause toggle and request info.

If you are using MediaSession for video playback, the framework automatically recognizes the session and adds the actions to play/pause, skip next, and skip previous. The actions are handled by the corresponding methods in MediaSession.Callback.

The actions are automatically enabled and disabled depending on the MediaSession state. In the picture below, the MediaSession state is set to PlaybackStateCompat.ACTION_PLAY_PAUSE | PlaybackStateCompat.ACTION_SKIP_TO_NEXT

If you do not need any or all of the actions supplied by MediaSession, call setActions() to specify only the actions you want.

In Summary

Deciding when to enter PIP is the hardest part. PIP can make your app feel magical by deducing user intention or it can make your app feel clunky and annoying. Once you understand your the user’s intent, then the code will fall into place.

The most common flows to enter PIP mode will be as follows:

1. Trigger from a button

• onClicked(View) , onOptionsItemSelected(MenuItem) , etc.

2. Trigger from intentionally leaving your app

3. Trigger from discovery

Continue Learning

Check out the following articles and training documents to continue learning about PIP.

To play with PIP, download the sample.

To dive deeper into PIP, read my second article about Navigation with PIP.

Источник

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.

Источник

How to Use Picture-in-Picture on Your Android

This Android feature lets you watch your favorite videos while multitasking

Picture-in-Picture (PiP) is a feature available on Android smartphones running Android 8.0 Oreo and later. It allows you to multitask. For instance, you can search for a restaurant while video chatting with a friend or watch a funny video on a website while getting directions on Google Maps. PiP is a nice feature for heavy multitaskers who jump from app to app.

Enable PiP Apps on Android

Open Settings.

Tap Apps & notifications.

Go to Advanced > Special app access.

Select Picture-in-picture.

Choose an app from the list.

Tap the Allow picture-in-picture toggle to enable PiP.

Compatible Apps

Since this is an Android feature, many of Google’s top apps support picture-in-picture, including Chrome, YouTube, and Google Maps. However, YouTube’s PiP mode requires a subscription to YouTube Premium, its ad-free paid subscription platform. PiP mode also works with YouTube TV, the company’s streaming TV service.

Other compatible apps include:

• VLC
• Netflix
• WhatsApp
• Facebook
• Instagram
• Google Duo
• Pocket Casts
• Hulu

How to Launch Picture-in-Picture

How you launch picture-in-picture depends on the app:

• In Google Chrome, go to a site to start playing a video in full screen, then tap Home on your Android.
• With some apps such as VLC, you have to enable the feature in the app settings first.
• On WhatsApp, when you’re in a video call, tap the preview of the video to activate PiP.

PiP Controls

When you’ve figured out how to launch PiP in your favorite app, you’ll see a window with your video or other content in the lower-right of your display.

Tap the window to access the controls. In some cases, you’ll see Play, Fast Forward, Rewind, and Maximize\Full screen that brings you back to the app in full screen. For playlists, tap the Fast-Forward icon to move to the next song in the list. Some videos have only Exit and Full-screen icons.

You can drag the window anywhere on the screen and pull it to the bottom of the screen to exit the window.

Some apps have a headphone icon that you can tap to play audio in the background without visual videos.

Источник

Android picture in picture mode

Android Picture in Picture Mode Example

February 07, 2018

Picture in picture support, introduced in Android 8.0 API level 26 and uses multi window APIs, allows you to develop a feature in your app which lets users to view an activity in a small window pinned to a corner while users can do something on the main screen. This feature is intended for playing videos in a small window while user is trying to browse files on the main screen or to perform other actions.

In this post, you can learn how to make an activity enter and exit picture-in-picture mode, hide and show UI controls on activity screen depending on picture-in-picture mode and implement picture-in-picture feature with an example.

Picture in Picture Mode Example

Our example app, which shows how to implement picture-in-picture mode, first displays a screen which allows user to select a video. On selecting a video, it will start video activity and play the video in VideoView with an option of allowing user to choose videos. When user click the button, video activity will be shown in PIP mode and user can select video from the previous activity. On selecting a video again, it will reuse the video activity which is running in PIP mode and start playing new video in full-screen mode.

Below screen shows video activity in fullscreen mode.

Below screen shows video activity in PIP mode.

Entering Picture in Picture Mode

First step to provide picture-in-picture support in your app is configuring the activity that you want to provide picture-in-picture support for. In AndroidManifest xml file, you need to set android:resizeableActivity and android:supportsPictureInPicture attributes of activity declaration to true.

In Android, any layout or configuration change restarts an activity. Since we don’t want this behavior when an activity transitions into picture-in-picture mode, we need to add android:configChanges to inform the system that activity handles the configuration changes.

Once activity declaration is complete, you need to provide a way for user to make the activity display in picture-in-picture mode. In our example, it is button, clicking it displays the activity in picture-in-picture mode and shows previous activity that allows user to choose a different video file. Other way of showing PIP mode is when user presses home button or recents button.

To display an activity in picture-in-picture mode, you need to call enterPictureInPictureMode method of activity passing PictureInPictureParams.Builder object. PictureInPictureParams.Builder allows you to set actions for the activity in picture-in-picture mode using setActions method and to set aspect ratio of activity using setAspectRatio method.

Exiting Picture in Picture Mode

When the activity which is in picture-in-picture mode is touched or tapped, it will display full screen and close controls to allow user to go back to full screen mode or close the activity as shown in the below screen.

You can declare the activity as singleTask by setting android:launchMode attribute in AndroidManifest file to reuse the same activity in full-screen mode with new content that user selects. In our example, when video activity is in picture-in-picture mode, user can select new video file and app will play the selected video using same activity because its launchMode is set to singleTask.

Picture-in-Picture Mode Change Callback Method

System calls activity’s onPictureInPictureModeChanged callback method when activity changes to and from picture-in-picture mode. This callback methods gives an opportunity to remove UI components not required when activity is in pip mode and add them back when it is in full-screen mode.

PIP Mode when Home or Recents Buttons Pressed

You can display your video activity in picture-in-picture mode when user presses home or recents button. When user presses home or recents button, current activity goes to background. In the activity life cycle, onUserLeaveHint callback method will be called when an activity is about to go to background due to user actions.

So, onUserLeaveHint callback method can be used to show the activity in PIP mode when user presses home or recents button as shown below. You can check whether the activity is already in PIP mode using isInPictureInPictureMode method.

Источник