Android システムバー

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

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

図 1: システムバーの背後の画像

まとめ

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

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

  • タップ ジェスチャーやドラッグ ターゲットをジェスチャーの切り欠きの下に追加しないでください。これらは、エッジツーエッジとジェスチャー ナビゲーションと競合します。

    図 2: システム ジェスチャー インセット。タップ ターゲットをこれらの領域の下に配置しないでください

コンテンツをシステムバーの背後に描画する

エッジツーエッジ機能を使用すると、Android はシステムバーの下に UI を描画して没入感のあるエクスペリエンスを実現できます。これはユーザーからの一般的なリクエストです。

アプリは、インセットに反応することで、コンテンツの重複に対処できます。インセットは、ステータスバー、キャプション バー、ナビゲーション バーなどの Android OS UI の一部や、ディスプレイ カットアウトなどの物理的なデバイス機能と重複しないように、アプリのコンテンツにパディングを適用する必要がある量を表します。Compose と ビューでエッジ ツー エッジをサポートし、インセットを処理する方法について学びます。

エッジからエッジのユースケースを設計する場合は、次のタイプのインセットに注意してください。

  • システムバー インセットは、タップ可能で、システムバーで視覚的に隠れてはならない UI に適用されます。
  • システム ジェスチャー インセットは、アプリよりも優先される、システムで使用されるジェスチャー ナビゲーション領域に適用されます。
  • ディスプレイ カットアウトの切り抜きは、カメラ カットアウトなど、ディスプレイ サーフェス内に延びるデバイス領域に適用されます。

ステータスバー

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

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

ステータスバーのアイコンは、コンテキスト、時刻、ユーザー設定の設定やテーマ、その他のパラメータによって表示が異なる場合があります。ステータスバーのアイコン スタイルは、次の例のように設定できます。

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

アプリのコンテンツが画面全体に表示されるかどうかを確認します。次の例に示すように、エッジ ツー エッジのコンテンツでステータスバーとナビゲーション バーを透明または半透明にします。

図 5: 透明なシステムバーを備えたエッジ ツー エッジのアプリは、画面スペースを最大限に活用してコンテンツを際立たせるのに最適です。

Android 15 ではエッジ ツー エッジが適用されるため、システムバーはデフォルトで透明または半透明になります。以前のバージョンの Android では、システムバーを不透明のままにしないでください。

図 6: コンテンツを際立たせるためにエッジ ツー エッジに表示します。不透明なシステムバーは使用しないでください。

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

図 7: ステータスバーの通知アイコン

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

enableEdgeToEdge() を呼び出して、すべてのバージョンでステータスバーが透明であることを確認します。コントラストを確保するため、ステータスバー アイコンの色を更新してください。たとえば、ダークアイコンを作成するには:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

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

  • [戻る] を押すと、前のビューに直接戻ります。
  • ホームがアプリからデバイスのホーム画面に遷移します。
  • 概要には、開いているアプリと最近開いたアプリが表示されます。

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

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

Android 10（API レベル 29）で導入されたジェスチャー ナビゲーションは、推奨されるナビゲーション タイプですが、ユーザーの設定をオーバーライドすることはできません。ジェスチャー ナビゲーションでは、戻る、ホーム、概要のボタンは使用されず、代わりにアフォーダンスとして単一のジェスチャー ハンドルが表示されます。ユーザーは、画面の左端または右端からスワイプして戻る操作を行い、下から上にスワイプしてホームに移動します。上にスワイプして長押しすると、概要が表示されます。

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

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

ジェスチャー ナビゲーションの実装について確認する。

図 8: ジェスチャー ハンドル ナビゲーション バー

3 ボタン ナビゲーション

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

図 9: 3 ボタン ナビゲーション バー

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

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

図 10: 2 ボタン ナビゲーション バー

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

enableEdgeToEdge() を呼び出して、すべてのバージョンでナビゲーション バーが透明または半透明であることを確認します。

Android 15 以降のデバイス、または enableEdgeToEdge() を呼び出した後、ジェスチャー ナビゲーションはデフォルトで透明になります。3 ボタン ナビゲーションはデフォルトで半透明ですが、大画面デバイスのタスクバー内にある場合は不透明になります。

アプリに下部アプリバーがある場合は、Window.setNavigationBarContrastEnforced() を false に設定して、3 ボタン ナビゲーションに半透明のスクリームを適用せずに、下部アプリバーをシステムのナビゲーション バーの下に描画できるようにします。

Android は、ジェスチャー ナビゲーション モードとボタンモードでユーザー インターフェースの視覚的な保護を処理します。

  • ジェスチャー ナビゲーション モード: システムは動的な色調整を適用します。この場合、システムバーのコンテンツは、背後にあるコンテンツに基づいて色が変化します。次の例では、ナビゲーション バーのハンドルが明るいコンテンツの上に配置されている場合は暗い色に変わり、その逆も同様です。

    図 11: 動的な色調整

  • ボタン モード: ボタン ナビゲーション バーの背後に半透明のスクリムが適用されます。これは、Window.setNavigationBarContrastEnforced() を false に設定することで削除できます。

    図 12: ダイナミック カラー適応。システムバーの背後にあるコンテンツに応じて色が変化します

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

図 13: ナビゲーション バー付きの画面キーボード

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

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

ディスプレイ カットアウトとは、一部のデバイスにある表示サーフェスに拡張された領域です。ディスプレイ カットアウトにより、前面センサーのスペースを確保できます。ディスプレイの切り欠きはメーカーによって異なる場合があります。

図 14: ディスプレイの切り欠きの例

ディスプレイの切り欠きは UI の外観に影響する可能性があります。Android 15（API レベル 35）以降をターゲットとするアプリは、デフォルトでディスプレイの切り欠き領域に描画されます。アプリはディスプレイの切り欠きのインセットを処理して、重要な UI がディスプレイの切り欠きの下に描画されないようにする必要があります。ディスプレイ カットアウトをサポートする方法をご覧ください。

没入モード

図 15: 横向きのモバイル デバイスで全画面エクスペリエンスを表示する没入モード

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