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

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

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

まとめ

エッジツーエッジエクスペリエンスを実現するため、システムバーの下に背景とスクロールコンテンツを描画します。
タップジェスチャーやドラッグターゲットをシステムインセットの下に追加することは避けてください。これらはエッジツーエッジやジェスチャーナビゲーションと競合します。

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

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

アプリは、インセットに対応することで、コンテンツの重複に対処できます。インセットは、システムバーや、ディスプレイカットアウトなどの実機機能との重複を避けるために、アプリのコンテンツにどの程度のパディングが必要かを記述します。Compose と Views でエッジツーエッジをサポートし、インセットを処理する方法について確認する。

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

システムバーインセットは、タップ可能で、システムバーによって視覚的に隠されないようにする必要がある UI に適用されます。
システムジェスチャーインセットは、アプリよりも優先される OS で使用されるジェスチャーナビゲーション領域に適用されます。
ディスプレイカットアウトインセットは、カメラカットアウトなど、ディスプレイ表面に拡張されるデバイス領域に適用されます。

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

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

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

トップアプリバーはスクロール中に折りたたまれる必要があります。Material 3 の TopAppBar を折りたたむ方法について説明します。マテリアル 3 では、小さい上部アプリバーはステータスバーの高さまで折りたたむか、画面外にスクロールできます。中サイズと大サイズのトップアプリバーは、小さいアプリバーに折りたたむことができます。マテリアルガイダンスをご覧ください。

すべきこと

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

すべきこと

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

ステータスバーは、UI が下にスクロールするときに半透明になり、ステータスバーのアイコンがごちゃごちゃして見えないようにする必要があります。これを行うには、まず LazyColumn または RecyclerView のドキュメントの手順を実装して、スクロール可能な UI をエッジツーエッジにします。次に、次のいずれかの操作を行って、システムバーが半透明であることを確認します。