最小化されたコントロール バーは、コントロールとメタデータの最小セットを表示するために使用されます。選択すると、フルスクリーン オーバーレイが開いて大きなコントロール バーと追加のコントロールが表示されます。
たとえば、メディアアプリのコントロール バーを最小化すると、音楽の再生中にアプリ全体で少数の再生コントロールとメタデータを利用できます。また、全画面表示の再生ビューを開くこともできます。
構造
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 |
例