ステータスバー、キャプション バー、ナビゲーション バーはシステムバーです。バッテリー残量、時刻、通知アラートなどの重要な情報を表示し、どこからでもデバイスを直接操作できます。
レイアウト、入力方法、その他のデバイス機能を設計する際は、システムバーの存在と目立ちやすさを常に考慮してください。
Android のスキル
GitHub で表示Edge-to-Edge のサポートを追加する
android skills add edge-to-edge
要点
さまざまな画面サイズとフォーム ファクタのレイアウトにシステムバーを含めます。UI セーフゾーン、システム インタラクション、入力方法、ディスプレイ カットアウト、ステータスバー、キャプションバー、ナビゲーション バー、その他のデバイス機能を考慮します。
システム ステータスバーとナビゲーション バーを透明または半透明に保ち、これらのバーの背後にコンテンツを描画して、エッジ ツー エッジを実現します。
WindowInsetsを使用して、システムバーの侵入を適切に処理し、アダプティブ レイアウトでコンテンツが隠れないようにします。画面スペースを効率的に使用する正規レイアウトを使用します。
ステータスバー
ステータスバーには通知アイコンとシステム アイコンが含まれます。ユーザーは、ステータスバーを下にスワイプして通知シェードにアクセスすることで、ステータスバーを操作します。ステータスバーのスタイルは、透明または半透明にできます。
ステータスバー アイコン
ステータスバーのアイコンは、コンテキスト、時刻、ユーザー設定、テーマ、その他のパラメータに応じて異なる表示になることがあります。詳細については、システムバーのアイコンをご覧ください。
通知が届くと、通常はステータスバーにアイコンが表示されます。これにより、通知ドロワーに表示される内容があることがユーザーに通知されます。チャンネルを表すアプリアイコンやシンボルを使用できます。通知のデザインをご覧ください。
ステータスバーのスタイルを設定する
ステータスバーを透明または半透明にして、アプリのコンテンツが画面全体に表示されるようにします。次に、アイコンが適切なコントラストになるように、システムバー アイコンのスタイルを設定します。
Android 15 ではエッジ ツー エッジが強制適用され、デフォルトでステータスバーが透明になります。下位互換性を確保するために enableEdgeToEdge() を呼び出します。
次の左側の画像では、ステータスバーが透明で、TopAppBar の緑色の背景がステータスバーの背後に描画されています。
透明なステータスバーは、UI がステータスバーの下に表示されない場合や、画像がステータスバーの下に描画される場合に最適です。半透明のステータスバーは、UI がステータスバーの下にスクロールする場合に最適です。グラデーション保護の詳細については、エッジ ツー エッジ デザインをご覧ください。
ナビゲーション
Android では、戻る、ホーム、概要のコントロールを使用してナビゲーションを制御できます。
- [戻る] をタップすると、前の画面に戻ります。
- ホームボタンを押すと、アプリからデバイスのホーム画面に移動します。
- [概要] には、アクティブなアプリと、最近使用したアプリ（閉じられていないもの）が表示されます。
ユーザーは、ジェスチャー ナビゲーションやアダプティブ ナビゲーションなど、さまざまなナビゲーション構成から選択できます。最適なユーザー エクスペリエンスを提供するには、複数のタイプのナビゲーションを考慮します。
ジェスチャー ナビゲーション
ジェスチャー ナビゲーションでは、戻る、ホーム、概要のボタンは使用されず、代わりにアフォーダンス用のジェスチャー ハンドルが 1 つ表示されます。ユーザーは、画面の左端または右端からスワイプして戻り、下から上にスワイプしてホームに移動します。上にスワイプして長押しすると、概要が表示されます。
ジェスチャー ナビゲーションは、モバイル画面と大画面の両方に対応する設計に適した、拡張性の高いナビゲーション パターンです。優れたユーザー エクスペリエンスを提供するには、次の手順でジェスチャー ナビゲーションを考慮します。
- エッジ ツー エッジのコンテンツをサポートする。
- ジェスチャー ナビゲーション インセットの下にインタラクションやタップ ターゲットを追加しないようにします。
詳細については、ジェスチャー ナビゲーションのサポートを追加するをご覧ください。
アダプティブ ナビゲーション
Android のもう 1 つの一般的なナビゲーション パターンは、ディスプレイのウィンドウ サイズクラスに応じてナビゲーション レールとナビゲーション バーを切り替えることです。Jetpack Compose のアダプティブ ナビゲーション コンポーネントは、複数のフォーム ファクタを処理すると同時に、システムバーがナビゲーション コンポーネントのレイアウトに干渉しないようにします。
アダプティブ レイアウトでは、コンパクト ウィンドウ サイズや拡張ウィンドウ サイズ、さまざまな折りたたみ式デバイスの形状など、さまざまなコンテキストでシステムバーの動作やスタイルがどのように異なるかを考慮します。
詳細については、アダプティブ ナビゲーションを構築するをご覧ください。
ナビゲーション アイコン
ナビゲーション アイコンは、ユーザーが設定した設定やテーマによっても表示が異なる場合があります。詳細については、システムバーのアイコンをご覧ください。
ナビゲーション スタイルを設定する
Android は、ジェスチャー ナビゲーション モードとボタンモードでユーザー インターフェースの視覚的な保護を処理します。システムはダイナミック カラー適応を適用します。これにより、システムバーのコンテンツの色が、その背後にあるコンテンツに基づいて変化します。
ジェスチャー ナビゲーション モード
Android 15 をターゲットとするか、Activity で enableEdgeToEdge を呼び出すと、システムは透明なジェスチャー ナビゲーション バーを描画し、ダイナミック カラーの適応を適用します。次の例では、ナビゲーション バーのハンドルが明るいコンテンツの上に配置されている場合は暗い色に変わり、その逆も同様です。
透明なジェスチャー ナビゲーション バーが常に推奨されます。
すべきこと
すべきでないこと
ボタンモード
Android 15 をターゲットとするか、Activity で enableEdgeToEdge を呼び出すと、システムはボタン ナビゲーション バーの背後に半透明のスクリムを適用します。これは、Window.setNavigationBarContrastEnforced() を false に設定することで削除できます。
ボトム アプリバーまたはボトムアプリ ナビゲーション バーがある場合、または UI が 3 ボタン ナビゲーション バーの下にスクロールしない場合は、透明な 3 ボタン ナビゲーション バーを使用します。透明なナビゲーション バーを取得するには、Window.setNavigationBarContrastEnforced() を false に設定し、図 7、8、9 に示すように、システム ナビゲーション バーの下に描画されるように下部のアプリバーをパディングします。詳細については、システムバーの保護をご覧ください。
スクロールするコンテンツには、半透明の 3 ボタン ナビゲーション バーを使用します。半透明のナビゲーション バーに関する考慮事項については、エッジ ツー エッジのデザインをご覧ください。
キーボードとナビゲーション
各ナビゲーション タイプは、画面キーボードに適切に反応し、ユーザーがキーボードを閉じたり、キーボード タイプを変更したりできるようにします。アプリの遷移を、画面の下から上下にスライドするキーボードと同期させてスムーズに遷移させるには、WindowInsetsAnimationCompat を使用します。
レイアウト
アダプティブ レイアウトは、利用可能な表示スペースを最適化します。コンテンツをセカンダリ ペインまたはターシャリ ペインに移動して、アプリの UI を整理します。
アダプティブ レイアウトを設計する際は、システムバーがコンテンツとどのように相互作用するかを考慮してください。WindowInsets を使用して、大画面、折りたたみ式デバイス、マルチウィンドウ モードやデスクトップ ウィンドウ モードのアプリ ウィンドウなどのディスプレイで、UI がシステムバーで隠れないようにします。
アプリがエッジ ツー エッジで表示される場合は、コンテンツとコントロールがシステム UI で隠れていないことを確認します。たとえば、ナビゲーション バーがボタンを覆っている場合、ユーザーはボタンをクリックできない可能性があります。
詳細については、正規レイアウトをご覧ください。
ディスプレイ カットアウト
ディスプレイ カットアウトとは、一部のデバイスで、前面センサーのスペースを確保するためにディスプレイ表面にまで広がる領域のことです。ディスプレイ カットアウトはメーカーによって異なる場合があります。ディスプレイ カットアウトがコンテンツ、向き、エッジ ツー エッジにどのように影響するかを検討します。
没入モード
ユーザーが映画を視聴しているときなど、全画面表示が必要な場合は、システムバーを非表示にできます。ユーザーは、タップしてシステムバーを表示し、システム コントロールを操作したり、システム コントロールを操作したりできます。詳細については、没入型コンテンツと没入モードのシステムバーを非表示にするをご覧ください。