Picture-in-Picture Mode in Android: Seamless Multitasking

#android #kotlin #compose #tutorial

Picture-in-Picture (PiP) mode allows users to watch videos or use apps in a floating window while multitasking. Implementing PiP in Jetpack Compose makes your app more versatile.

Declaring PiP Support

First, enable PiP in AndroidManifest.xml:

<activity
    android:name=".VideoActivity"
    android:supportsPictureInPicture="true"
    android:resizeableActivity="true"
    tools:targetApi="26" />

Auto Transition to PiP

Handle the PiP transition in your Activity:

class VideoActivity : AppCompatActivity() {
    override fun onUserLeaveHint() {
        super.onUserLeaveHint()
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            val rational = Rational(16, 9)
            val params = PictureInPictureParams.Builder()
                .setAspectRatio(rational)
                .build()
            enterPictureInPictureMode(params)
        }
    }
}

Custom Actions in PiP

Add custom actions available in PiP mode:

private fun createPiPActions() {
    val playPauseAction = RemoteAction(
        Icon.createWithResource(this, R.drawable.ic_pause),
        "Pause",
        "Pause the video",
        PendingIntent.getBroadcast(
            this, 0, Intent(ACTION_PLAY_PAUSE),
            PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
        )
    )

    val params = PictureInPictureParams.Builder()
        .setActions(listOf(playPauseAction))
        .build()
    enterPictureInPictureMode(params)
}

Handling PiP Resize Events

Compose naturally handles PiP resizing, but you can optimize layouts:

@Composable
fun VideoPlayer(isPiP: Boolean) {
    val videoHeight = if (isPiP) 150.dp else 300.dp
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(videoHeight)
    ) {
        VideoContent()
    }
}