How to add Picture In Picture Mode in the android app?

The Android 8.0 (API level 26) allows activities to launch in the picture-in-picture (PIP) mode. PIP is a special type of multi-window mode mostly used for video playback. It lets the user watch a video in a small window pinned to a corner of the screen while navigating between apps or browsing content on the main screen. The PIP window appears in the top layer of the screen in a corner chosen by the system.

>>Check For Java

Video:

Step 1: Create a new project or open an existing project

Step 2: Create another activity named PIPActivity

Step 3: Add the following properties to the PIPActivity in AndroidManifest

<activity android:name=".PIPActivity"
            android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTask"
            android:resizeableActivity="true"
            android:supportsPictureInPicture="true"/>

Step 3: Code

AndroidMenifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.blogspot.atifsoftwares.pictureinpicture">

    <!-- internet permission -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.PictureInPicture">

        <activity android:name=".PIPActivity"
            android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
            android:launchMode="singleTask"
            android:resizeableActivity="true"
            android:supportsPictureInPicture="true"/>

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

actiivty_main.xml

<?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:padding="20dp"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <!--Button click, play 1st video-->
    <Button
        android:id="@+id/videoOneBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Video One"/>

    <!--Button click, play 2nd video-->
    <Button
        android:id="@+id/videoTwoBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Video Two"/>

    <!--Button click, play 3rd video-->
    <Button
        android:id="@+id/videoThreeBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Video Three"/>

</LinearLayout>

MainActivity.kt

package com.blogspot.atifsoftwares.pictureinpicture

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    //video links/url
    private val videoOneUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    private val videoTwoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"
    private val videoThreeUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        //handle click, play first video
        videoOneBtn.setOnClickListener {
            playVideo(videoOneUrl)
        }
        //handle click, play 2nd video
        videoTwoBtn.setOnClickListener {
            playVideo(videoTwoUrl)
        }
        //handle click, play 3rd video
        videoThreeBtn.setOnClickListener {
            playVideo(videoThreeUrl)
        }
    }

    private fun playVideo(url:String){
        //open PIPActivity with url to play video
        val intent = Intent()
        intent.setClass(this, PIPActivity::class.java)
        intent.putExtra("videoURL", url)
        startActivity(intent)
    }
}

activity_pip.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#000"
    tools:context=".PIPActivity">

    <!--VideoView: play video-->
    <VideoView
        android:id="@+id/videoView"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <!--Button: enter PIP mode-->
    <ImageButton
        android:id="@+id/pipBtn"
        android:src="@drawable/ic_pip_white"
        android:background="@android:color/transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_margin="10dp"/>

</RelativeLayout>

PIPActivity.kt

package com.blogspot.atifsoftwares.pictureinpicture

import android.app.PictureInPictureParams
import android.content.Intent
import android.content.res.Configuration
import android.net.Uri
import android.os.Build
import android.os.Bundle
import android.util.Log
import android.util.Rational
import android.view.View
import android.widget.MediaController
import android.widget.Toast
import androidx.appcompat.app.ActionBar
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_p_i_p.*

class PIPActivity : AppCompatActivity() {

    private val TAG:String = "PIP_TAG"

    private var videoUri:Uri? = null

    private var pictureInPictureParamsBuilder:PictureInPictureParams.Builder? = null

    private var actionBar:ActionBar? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_p_i_p)

        //init actionbar
        actionBar = supportActionBar
        //get intent with url and pass in function to play video
        setVideoView(intent)

        //init PictureInPictureParams, requires Android O and above
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){
            pictureInPictureParamsBuilder = PictureInPictureParams.Builder()
        }

        //handle click, enter PIP
        pipBtn.setOnClickListener {
            pictureInPictureMode()
        }
    }

    private fun setVideoView(intent: Intent?) {
        val videoURL = intent!!.getStringExtra("videoURL")
        Log.d(TAG, "setVideoView: $videoURL")

        //MediaController for video controls
        val mediaController = MediaController(this)
        mediaController.setAnchorView(videoView)

        videoUri = Uri.parse(videoURL)

        //set media contrller to video view
        videoView.setMediaController(mediaController)
        //set video uri to video view
        videoView.setVideoURI(videoUri)

        //add video prepare listenrer
        videoView.setOnPreparedListener {mp ->
            //video is prepared, play
            Log.d(TAG, "setVideoView: Video Prepared, playing...")
            mp.start()
        }
    }

    private fun pictureInPictureMode(){
        //Requires Android O and higher
        Log.d(TAG, "pictureInPictureMode: Try to enter in PIP mode")
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){
            Log.d(TAG, "pictureInPictureMode: Supports PIP")
            //setup PIP height width
            val aspectRatio = Rational(videoView.width, videoView.height)
            pictureInPictureParamsBuilder!!.setAspectRatio(aspectRatio).build()
            enterPictureInPictureMode(pictureInPictureParamsBuilder!!.build())
        }
        else{
            Log.d(TAG, "pictureInPictureMode: Doesn't supports PIP")
            Toast.makeText(this, "Your device doesn't supports PIP", Toast.LENGTH_LONG).show()
        }
    }

    override fun onUserLeaveHint() {
        super.onUserLeaveHint()
        //when user presses home button, if not in PIP mode, enter in PIP, requires Android N and above
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N){
            Log.d(TAG, "onUserLeaveHint: was not in PIP")
            pictureInPictureMode()
        }
        else{
            Log.d(TAG, "onUserLeaveHint: Already in PIP")
        }
    }

    override fun onPictureInPictureModeChanged(
        isInPictureInPictureMode: Boolean,
        newConfig: Configuration?
    ) {
        super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
        if (isInPictureInPictureMode){
            Log.d(TAG, "onPictureInPictureModeChanged: Entered PIP")
            //hid pip button and actionbar
            pipBtn.visibility = View.GONE
            actionBar!!.hide()
        }
        else{
            Log.d(TAG, "onPictureInPictureModeChanged: Exited PIP")
            pipBtn.visibility = View.VISIBLE
            actionBar!!.show()
        }
    }

    override fun onNewIntent(intent: Intent?) {
        super.onNewIntent(intent)
            //when 1st video is playing, and entered in PIP, clicked 2nd video play 2nd video
        Log.d(TAG, "onNewIntent: Play New Video")
        setVideoView(intent)
    }

    override fun onStop() {
        super.onStop()
        if (videoView.isPlaying){
            videoView.stopPlayback()
        }
    }
}

Step 4: Run Project

Picture In Picture | Android Studio | Kotlin

Search This Blog

Android Tutorials

Picture In Picture | Android Studio | Kotlin