ピクチャー イン ピクチャー

PiP 記号と Google Play ロゴのヒーロー画像

ピクチャー イン ピクチャー（PIP）は、フルスクリーン動画を再生するアクティビティを対象としたマルチウィンドウ モードの一種です。ユーザーは、アプリ間を移動したり、メイン画面でコンテンツをブラウジングしたりしながら、画面の隅に固定された小さなウィンドウで動画を見続けることができます。

図 1: アプリを使用していない場合でも、ユーザーは動画を視聴し続けることができます

要点

  • アクティビティが PIP モードのときは、UI 要素を非表示にして動画の再生を継続するようにします。
  • 動画以外のコンテンツのシームレスなサイズ変更を無効にします。
  • 動画再生アクティビティでは、UI の数を最小限にすることがユーザー エクスペリエンスの向上につながります。
  • 動画コンテンツ以外を表示しないようにしてください。

アプリにピクチャー イン ピクチャーのサポートを追加する

デフォルトでは、システムはアプリによる PIP の使用を自動的にサポートすることはありません。この機能をサポートするには、宣言する必要があります。

PIP ウィンドウは、画面の最上位レイヤーの、システムによって選択された隅の領域に表示されます。

コントロール

デフォルトでは、Android はウィンドウを閉じる、全画面に戻す、設定、メディア再生のための PIP コントロールを提供します。アプリは、カスタム アクションと適切なアイコン アセットを追加して、ユーザーが PiP コンテンツを操作できるようにすることができます。

ユーザーは、モバイル デバイスでウィンドウをタップするか、テレビリモコンでメニューを選択して、PIP ウィンドウのメニューからこれらのコントロールを表示できます。アプリにアクティブなメディア セッションがある場合は、再生、一時停止、次へ、前のコントロールも表示されます。これらの制御を追加する方法をご覧ください。

PIP モードでは、アクティビティは小さなウィンドウに表示されます。このモードでは、ユーザーはアプリの他の UI 要素を操作できません。また、PIP ウィンドウの小さな UI 要素の詳細が見えづらい場合があります。

デフォルトのピクチャー イン ピクチャー コントロールを示すユーザー インターフェース

デフォルトの PiP コントロール。

カスタム PiP コントロールの例

カスタム PiP コントロールの例。

使用方法

ユーザーがアプリ内だけでなく、デバイス全体で動画の視聴を継続できるようにします。現在のアクティビティが PIP モードに入るタイミングは、アプリで制御します。たとえば、現在のビューを離れたり、ホーム画面に移動するために画面を下から上にスワイプしたりする操作が考えられます。

考えられるアクションの例を次に示します。

  • ユーザーがホームボタンをタップするか、または画面を下から上にスワイプしてホーム画面に移動したら、アクティビティを PIP モードに切り替えます。たとえば、Google マップは、ユーザーが別のアクティビティを同時に実行している間、この方法でルートを表示し続けます。

    図 4: ピクチャー イン ピクチャーを使用して道案内を継続する

  • ユーザーが動画から他のコンテンツに移動してブラウジングを開始したら、動画を PIP モードに切り替えます。

  • ユーザーが見ている動画コンテンツがエピソードの終盤に差し掛かったら、動画を PIP モードに切り替えます。メイン画面には、シリーズの次のエピソードに関する宣伝情報やあらすじを表示します。

  • ユーザーが動画を見ながら他のコンテンツをキューに追加できるようにします。PIP モードで動画を再生し続けながら、メイン画面にコンテンツ選択アクティビティを表示します。

視聴体験を補完し、視聴を妨げないインタラクション パターンを使用します。たとえば、動画がコンテンツのエピソードの最後にある場合、ホーム画面を離れるときに PiP に入ると、戻って再生を停止したり、小さなコントロールを操作したりするために、ユーザーが追加の操作を行う必要があります。

動画再生アクティビティが PIP モードのときに、ユーザーがメイン画面でコンテンツをブラウジングして新しい動画を選択することがあります。そのような場合、新しい動画は既存の再生アクティビティを全画面表示モードにして再生するようにします。新しいアクティビティを起動すると、ユーザーを混乱させる可能性があるためです。

インタラクション パターン

ユーザーは、PIP ウィンドウを別の位置にドラッグできます。

PIP ウィンドウをシングルタップすると、全画面表示への切り替え、閉じるボタン、設定ボタン、アプリが提供するカスタム アクション（再生コントロールなど）が表示されます。

図 5: デフォルトの PiP コントロール

ウィンドウをダブルタップすると、現在の PIP サイズと最大または最小の PIP サイズを切り替えることができます。たとえば、最大化されたウィンドウをダブルタップすると最小化され、その逆も同様です。

図 6: ダブルタップで最小サイズと最大サイズの PIP を切り替える

ウィンドウを左端または右端にドラッグして、退避させます。ウィンドウの退避を解除するには、退避中のウィンドウの表示されている部分をタップするか、ドラッグして引き出します。

図 7: PiP が格納された状態

ピンチ操作で PIP ウィンドウのサイズを変更できます。

PiP を下にスワイプしてウィンドウを削除します。

図 8: 下にスワイプ

切り替え効果

PiP モードへの切り替え時と PiP モードからの切り替え時のユーザー エクスペリエンスを向上させるには、エントリと終了のトランジションをカスタマイズします。

PiP アニメーションへのスムーズな移行

ユーザーが PiP モードをトリガーすると、現在のアクティビティが全画面表示から小さなウィンドウに縮小され、UI をオーバーレイすることなくコンテンツの表示が継続されます。

Android 12 では、全画面ウィンドウと PIP ウィンドウ間の切り替えに外観上の改善が導入されました。実装されると、これらのアップデートはタブレットや折りたたみ式デバイスに自動的にスケールされます。

これらの更新がない場合、トランジションは機能しますが、洗練されていません。たとえば、切り替え中に PIP ウィンドウが一時的に消えることがあります。

Android 12 以降では、PictureInPictureParams.Builder.setAutoEnterEnabled(true) フラグにより、ジェスチャーの遷移（上にスワイプしてホーム画面に戻るなど）がスムーズになります。ENTERTAINMENT、COMMUNICATION、VIDEO_PLAYER のアプリにはこの方法をおすすめします。

このフラグがない場合、ジェスチャーによる切り替えでは、ウィンドウがアプリ アイコンに縮小してから、PIP ウィンドウとして再表示されます（動画 1 を参照）。

PiP が setAutoEnterEnabled を適切に実装していない場合、切り替えがスムーズでない

アプリに setAutoEnterEnabled を追加し、移行エクスペリエンスを改善しました。

スムーズな動画映像

Android 8.0 で PIP を導入したとき、sourceRectHint は、PIP に移行した後に表示されるアクティビティの領域を示していました。たとえば、動画プレーヤーの動画ビューの境界などです。Android 12 以降では、OS が sourceRectHint を使用して、PIP モードの開始時と終了時のアニメーションをよりスムーズに実装します。

アプリが適切な sourceRectHint を提供していない場合でも、PIP の切り替えは機能しますが、アニメーションの完成度は低くなります。たとえば、動画 3 は、全画面モードから PiP モードへの移行の洗練されていない例を示しています。全画面ウィンドウが PiP ウィンドウに縮小された後、黒いオーバーレイで覆われ、その後、動画が再び表示されます。

動画 3: PIP に sourceRectHint が適切に実装されていない場合、トランジションがスムーズに行われない

sourceRectHint が適切に実装された場合の PIP アニメーションの例については、前のセクションの動画 2 をご覧ください。

洗練されたトランジション エクスペリエンスを実現するためのリファレンスとして、Android Kotlin PictureInPicture サンプルを参照してください。

PiP の実装について詳しくは、ピクチャー イン ピクチャーのデベロッパー ドキュメントをご覧ください。