メディアのカスタマイズ

メディアは一連のシステムアプリ(電話アプリ、アプリ ランチャーを含む)に属します。こうしたアプリは、AOSP 構造のさまざまなレベルで定義された共通のスタイルとアセットを共有します。

  • framework/base。Android のベーススタイルはすべて、ここで定義されています。
  • packages/services/Car/car_product/overlay。Android Automotive OS の AOSP のデザインを生成するために標準のフレームワーク / ベースリソースを変更するビルドタイム オーバーレイが含まれています。OEM はこのオーバーレイを除外し、独自のオーバーレイを使用することもできます。
  • packages/apps/Car/libs/car-ui-lib。このライブラリは、システムアプリとカスタマイズ用に設計されたバンドルされていないアプリに共通の、AAOS コンポーネントとリソースを定義します。詳しくは、Car UI ライブラリ統合ガイドをご覧ください。
  • packages/apps/Car/libs/car_app_common。Automotive システムアプリ間で共有される共通の色とスタイルです。OEM は、上記の car_product/overlay と同様に、オーバーレイを使用してこれらの要素をカスタマイズできます。
  • packages/apps/Car/libs/car_media_common。メディアと他のメディア UI の間で共有される要素(ホーム画面のメディア ウィジェットなど)が含まれます。
  • packages/apps/Car/Media.。システムアプリはすべて、Theme.CarUi から拡張された独自のテーマを使用します(car-ui-lib で定義)。

Android Automotive AOSP では、メディアの 2 つのプレゼンテーションが提供されます。

  • メディア UI。ユーザーは、ログイン、コンテンツのブラウジング、詳細な再生コントロールの使用ができます。
  • ホーム画面のメディア ウィジェット。主要なメディア再生コントロール機能をホーム画面で使用できるようにします。

メディア ユーザー インターフェース

メディア UI の構造を下図に示します。

メディア UI

図 1. メディア ユーザー インターフェース

UX と UI のガイドラインや、メディアのさまざまなコンポーネントの空間構造について詳しくは、空間モデルをご覧ください。

AppBarView: ツールバー

メディア UI ツールバーは、電話アプリやラジオなどの他のシステムアプリと共有されるコンポーネントです。ツールバーをカスタマイズする方法については、Car UI ライブラリ統合ガイドをご覧ください。

メディアのアートワークの最大サイズ

取得するアートワークの最大サイズをメディアアプリに通知するために、システムに media_items_bitmap_max_size_px をオーバーレイできます。そのためには、ルートヒントとして EXTRA_MEDIA_ART_SIZE_HINT_PIXELS を送信します。その結果、画像をダウンロードする際の帯域幅を節約できます。詳しくは、developer.android.com の MediaConstants をご覧ください。

ブラウズ フラグメント

ブラウズは、主に Car UI RecyclerView(スクロールバーの位置、矢印、マージンを処理)で構成され、ヘッダー、グリッド アイテム、アイコン グリッド アイテム、リストアイテム、アイコン リストアイテムなど、さまざまなタイプのアイテムをブラウジングできます。

最小化された再生コントロール

ブラウズ フラグメントを表示し、メディア アイテムを選択すると、最小化された再生コントロール ビューが表示されます。このビューの構造を下図に示します。

最小化された再生コントロール

図 2. 最小化された再生コントロール

ブラウズリスト

デベロッパーは、一連のスタイルヒントコンテンツ スタイルを適用するをご覧ください)を使用して、メディア ブラウズ コンテンツの表示をカスタマイズできます。OEM はこれらのスタイルを遵守し、デザイン システムに合わせてプレゼンテーションを調整する必要があります。

サポートされているアイテムタイプと、それぞれのレイアウトは次のとおりです。

  • LIST_ITEMmedia_browse_list_item.xml)。一般に、プレイリスト アイテムやお気に入りなど、ポッドキャストのエピソードに使用します。
  • ICON_LIST_ITEM media_browse_list_icons_item.xml)。メディア アイテムに含まれる画像が実際のアルバムアートではなくアイコンである、カテゴリまたはメニュー オプションに使用します。
  • GRID_ITEMmedia_browse_grid_item.xml)。一般に、曲やプレイリストなどの再生可能なアイテムに使用します。
  • ICON_GRID_ITEMmedia_browse_grid_icons_item.xml)。ICON_LIST_ITEM と同様に、カテゴリに使用します。
  • HEADERmedia_browse_header_item.xml)。メディア アイテムをセクションにまとめるために使用します。

再生画面

下記を表示するには、最小化された再生コントロールを展開します。

  • 現在再生中のメディア アイテムのメタデータ(タイトルとサブタイトルを含む)。
  • 完全な再生コントロール。
  • 再生キュー(最近再生したアイテムまたは次に再生するアイテムを表示するために使用)。

再生画面のコンポーネントは下図のとおりです。

再生画面

図 3. 再生画面

再生画面では、ツールバーはアプリの他の部分と共有されません。代わりに、画面の上部の要素が、この画面によって個別に管理されます。

再生コントロール

再生画面には再生コントロールの拡張セットが含まれ、コントロール行にまとめられています。第二の行(下図の最上部の行)は、最初の行のスペースが、PlaybackStateCompat#getActions() からメディアアプリによって返されたアクションをすべて表示するには不十分な場合にのみ表示されます。

再生コントロール

図 4. 再生コントロール

OEM は標準アクションのアイコンをカスタマイズできますが、メディアアプリによって提供されたとおりにカスタム アクションのアイコンを表示する必要があります。

ホーム画面のメディア ウィジェット

このウィジェットは、car-media-common のフラグメントとして実装されます。このフラグメントには、上記の再生画面の最小化版が含まれています。同じカスタマイズ ルールと機能が適用されます。

ホーム画面のメディア ウィジェット

図 5. ホーム画面のメディア ウィジェット

上記のアプリセレクタ ボタンは、メディアソース切り替えユーザーフローに記載されているスイッチ機能を使用します。

アプリセレクタ ボタンに現在のメディアソース アイコンを使用するには、platform/packages/apps/Car/libs/car-media-common/res/values/bools.xml で定義されている use_media_source_logo_for_app_selector フラグをオーバーレイして、true に設定します。この変更により、アプリ ツールバーの反対側にあるメディアソース アイコンが非表示になります。このカスタマイズは、メディア センター アプリとリファレンス ラジオ アプリにも適用されます。

メディアアプリ選択ボタン

図 6: メディアアプリ選択ボタン

再生、一時停止、停止ボタンのレイアウト

再生 / 一時停止 / 停止ボタンのレイアウトは、「この曲なに?」と、最小化された再生コントロール ビュー用にカスタマイズできます。どちらのレイアウトも packages/apps/Car/libs/car-media-common/res/layout/ で定義されています。

ボタンのレイアウトをカスタマイズするには、ビルド時のオーバーレイを play_pause_stop_button_layout.xmlminimized_play_pause_stop_button_layout.xml に適用します。

再生キューの現在のアイテムをハイライト表示する

現在の再生キューアイテムの状態が selected に設定されるため、色状態リスト(色状態リストのリソース)や状態リスト ドローアブル(ドローアブルのリソース)などの状態リソースを使用してカスタマイズできます。必要なスタイル変更を適用するために、キュー アイテム レイアウトをオーバーライドできます(packages/apps/Car/Media/res/layout/queue_list_item.xml)。

現在の再生キューアイテムの横にアイコンを表示することもできます。

  • packages/apps/Car/Media/res/values/bools.xml で定義されているブール値フラグ show_icon_for_now_playing_queue_list_item をオーバーレイして true にします。

    再生タイマーを非表示にするには、show_time_for_now_playing_queue_list_itemfalse に設定します。

  • アイテムのルートビューのフォアグラウンドまたはバックグラウンド(packages/apps/Car/Media/res/layout/queue_list_item.xml)や、アイテムのビュー階層内の別のビューなど、状態ドローアブルを使用します。

図 7. 再生キューの現在のアイテムをハイライト表示する