ステータスバーとナビゲーション バーを総称して「システムバー」と呼びます。 バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。
Android OS、入力方法、その他のデバイス機能を操作する UI を設計する場合、システムバーの視認性の高さを考慮することが重要です。システムバーが確実に考慮されるように、ほとんどのレイヤの最上位にシステムバーを配置します。
テイクアウェイ
デザインにシステムバーを含めて、UI セーフゾーン、システム操作、入力方法、ディスプレイ カットアウト、その他のデバイス機能を考慮します。最上位レイヤにシステムバーを配置して、システムバーが確実に考慮されるようにします。
推奨: システムバーを透明にしてアプリを全画面表示し、バーの下に UI を表示させ、完全なエッジ ツー エッジのエクスペリエンスを提供します。
両方のバーを透明に設定できない場合は、バーの色をアプリの本体の色と一致させます。たとえば、下部のナビゲーション バーの色をジェスチャー バーの色に、上部のステータスバーの色を本体の色と一致させます。
図 2: システムバーの色とアプリのボディの色を一致させる ジェスチャー インセットの下にタップ操作を追加したり、ターゲットをドラッグしたりしないでください。エッジ ツー エッジやジェスチャー ナビゲーションと競合します。
図 3: システム ジェスチャー インセットこの領域の下にタップ ターゲットを配置しないようにしてください
システムバーの背後にコンテンツを描画する
エッジ ツー エッジ機能により、Android はシステムバーの下に UI を描画し、より没入感のあるエクスペリエンスを実現できます。ナビゲーション バーを透明にすることはユーザーからの要望が多いため、エッジ ツー エッジの使用をおすすめします。（エッジ ツー エッジをサポートする方法を確認してください）。
アプリはインセットに反応することで、コンテンツの重複に対処できます。インセットは、Android OS の UI の一部（ナビゲーション バーやステータスバーなど）や、ディスプレイ カットアウトなどの物理デバイス機能との重複を避けるために、アプリのコンテンツをどの程度パディングする必要があるかを示します。
エッジ ツー エッジのユースケース向けに設計する場合は、次のタイプのインセットに注意してください。
- システムバー インセットは、タップ可能で、システムバーによって目立たなくすべきでない UI に適用されます。
- システム ジェスチャー インセットは、アプリよりもシステムで使用されるジェスチャー ナビゲーションの領域に適用されます。
ステータスバー
Android では、ステータスバーに通知アイコンやシステム アイコンが表示されます。ユーザーはステータスバーを下に引き下げて通知シェードにアクセスし、ステータスバーを操作します。
ステータスバーの表示は、コンテキスト、時刻、ユーザーが設定した設定やテーマ、その他のパラメータによって変わります。次の例のように、ステータスバーのスタイルを設定することもできます。
エッジ ツー エッジが必要になったため、アプリのコンテンツが画面全体に表示されるようにします。次の例に示すように、エッジ ツー エッジのコンテンツを含む透明なシステムバーを使用します。
通知が届くと、通常はステータスバーにアイコンが表示されます。これにより、通知ドロワーに何かがあることがわかります。チャンネルを表すアプリのアイコンやシンボルになります。通知の設計をご覧ください。
ステータスバーのスタイルを設定する
カスタムの色やスタイルを使用し、透明度と不透明度を設定して、ステータスバーの背景をアプリのテーマの一部としてスタイル設定します。
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
背景色を手動で設定する場合は、必要に応じてステータスバーのコンテンツをライトまたはダークにスタイル化し、コントラストを最適化できます。
ディスプレイ カットアウトとステータスバー
ディスプレイ カットアウトとは、一部のデバイスではディスプレイ表面まで延びる領域で、前面センサー用のスペースがあります。ステータスバーの外観に影響する可能性があります。ディスプレイ カットアウトはメーカーによって異なる場合があります。
ディスプレイ カットアウトをサポートする方法をご覧ください。
ナビゲーション バー
Android では、「戻る」、「ホーム」、「概要」のコントロールを使用してナビゲーションを制御できます。
- [戻る] は前のビューに直接戻ります。
- ホームがアプリからデバイスのホーム画面に移行します。
- [概要] には、アプリが起動中で、最近起動されたことが示されます。
ユーザーは、ジェスチャー ナビゲーション（推奨）や 3 ボタン ナビゲーションなど、さまざまなナビゲーション バーの構成から選択できます。
ジェスチャー ナビゲーション
Android 10（API レベル 29）で導入されたナビゲーションの種類はジェスチャー ナビゲーションですが、ユーザー設定をオーバーライドすることはできません。ジェスチャー ナビゲーションは、「戻る」、「ホーム」、「概要」のボタンを使用せず、アフォーダンス用の単一のジェスチャー ハンドルを表示します。ユーザーは、画面の左端または右端からスワイプすることで、前後または下から上にスワイプしてホームに移動します。上にスワイプして長押しすると、概要が表示されます。
ジェスチャー ナビゲーションは、モバイル画面や大画面デザイン向けの、よりスケーラブルなナビゲーション パターンです。最適なユーザー エクスペリエンスを提供するには、以下のようにジェスチャー ナビゲーションを考慮します。
- エッジ ツー エッジのコンテンツのサポート。
- ジェスチャー ナビゲーション インセットに操作やタップ ターゲットを追加しないようにします。
詳しくは、ジェスチャー ナビゲーションの実装をご覧ください。
3 ボタン ナビゲーション
3 ボタン ナビゲーションには、「戻る」、「ホーム」、「概要」の 3 つのボタンがあります。
その他のナビゲーション バーのバリエーション
Android のバージョンやデバイスによっては、ユーザーが他のナビゲーション バー構成を使用できる場合があります。たとえば、2 ボタン ナビゲーションでは、「ホーム」と「戻る」の 2 つのボタンが用意されています。
ナビゲーション スタイルを設定する
次の例は、ナビゲーション スタイルを実装する方法を示しています。
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android は、ジェスチャー ナビゲーション モードまたはボタンモードでユーザー インターフェースのすべての視覚的保護を処理します。
ジェスチャー ナビゲーション モード: システムは動的な色調整を適用します。これにより、システムバーのコンテンツは、その背後にあるコンテンツに基づいて色が変化します。次の例では、明るいコンテンツの上に配置するとナビゲーション バーのハンドルが暗い色に変わり、その逆も同様です。
図 13: ダイナミック カラー適応 ボタンモード: システムバー（API レベル 29 以降の場合）または透明なシステムバー（API レベル 28 以前の場合）の背後に、半透明のスクリムが適用されます。
図 14: ダイナミック カラー調整（システムバーの色が背後のコンテンツに応じて変わる）
キーボードとナビゲーション
各ナビゲーション タイプは画面キーボードに適切に反応し、ユーザーはキーボード タイプを閉じる、またはキーボード タイプを変更するなどの操作を実行できます。キーボードの遷移をスムーズにするには、WindowInsetsAnimationCompat を使用して、キーボードが画面下部から上下にスライドしたときにアプリの遷移と同期するようにします。
没入モード
ユーザーが映画を見ているときなど、全画面表示がしたいときは、システムバーを非表示にできます。ユーザーがシステム コントロールを操作または操作するために、タップしてシステムバーと UI を表示できるようにする必要があります。詳しくは、全画面モードのデザインまたは没入モードのシステムバーを非表示にする方法をご覧ください。