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.
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.wongngaur.blogspot.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.wongngaur.blogspot.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.wongngaur.blogspot.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()
}
}
}
