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

最小化されたコントロール バーは、コントロールとメタデータの最小セットを表示するために使用されます。選択すると、フルスクリーン オーバーレイが開いて大きなコントロール バーと追加のコントロールが表示されます。

たとえば、メディアアプリのコントロール バーを最小化すると、音楽の再生中にアプリ全体で少数の再生コントロールとメタデータを利用できます。また、全画面表示の再生ビューを開くこともできます。


構造

1. コンテンツ タイル
2. メタデータ
3. コントロール

仕様

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

最小化されたコントロール バーとテキスト オーバーフロー


レイアウトのスケーリング

以下のリファレンス レイアウトは、最小化されたコントロール バーをさまざまな幅と高さの画面に適応させる方法を示しています。(幅と高さのカテゴリは、レイアウトのセクションで定義されます)。すべてのピクセル値は、ダウンサンプリングまたはアップサンプリングが行われる前に、レンダリングされたピクセル内にあります。

標準幅画面

ワイド スクリーン

エクストラワイド画面とスーパーワイド画面


スタイル

タイポグラフィ

書体のスタイル 書体 重量 サイズ(dp)
本文 1 Roboto 標準 32
本文 3 Roboto 標準 24

要素 色(日中モード) カラー(夜間モード)
メインのタイプ White 白人 @ 88%
サブタイプ 白人 @ 72% 白色 @ 60%
アイコン White 白人 @ 88%
経過時間インジケーター サードパーティのアクセント サードパーティのアクセント
残り時間インジケーター #464A4D #464A4D
最小化されたコントロール バーの背景 #0E1013 @ 84% #0E1013 @ 88%
グラデーションの切り捨て テキスト領域の 10% に 0 ~ 100% の黒色 テキスト領域の 10% に 0 ~ 100% の黒色

サイズ調整

要素 サイズ(dp)
アイコン 44
コンテンツ タイル 96
進行状況インジケーター 84
進行状況インジケーターの追跡 4
最小化されたコントロール バーの高さ 128
角の丸みの丸み(R1) 4

標準幅よりも広い画面ではコントロール バーを最小化します
標準幅画面ではコントロール バーを最小化します