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

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

図 1: ユーザーは、アプリを使用していないときでも、動画エクスペリエンスを続行できます。

テイクアウェイ

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

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

デフォルトでは、システムは自動的にアプリの PIP をサポートしていないため、この機能をサポートするには宣言が必要です。

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

コントロール

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

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

PIP モードでは、アクティビティが小さなウィンドウに表示されます。このモードでは、ユーザーはアプリの他の UI 要素を操作できず、PIP ウィンドウ内の小さな UI 要素の詳細が見づらくなる可能性があります。

図 2: デフォルトの PIP コントロール


図 3: カスタム PIP コントロールの例

切り替え効果

PIP へスムーズに開始アニメーション

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

Android 12 では、全画面ウィンドウと PIP ウィンドウ間のアニメーション遷移に関して、外観が大幅に改善されました。該当する変更をすべて実装することを強くおすすめします。一度実装すれば、それ以上の操作を必要とせずに、これらの変更は折りたたみ式デバイスやタブレットなどの大画面に自動的にスケーリングされます。

アプリにこうしたアップデートが含まれていない場合、PIP 遷移は引き続き機能しますが、アニメーションは洗練されません。たとえば、全画面から PIP モードに移行すると、遷移中に PIP ウィンドウが消え、移行完了時に再び表示される場合があります。

Android 12 以降では、PictureInPictureParams.Builder.setAutoEnterEnabled(true) フラグを使用すると、ジェスチャー ナビゲーションを使用して PIP モードの動画コンテンツに移行する場合(全画面表示からホームにスワイプする場合など)のアニメーションがよりスムーズになります。アプリが ENTERTAINMENTCOMMUNICATION、または VIDEO_PLAYER のアプリカテゴリに該当する場合は、この方法をおすすめします。

アプリにこの変更が含まれていない場合、ジェスチャー ナビゲーションを使用した PIP 遷移は引き続き機能しますが、アニメーションは洗練されません。動画 1 はその例を示しています。ウィンドウがアプリアイコンに縮小して消え、移行が完了すると再度表示されます。

動画 1: PIP に setAutoEnterEnabled が適切に実装されていない場合のトランジション エクスペリエンスが洗練されていない

動画 2 は同じ遷移の例を示していますが、setAutoEnterEnabled がアプリに追加されています。

動画 2: 洗練された移行エクスペリエンス

スムーズな動画ビジュアル

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 サンプルをご覧ください。

Usage

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

以下に、考えられる対応の例を示します。

  • ユーザーがホームボタンをタップするか、上にスワイプしてホームに移動したときに、アクティビティを PIP モードにできます。ユーザーが別のアクティビティを同時に実行している間も、Google マップはこのようにしてルートを表示します。

    図 4: 道案内の継続に使用する PIP を使用
  • ユーザーが動画から他のコンテンツに移動してブラウジングを開始したら、動画を PIP モードに切り替えます。

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

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

邪魔にならない程度に視聴エクスペリエンスを補完するインタラクション パターンを利用する。たとえば、動画がコンテンツのエピソードの終わりにある場合、ホーム画面を離れるときに PIP に入るには、再生に戻って停止したり、小さなコントロールを操作したりするために、追加のユーザー操作が必要になります。

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

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

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

    図 5: デフォルトの PIP コントロール
  • ウィンドウをダブルタップすると、現在の PIP サイズと最大 / 最小 PIP サイズを切り替えることができます。たとえば、最大化したウィンドウをダブルタップすると最小サイズになり、その逆も同様です。

    図 6: ダブルタップで最小サイズと最大サイズを切り替える
  • ウィンドウを左端または右端にドラッグします。ウィンドウの非表示を解除するには、非表示になったウィンドウの表示部分をタップするか、その部分をドラッグします。

    図 7: スタッシュされた PIP
  • ピンチ操作で PIP ウィンドウのサイズを変更できます。

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

    図 8: 下にスワイプ

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