アプリでコンテンツをエッジ ツー エッジで表示する

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でエッジ ツー エッジを処理する方法について学習します。

システムバーの背後に描画することで、ディスプレイの幅と高さ全体を使用して、アプリをエッジ ツー エッジで表示できます。システムバーは、ステータスバーとナビゲーション バーです。

エッジ ツー エッジのレイアウトを実装するには、アプリで次のことを行う必要があります。

  • ナビゲーション バーの背後に描画して、より魅力的で最新のユーザー エクスペリエンスを実現します。
  • 全幅画像の場合など、コンテンツとレイアウトに適している場合は、ステータスバーの背後に描画します。そのためには、画面の上部に固定されたアプリバーを定義する AppBarLayout などの API を使用します。
図 1.エッジ ツー エッジ レイアウトのシステムバー。

アプリにエッジ ツー エッジ レイアウトを実装する手順は次のとおりです。

  1. エッジ ツー エッジ表示を有効にします。
  2. 視覚的な重なりをすべて処理します。
ステータスバーの背後に画像が表示されているアプリの画像
図 2.ステータスバーの背後に画像があるアプリの例。

エッジ ツー エッジ表示を有効にします。

アプリでエッジ ツー エッジ ディスプレイを有効にするには、ActivityonCreateenableEdgeToEdge を呼び出します。これは setContentView の前に呼び出す必要があります。

Kotlin

  override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    ...
  }

Java

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    EdgeToEdge.enable(this);
    super.onCreate(savedInstanceState);
    ...
  }

デフォルトでは、enableEdgeToEdge はシステムバーを透明にします。ただし、3 ボタン ナビゲーション モードではステータスバーに半透明のスクリムが表示されます。システム アイコンとスクリムの色は、システムのライトまたはダークモードに基づいて調整されます。

enableEdgeToEdge メソッドは、アプリを端から端までレイアウトする必要があることを自動的に宣言し、システムバーの色を調整します。なんらかの理由で必要な場合は、エッジ ツー エッジ ディスプレイを手動で設定するをご覧ください。

インセットを使用して重なりを処理する

エッジ ツー エッジ ディスプレイを有効にすると、図 3 に示すように、アプリのビューの一部がシステムバーの背後に描画される場合があります。

重なりに対処するには、インセットに反応します。インセットは、画面のどの部分がシステム UI(ナビゲーション バーやステータスバーなど)と交差するかを指定します。交差すると、コンテンツの上に表示される場合がありますが、システム ジェスチャーについてアプリに通知することもできます。

アプリをエッジ ツー エッジで表示する場合に適用されるインセットの種類は次のとおりです。

  • システムバーのインセット: タップ可能で、システムバーによって視覚的に隠すべきでないビューに最適です。

  • システム ジェスチャー インセット: アプリよりもシステムで使用されるジェスチャー ナビゲーションの領域用。

システムバーのインセット

システムバーのインセットは、最もよく使用されるタイプのインセットです。システム UI がアプリの上の Z 軸に表示される領域を表します。このボタンは、アプリの中でタップ可能で、システムバーによって目立たなくならないように、ビューを移動またはパディングする場合に最適です。

たとえば、図 3 のフローティング アクション ボタン(FAB)は、ナビゲーション バーによって部分的に隠されています。

端から端まで実装されているが、ナビゲーション バーが FAB を覆っていることを示す画像
図 3. エッジ ツー エッジのレイアウトで FAB に重なっているナビゲーション バー。

ジェスチャー モードまたはボタンモードでこのような視覚的な重なりを回避するには、getInsets(int)WindowInsetsCompat.Type.systemBars() を使用してビューのマージンを増やします。

次のコード例は、システムバー インセットを実装する方法を示しています。

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

このソリューションを図 3 の例に適用すると、図 4 に示すように、ボタンモードで視覚的な重なりは発生しません。

半透明のナビゲーション バーが FAB を覆っていないことを示す画像
図 4. ボタンモードでの視覚的な重なりの解決。

図 5 に示すように、ジェスチャー ナビゲーション モードについても同様です。

ジェスチャー ナビゲーションによるエッジ ツー エッジ対応の画像
図 5.ジェスチャー ナビゲーション モードでの視覚的な重なりの解決。

システム ジェスチャー インセット

システム ジェスチャー インセットは、アプリよりもシステム ジェスチャーが優先されるウィンドウの領域を表します。この領域は図 6 でオレンジ色で示されています。

システム ジェスチャー インセットを示す画像
図 6.システム ジェスチャー インセット。

システムバー インセットと同様に、getInsets(int)WindowInsetsCompat.Type.systemGestures() を使用すると、システム ジェスチャー インセットの重複を回避できます。

これらのインセットを使用して、スワイプ可能なビューを端から離すように移動またはパディングします。一般的なユースケースとしては、ボトムシート、ゲーム内でのスワイプ、ViewPager2 を使用して実装されたカルーセルなどがあります。

Android 10 以降では、システム ジェスチャー インセットには、ホーム ジェスチャー用の下部インセットと「戻る」ジェスチャー用の左右のインセットが含まれています。

システム ジェスチャーのインセット測定値を示す画像
図 7. システム ジェスチャー インセットの測定値。

次のコード例は、システム ジェスチャー インセットを実装する方法を示しています。

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

没入モード

一部のコンテンツは全画面表示が最適で、ユーザーの没入感を高めます。没入モードのシステムバーを非表示にするには、WindowInsetsController ライブラリと WindowInsetsControllerCompat ライブラリを使用します。

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

この機能の実装について詳しくは、没入モードのシステムバーを非表示にするをご覧ください。

参考情報

WindowInsets、ジェスチャー ナビゲーション、インセットの仕組みについて詳しくは、以下のリファレンスをご覧ください。