> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Picture-in-Picture

> CometChat Calling SDK v5 - Picture-in-Picture for Flutter

Enable Picture-in-Picture (PiP) mode to allow users to continue their call in a floating window while using other apps. PiP provides a seamless multitasking experience during calls.

<Note>
  The Flutter Calls SDK provides `enterPipMode()` and `isPipSupported()` methods on `CallSession` to manage PiP mode. The SDK handles the PiP layout adjustments automatically when PiP is activated.
</Note>

## Platform Differences

PiP behavior differs between Android and iOS:

| Platform    | Behavior                                                                                                                                             |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Android** | Uses the system PiP API. The call UI shrinks into a floating window managed by the OS. Requires `supportsPictureInPicture` in `AndroidManifest.xml`. |
| **iOS**     | Uses a custom overlay approach. The call continues in a compact overlay view within the app. No additional manifest configuration required.          |

<Warning>
  On Android, PiP mode is only available on Android 8.0 (API level 26) and higher. Use `isPipSupported()` to check availability before entering PiP mode.
</Warning>

## Check PiP Support

Check whether the current device supports Picture-in-Picture mode:

```dart theme={null}
CallSession? callSession = CallSession.getInstance();

bool? supported = await callSession?.isPipSupported();
if (supported == true) {
  debugPrint("PiP is supported on this device");
} else {
  debugPrint("PiP is not supported on this device");
}
```

## Enter PiP Mode

Enter Picture-in-Picture mode programmatically:

```dart theme={null}
CallSession? callSession = CallSession.getInstance();

bool? supported = await callSession?.isPipSupported();
if (supported == true) {
  await callSession?.enterPipMode();
}
```

## Enable PiP Layout

You can also use the layout-level PiP methods to adjust the call UI for a PiP-sized window:

```dart theme={null}
await CallSession.getInstance()?.enablePictureInPictureLayout();
```

## Disable PiP Layout

Exit PiP layout and return to the full-screen call interface:

```dart theme={null}
await CallSession.getInstance()?.disablePictureInPictureLayout();
```

## Listen for PiP Events

Monitor PiP mode transitions using `LayoutListener` to update your UI accordingly:

```dart theme={null}
CallSession? callSession = CallSession.getInstance();

callSession?.layoutListener = LayoutListener(
  onPictureInPictureLayoutEnabled: () {
    debugPrint("Entered PiP mode");
    // Hide custom overlays or controls
    hideCustomControls();
  },
  onPictureInPictureLayoutDisabled: () {
    debugPrint("Exited PiP mode");
    // Show custom overlays or controls
    showCustomControls();
  },
  onCallLayoutChanged: (LayoutType layoutType) {},
  onParticipantListVisible: () {},
  onParticipantListHidden: () {},
);
```

<Note>
  Remember to set the `layoutListener` to `null` in your widget's `dispose()` method to prevent memory leaks.
</Note>

## Android Manifest Configuration

For Android, add PiP support to your Activity in `AndroidManifest.xml`:

```xml theme={null}
<activity
    android:name=".MainActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" />
```

| Attribute                  | Description                                      |
| -------------------------- | ------------------------------------------------ |
| `supportsPictureInPicture` | Enables PiP support for the activity             |
| `configChanges`            | Prevents activity restart during PiP transitions |