Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

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

**図 1.**左。エッジツーエッジに対応していないアプリ。右。エッジツーエッジに対応しているアプリ。

Android スキル

GitHub で表示

エッジツーエッジのサポートを追加する

エッジツーエッジの Android スキルを使用して、Jetpack Compose アプリにアダプティブなエッジツーエッジのサポートを追加します。

Android CLI からスキルをインストールするには、次のコマンドを実行します。

android skills add --skill edge-to-edge

要点

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

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

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

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

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

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

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

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

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

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

すべきこと

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

すべきこと

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

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