ステータスバーとナビゲーション バーをまとめて「システムバー」と呼びます。バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。
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 は、ジェスチャー ナビゲーション モードまたはボタンモードで、ユーザー インターフェースのすべての視覚的保護を処理します。
ジェスチャー ナビゲーション モード: システムは動的な色調整を適用します。これにより、システムバーのコンテンツは背後にあるコンテンツに応じて色が変化します。次の例では、ナビゲーション バーのハンドルをライト コンテンツの上に配置すると暗い色に変わり、その逆も同様です。
図 15: 動的な色調整 ボタンモード: システムバー（API レベル 29 以降の場合）または透明なシステムバー（API レベル 28 以前）の背後に半透明のスクリムを適用します。
図 16: システムバーの背後にあるコンテンツに応じて色が変化する動的な色調整
キーボードとナビゲーション
各ナビゲーション タイプは画面キーボードに適切に反応し、ユーザーはキーボード タイプの非表示や変更などのアクションを実行できます。円滑なキーボード遷移を実現するには、画面下部から上下にスライドするキーボードによるアプリの遷移を同期するスムーズな遷移を実現するには、WindowInsetsAnimationCompat を使用します。
没入モード
ユーザーが映画を見ているときなど、全画面表示が必要な場合は、システムバーを非表示にできます。その場合でも、ユーザーがタップしてシステムバーと UI を表示して、システム コントロールを操作したり、システム コントロールを操作したりできるようにする必要があります。 全画面モードの設計の詳細、または没入モードのシステムバーを非表示にする方法をご確認ください。