エッジ ツー エッジ アプリは、システムバーの下に UI を描画することで、画面全体を利用します。
Android スキル
GitHub で表示Edge-to-Edge のサポートを追加
android skills add edge-to-edge要点
- エッジ ツー エッジ エクスペリエンスを実現するため、システムバーの下に背景とスクロール コンテンツを描画します。
- タップ ジェスチャーやドラッグ ターゲットをシステム インセットの下に追加することは避けてください。これらはエッジ ツー エッジやジェスチャー ナビゲーションと競合します。
コンテンツをシステムバーの背後に描画する
エッジ ツー エッジ機能を使用すると、システムバーの下に UI を描画して、没入感のあるエクスペリエンスを実現できます。
アプリはインセットに対応することで、コンテンツの重複に対処できます。インセットは、システムバーやディスプレイ カットアウトなどの実機機能とコンテンツが重ならないように、アプリのコンテンツをどの程度パディングする必要があるかを表します。Compose と View でエッジ ツー エッジをサポートし、インセットを処理する方法について確認する。
エッジ ツー エッジのユースケースを設計する際は、次のタイプのインセットに注意してください。
- システムバー インセットは、タップ可能で、システムバーによって視覚的に隠されないようにする必要がある UI に適用されます。
- システム ジェスチャー インセットは、アプリよりも優先される OS が使用するジェスチャー ナビゲーション領域に適用されます。
- ディスプレイ カットアウト インセットは、カメラ カットアウトなど、ディスプレイ表面にまで及ぶデバイス領域に適用されます。
ステータスバーに関する考慮事項
基本的なシステムバーの設計ガイダンスについては、Android システムバーをご覧ください。次のセクションでは、ステータスバーに関するその他の考慮事項について説明します。
コンテンツをスクロールする
スクロール中にトップ アプリバーが折りたたまれるようにします。Material 3 の TopAppBar を折りたたむ方法を学習します。マテリアル 3 では、小さい上部アプリバーはステータスバーの高さまで折りたたむか、画面外にスクロールできます。中サイズと大サイズのトップ アプリバーは、小サイズのアプリバーに折りたたむことができます。マテリアル ガイダンスをご覧ください。
すべきこと
すべきこと
ステータスバーは、UI が下にスクロールするときに半透明になり、ステータスバーのアイコンがごちゃごちゃして見えないようにする必要があります。これを行うには、まず LazyColumn または RecyclerView のドキュメントの手順を実装して、スクロール可能な UI をエッジ ツー エッジにします。次に、次のいずれかの方法で、システムバーが半透明であることを確認します。
アダプティブ レイアウトでは、背景色が異なるペインに個別の保護が設定されていることを確認します。
禁止事項
すべきこと
同様に、ナビゲーション ドロワーもアプリの他の部分とは別に保護する必要があります。
ステータス バーの保護を重ねないでください（たとえば、Material 3 TopAppBar の組み込み保護とカスタム保護の両方を使用するなど）。
ナビゲーション バーに関する考慮事項
基本的なナビゲーション バーの設計ガイダンスについては、Android システムバーをご覧ください。次のセクションでは、ナビゲーション バーに関するその他の考慮事項について説明します。
コンテンツをスクロールする
下部のアプリバーは、スクロール中に折りたたまれる必要があります。
すべきこと
すべきこと
ディスプレイ カットアウト
ディスプレイ カットアウトは UI の外観に影響する可能性があります。アプリは、UI の重要な部分がディスプレイ カットアウトの下に描画されないように、ディスプレイ カットアウト インセットを処理する必要があります。
すべきこと
禁止事項
ただし、次の図に示すように、アプリバーの背景が単色の場合は、ディスプレイ カットアウトに描画する必要があります。
横向きカルーセルがディスプレイ カットアウト内に描画されるようにします。
Compose でディスプレイ カットアウトをサポートする方法をご覧ください。
その他のガイダンス
一般に、背景と区切り線も端から端まで描画する必要がありますが、テキストやボタンなどのコンテンツは、システム UI やハードウェア要素を避けるためにインセットする必要があります。