Android Tutorials

Picture In Picture | Android Studio | Kotlin

By Atif Pervaiz October 17, 2020

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:

Picture In Picture | Android Studio | Kotlin

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|orienta
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 Tutorials
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|orienta
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-bu
private val videoTwoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bu
private val videoThreeUrl = "https://commondatastorage.googleapis.com/gtv-videos-

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

//handle click play first video

 //handle click, play first video
videoOneBtn.setOnClickListener {
Android Tutorials
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)
 super.onCreate(savedInstanceState)
setContentView(R.layout.activity_p_i_p)
Android Tutorials
//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_LON
}
}

override fun onUserLeaveHint() {

super.onUserLeaveHint()
//when user presses home button, if not in PIP mode, enter in PIP, requires A
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()
}
}
 Android Tutorials
override fun onNewIntent(intent: Intent?) {
super.onNewIntent(intent)
//when 1st video is playing, and entered in PIP, clicked 2nd video play 2
Log.d(TAG, "onNewIntent: Play New Video")
setVideoView(intent)
}

override fun onStop() {

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

Step 4: Run Project 

android android 8 android O android studio Kotlin picture in picture

picture in picture mode pip pip mode tutorial

Unknown October 24, 2020

Great 👍

REPLY

SoftwaLab October 24, 2020

Thank You for sharing the simplest example, saved my day 👏

REPLY

Apps Download October 29, 2020

Nice Information

REPLY

Unknown November 07, 2020

This is a great site. Thanks the author, stay strong and healthy. And keep us updated.

REPLY

Atif Pervaiz November 16, 2020

Thanks You All 😊

REPLY
 Android Tutorials
Enter your comment...

Popular posts from this blog

Add a Back Button to Action Bar Android Studio (Kotlin)

By Atif Pervaiz March 20, 2018

      DESCRIPTION       In this tutorial we will add a back button in action bar, when it is
clicked it will go to previous activity(the app will close if this was launcher activity). We will
go from main activity to new activity by clicking button in main activity. In new activity we …

READ MORE

AlertDialog with custom layout (Kotlin)

By Atif Pervaiz April 16, 2018

How to create Create AlertDialog With Custom Layout (Kotlin)?      DESCRIPTION      This
tutorial will show how to create and show an AlertDialog with C ustom Layout containing
…
views such as EditTexts and Buttons etc. We will show AlertDialog on Button click. Custom

READ MORE

How to export an Android Studio project as a zip le?

By Atif Pervaiz November 18, 2019

Export an Android Studio project as a ZIP le Starting with the Android Studio 3.0, you can
use File | Export to Zip File... to export your project to zip or HTML easily. There is also a
great advantage of exporting the project as a zip le, that is, it exports in very small size …

READ MORE

Powered by Blogger

Theme images by enot-poloskun

Atif Pervaiz©

ATIF PERVAIZ

Android & iOS Application developer.

Learning and delivering knowledge by
making it easier to understand for
others is my hobby & passion.

VISIT PROFILE
Menu
Android Tutorials
Home

ActionBar

SQLite

Android Video
Tutorials

AlertDialog

ListView

Android Menu

Activities

Libraries

Firebase

Splash Screen

Toast

SnackBar

WebView

Button

Spinner

CheckBox

Recyclerview

Bottom Sheet

SharedPreferences

Date Picker

Time Picker

Labels

My Gigs

Seller
Programming & Tech



Check out my Gigs