Android システムバー

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

レイアウト、入力方法、その他のデバイス機能を設計する際は、システムバーの存在と重要性を常に考慮してください。

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

要点

  • さまざまな画面サイズとフォーム ファクタのレイアウトにシステムバーを含めます。UI のセーフゾーン、システムとのやり取り、入力方法、ディスプレイ カットアウト、ステータスバー、キャプション バー、ナビゲーション バー、その他のデバイス機能を考慮してください。

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

  • WindowInsets を使用してシステムバーの侵入を適切に処理し、 アダプティブ レイアウトでコンテンツが隠れないようにします。

  • 画面スペースを効率的に使用する正規レイアウトを使用します。

ステータスバー

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

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

ステータスバー アイコン

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

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

通知が届くと、通常はステータスバーにアイコンが表示されます。これにより、通知ドロワーに確認すべきものがあることをユーザーに知らせます。 これは、アプリアイコンまたはチャンネルを表す記号にすることができます。詳しくは、通知 のデザインをご覧ください。

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

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

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

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

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

図 5.エッジ ツー エッジに対応してコンテンツを強化します。システムバーを不透明にしないでください。

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

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

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

  • 戻る: 前のビューに戻ります。
  • ホーム: アプリを終了してデバイスのホーム画面に移動します。
  • 概要: アクティブなアプリと、最近閉じていないアプリを表示します。

ユーザーは、ジェスチャー ナビゲーションやアダプティブ ナビゲーションなど、さまざまなナビゲーション構成を選択できます。最適なユーザー エクスペリエンスを提供するには、複数の種類のナビゲーションを考慮してください。

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

ジェスチャー ナビゲーションでは、戻る、ホーム、概要のボタンは使用されません。代わりに、アフォーダンス用の単一のジェスチャー ハンドルが表示されます。ユーザーは、画面の左端または右端からスワイプして戻り、下から上にスワイプしてホームに移動します。 上にスワイプして長押しすると、概要が開きます。

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

  • エッジ ツー エッジのコンテンツをサポートする。
  • ジェスチャー ナビゲーションのインセットの下に操作やタッチ ターゲットを追加しない。

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

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

アダプティブ ナビゲーション

Android のもう 1 つの一般的なナビゲーション パターンは、ディスプレイのウィンドウ サイズクラスに応じてナビゲーション レールとナビゲーション バーを切り替えることです。Jetpack Compose のアダプティブ ナビゲーション コンポーネントは、複数のフォーム ファクタを処理しながら、システムバーがナビゲーション コンポーネントのレイアウトを妨げないようにします。

アダプティブ レイアウトでは、コンパクトなウィンドウ サイズや展開されたウィンドウ サイズ、さまざまな折りたたみ状態など、さまざまなコンテキストでシステムバーの動作やスタイルがどのように異なるかを検討します。

詳細については、アダプティブ ナビゲーションを構築するをご覧ください。

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

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

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

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

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

図 8.動的な色調整。

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

すべきこと

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

すべきでないこと

ジェスチャー ナビゲーション バーに背景を追加しないでください。

ボタンモード

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

図 9.透明なスクリムを使用した動的な色調整。

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

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

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

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

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

レイアウト

アダプティブ レイアウトは、利用可能な表示スペースを最適化します。コンテンツをセカンダリ ペインまたはターシャリ ペインに移動して、アプリの UI を整理します。

アダプティブ レイアウトを設計する際は、システムバーがコンテンツとどのように連携するかを検討します。WindowInsets を使用して、大画面、折りたたみ式デバイス、マルチウィンドウ モードとデスクトップ ウィンドウ モードのアプリ ウィンドウなどのディスプレイで、UI がシステムバーによって隠れないようにします。

アプリがエッジ ツー エッジで表示される場合は、コンテンツとコントロールがシステム UI によって隠れないことを確認します。たとえば、ナビゲーション バーがボタンを覆っている場合、ユーザーはボタンをクリックできない可能性があります。

詳細については、正規レイアウトをご覧ください。

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

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

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

没入モード

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

全画面表示が必要な場合（ユーザーが映画を視聴している場合など）は、システムバーを非表示にできます。ユーザーはタップしてシステムバーを表示し、ナビゲーションやシステム コントロールの操作を行えるようにする必要があります。詳細については、没入型コンテンツと没入モードのシステムバーを非表示にするをご覧ください。