Android システムバー

ステータスバー、キャプション バー、ナビゲーション バーを合わせて「システムバー」と呼びます。バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。

Android OS、入力方法、その他のデバイス機能とのインタラクション用の UI を設計する場合でも、システムバーの視認性を考慮することが重要です。

図 1. システムバーの後ろにある画像。

まとめ

  • アプリを設計する際は、システムバーを含めます。UI セーフゾーン、システム操作、入力方法、ディスプレイ カットアウト、ステータスバー、字幕バー、ナビゲーション バー、その他のデバイス機能を考慮してください。

  • システムのステータスバーとナビゲーション バーを透明または半透明のままにして、これらのバーの背後にコンテンツを描画してエッジ ツー エッジにします。

ステータスバー

Android では、ステータスバーに通知アイコンやシステム アイコンが表示されます。ユーザーはステータスバーを下に引っ張って通知シェードにアクセスすることで、ステータスバーを操作します。ステータスバーのスタイルは、透明または半透明にできます。

図 2. トップ アプリバーの上にハイライト表示されたステータスバー領域。

ステータスバー アイコン

ステータスバーのアイコンは、コンテキスト、時刻、ユーザーが設定した設定やテーマ、その他のパラメータによって表示が異なる場合があります。詳細については、システムバーのアイコンをご覧ください。

図 3. ライトモードとダークモードのステータスバー アイコン。

通常、通知が届くとステータスバーにアイコンが表示されます。これにより、通知ドロワーに表示する内容があることをユーザーに知らせます。チャンネルを表すアプリアイコンやシンボルを使用できます。通知の設計をご覧ください。

図 4. ステータスバーの通知アイコン。

ステータスバーのスタイルを設定する

ステータスバーを透明または半透明にして、アプリ コンテンツが画面全体に広がるようにします。次に、アイコンのコントラストが適切になるように、システムバー アイコンのスタイルを設定します。

Android 15 ではエッジ ツー エッジが強制適用され、ステータスバーはデフォルトで透明になります。下位互換性のために enableEdgeToEdge() を呼び出します。

次の左側の画像では、ステータスバーは透明で、TopAppBar の緑色の背景がステータスバーの後ろに描画されています。

図 5. コンテンツを際立たせるために、端から端まで表示しましょう。不透明なシステムバーは使用しないでください。

透明なステータスバーは、UI がステータスバーの下に表示されない場合や、ステータスバーの下に画像が描画される場合に最適です。半透明のステータスバーは、UI がステータスバーの下にスクロールする場合に最適です。グラデーション保護の詳細については、エッジツーエッジ デザインをご覧ください。

図 6. システム ステータスバーの背後に 2 つのペインにまたがるデュアルトーン グラデーション保護を備えたエッジ ツー エッジ アプリ。

Android では、ユーザーは「戻る」、「ホーム」、「概要」の各コントロールを使用してナビゲーションを操作できます。

  • [戻る] を押すと、前のビューに直接戻ります。
  • ホーム画面がアプリからデバイスのホーム画面に切り替わります。
  • 概要には、アクティブなアプリと最近閉じていないアプリが表示されます。

ユーザーは、ジェスチャー ナビゲーション（推奨）や 3 ボタン ナビゲーションなど、さまざまなナビゲーション バーの構成から選択できます。最適なエクスペリエンスを提供するには、複数の種類のナビゲーションを考慮してください。

ジェスチャー ナビゲーション

ユーザーが設定で選択していない限り、ジェスチャー ナビゲーションを使用することをおすすめします。ジェスチャー ナビゲーションでは、戻る、ホーム、概要のボタンは使用されません。代わりに、アフォーダンスとして 1 つのジェスチャー ハンドルが表示されます。ユーザーは、画面の左端または右端からスワイプして戻る操作を行い、下から上にスワイプしてホームに移動します。上にスワイプして長押しすると、概要が表示されます。

ジェスチャー ナビゲーションは、モバイルと大画面の両方の画面でデザインするための、よりスケーラブルなナビゲーション パターンです。最適なユーザー エクスペリエンスを提供するには、次の手順でジェスチャー ナビゲーションを考慮してください。

  • エッジ ツー エッジのコンテンツをサポート。
  • ジェスチャー ナビゲーションの切り欠きの下にインタラクションやタップ ターゲットを追加しないでください。

詳しくは、ジェスチャー ナビゲーションのサポートを追加するをご覧ください。

図 7. ジェスチャー ハンドル ナビゲーション バー。

3 ボタン ナビゲーション

3 ボタン ナビゲーションには、「戻る」、「ホーム」、「概要」の 3 つのボタンがあります。

図 8. 3 ボタン ナビゲーション バー。

その他のナビゲーション バーのバリエーション

Android のバージョンとデバイスによっては、ユーザーが他のナビゲーション バーの設定を利用できる場合があります。たとえば、2 ボタン ナビゲーションには、ホームと戻るの 2 つのボタンがあります。

図 9. 2 ボタン ナビゲーション バー。

ナビゲーション バーのアイコンは、ユーザーが設定した設定やテーマに応じて表示が異なる場合があります。詳細については、システムバーのアイコンをご覧ください。

ナビゲーション バーのスタイルを設定する

Android は、ジェスチャー ナビゲーション モードとボタンモードでユーザー インターフェースの視覚的な保護を処理します。システムはダイナミック カラー調整を適用します。この調整では、システムバーのコンテンツが背後にあるコンテンツに基づいて色が変化します。

ジェスチャー ナビゲーション モード

Android 15 をターゲットとする、または Activity で enableEdgeToEdge を呼び出すと、システムは透明なジェスチャー ナビゲーション バーを描画し、動的色適応を適用します。次の例では、ナビゲーション バーのハンドルが明るいコンテンツの上に配置されている場合は暗い色に変わり、その逆も同様です。

図 10. 動的な色調整。

透明なジェスチャー ナビゲーション バーを使用することをおすすめします。

すべきこと

ジェスチャー ナビゲーション バーを透明にします。

すべきでないこと

ジェスチャー ナビゲーション バーに背景を追加します。

ボタンのモード

Android 15 をターゲットとする、または Activity で enableEdgeToEdge を呼び出すと、ボタン ナビゲーション バーの背後に半透明のスクリムが適用されます。これは、Window.setNavigationBarContrastEnforced() を false に設定することで削除できます。

図 11. 透明なスクリーンを使用したダイナミック カラー適応。

ボトム アプリバーまたはボトム アプリ ナビゲーション バーがある場合や、UI が 3 ボタン ナビゲーション バーの下でスクロールしない場合は、透明な 3 ボタン ナビゲーション バーを使用することをおすすめします。透明なナビゲーション バーを取得するには、Window.setNavigationBarContrastEnforced() を false に設定し、ボトム アプリバーをパディングして、システム ナビゲーション バーの下に描画します（図 7、8、9 を参照）。詳しくは、システムバーの保護をご覧ください。

コンテンツのスクロールには、半透明の 3 ボタン ナビゲーションを使用してください。半透明のナビゲーション バーに関する考慮事項については、をご覧ください。

キーボードとナビゲーション

図 12. ナビゲーション バー付きの画面キーボード。

各ナビゲーション タイプは、画面上のキーボードに適切に反応し、ユーザーがキーボードの非表示化やキーボード タイプの変更などの操作を行えるようにします。アプリの遷移と画面の下部からキーボードがスライドする遷移を同期してスムーズに移行するには、WindowInsetsAnimationCompat を使用します。

ディスプレイ カットアウト

ディスプレイ カットアウトとは、一部のデバイスにある表示サーフェスに拡張された領域です。ディスプレイ カットアウトにより、前面センサーのスペースを確保できます。ディスプレイの切り欠きはメーカーによって異なる場合があります。ディスプレイの切り欠きがコンテンツ、画面の向き、エッジツーエッジとどのように連携するかを検討します。

図 13. ディスプレイ カットアウトの例。

没入モード

図 14. 横向きのモバイル デバイスで全画面表示されている没入モード。

ユーザーが映画を視聴しているときなど、全画面表示が必要な場合は、システムバーを非表示にできます。ユーザーはタップしてシステムバーを表示し、システム コントロールを操作できます。全画面モード向けの設計について詳しくは、没入モードのシステムバーを非表示にする方法をご覧ください。