エッジ ツー エッジのデザイン

エッジ ツー エッジ アプリは、システムバーの下に UI を描画することで、画面全体を利用します。

図 1. 左です。エッジ ツー エッジではないアプリ。正解です。エッジ ツー エッジのアプリ。

まとめ

  • システムバーの下に背景とスクロール コンテンツを描画して、エッジからエッジまで表示します。
  • システムの切り欠きの下にタップ ジェスチャーやドラッグ ターゲットを追加しないでください。これらは、エッジツーエッジ ナビゲーションやジェスチャー ナビゲーションと競合します。
図 2. ジェスチャーの切り欠きが緑色でハイライト表示されたアプリ。

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

エッジ ツー エッジ機能を使用すると、システムバーの下に UI を描画して没入感のあるエクスペリエンスを実現できます。

アプリは、インセットに反応することで、コンテンツの重複に対処できます。インセットは、システムバーやディスプレイ カットアウトなどのデバイスの物理的な機能と重複しないように、アプリのコンテンツに必要なパディングの量を指定します。Compose と ビューでエッジ ツー エッジをサポートし、インセットを処理する方法について学習する。

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

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

ステータスバーに関する考慮事項

システムバーの基本的な設計ガイダンスについては、Android システムバーをご覧ください。次のセクションでは、ステータスバーに関するその他の考慮事項について説明します。

コンテンツをスクロールする

スクロール中に上部のアプリバーが閉じられる必要があります。マテリアル 3 TopAppBar を閉じる方法を学びます。

すべきこと

アプリバーが固定されている場合は、トップ アプリバーをステータスバーの高さに折りたたみます。

すべきこと

トップ アプリバーが固定されていない場合は、一致する背景色のグラデーションを追加します。

UI が下にスクロールされたときにステータスバーを半透明にすることで、ステータスバーのアイコンがごちゃごちゃして見えないようにします。これを行うには、まず LazyColumn または RecyclerView のドキュメントの手順に沿って、スクロール可能な UI を端から端まで表示できるようにします。次に、次のいずれかの方法でシステムバーが半透明であることを確認します。

  • スクロール時に、マテリアル 3 の TopAppBar の自動保護を利用します（該当する場合）。
  • 80% のアルファでカスタム コンポーザブルを作成するか、ビューに 80% のアルファで GradientProtection を使用します。
図 3. ジェスチャーの切り欠きが緑色でハイライト表示されたアプリ。

適応型レイアウトの場合は、背景色が異なるペインに個別の保護があることを確認します。

禁止事項

各ペインの背景と一致しないグラデーション保護がある

すべきこと

各ペインの背景と一致するグラデーション保護がある。

同様に、ナビゲーション ドロワーもアプリの他の部分とは別に保護する必要があります。

図 4. ナビゲーション ドロワー用の半透明のステータスバー。この画像は、アプリではなくナビゲーション ドロワーのステータスバー保護を示しています。

たとえば、マテリアル 3 TopAppBar の組み込み保護とカスタム保護の両方を使用するなど、ステータスバーの保護を重ねないでください。

ナビゲーション バーの基本的な設計ガイダンスについては、Android システムバーをご覧ください。次のセクションでは、ナビゲーション バーに関するその他の考慮事項について説明します。

コンテンツをスクロールする

下部アプリバーはスクロール中に閉じる必要があります。

すべきこと

ボトム アプリバーがアニメーションで消えるときに、3 ボタン ナビゲーション用のシステムバー スクリムを追加。

すべきこと

ジェスチャー ナビゲーションを透明なままにして、追加のスクリームを追加しない。

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

ディスプレイの切り欠きは UI の外観に影響する可能性があります。アプリは、ディスプレイの切り欠きのインセットを処理して、UI の重要な部分がディスプレイの切り欠きの下に描画されないようにする必要があります。

すべきこと

ディスプレイの切り欠きインセットを使用して、重要な UI をインセットします。

禁止事項

重要な UI は画面の端に配置します。

ただし、アプリバーの背景が単色の場合は、次の画像のようにディスプレイ カットアウトに描画する必要があります。

図 5. アプリバーの背景がディスプレイ カットアウトに描画され、重要な UI がインセットされています。

横型カルーセルがディスプレイ カットアウト内に描画されるようにします。

図 6. ディスプレイのカットアウトをスクロールするカルーセルが配置された、エッジからエッジまでの横長ディスプレイ。

Compose と View でディスプレイ カットアウトをサポートする方法について学習する。

その他のガイダンス

通常、背景と分割線も端から端まで描画する必要がありますが、テキストやボタンなどのコンテンツは、システム UI やハードウェア要素が隠れないようにインセットする必要があります。