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

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でエッジ ツー エッジを処理する方法を学びます。
<ph type="x-smartling-placeholder"></ph> Compose のエッジ ツー エッジ →

Android 15 以降を搭載したデバイスで SDK 35 以降を対象とすると、 アプリをエッジ ツー エッジで表示できます。ウィンドウは幅と高さ全体にまたがって表示されます システムバーの後ろに描画します。システムバーには ナビゲーションバーがあります

多くのアプリにはトップ アプリバーがあります。トップ アプリバーは、アプリの上端まで引き伸ばされます。 ステータスバーの後ろに表示されます。必要に応じて、トップ アプリバーに コンテンツがスクロールされると、ステータスバーの高さまで縮小されます。

多くのアプリには、ボトム アプリバーまたはボトム ナビゲーション バーもあります。これらのバーは 画面の下端まで引き伸ばされ、ナビゲーションの背後に表示されます。 表示されます。それ以外の場合、アプリはナビゲーション バーの背後にスクロール コンテンツを表示する必要があります。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> 図 1.エッジ ツー エッジのレイアウトのシステムバー。

アプリにエッジ ツー エッジのレイアウトを実装する場合、 心:

  1. エッジ ツー エッジのディスプレイを有効にする
  2. 視覚的な重なりをすべて処理します。
  3. システムバーの背後にスクリムを表示することを検討してください。
で確認できます。 <ph type="x-smartling-placeholder">
</ph> ステータスバーの背後の画像の例 <ph type="x-smartling-placeholder">
</ph> 図 2.背面画像の例 ステータスバーに表示されます。
で確認できます。

エッジ ツー エッジ表示を有効にする

SDK 35 以降をターゲットとしているアプリの場合、 Android 15 以降のデバイス。

以前の Android バージョンでエッジ ツー エッジ対応を有効にするには、次の手順を行います。

  1. 依存関係を androidx.activity ライブラリ( アプリまたはモジュールの build.gradle ファイルに追加します。

    Kotlin

    dependencies {
        val activity_version = activity_version
        // Java language implementation
        implementation("androidx.activity:activity:$activity_version")
        // Kotlin
        implementation("androidx.activity:activity-ktx:$activity_version")
    }
    

    Groovy

    dependencies {
        def activity_version = activity_version
        // Java language implementation
        implementation 'androidx.activity:activity:$activity_version'
        // Kotlin
        implementation 'androidx.activity:activity-ktx:$activity_version'
    }
    
  2. enableEdgeToEdge をインポートする 拡張関数をアプリに追加します。

enableEdgeToEdge を呼び出してエッジ ツー エッジを手動で有効にする ActivityonCreateで。これは 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() 関数は、アプリを使用する必要があることを自動的に宣言します。 システムバーの色を調整します。

アプリでエッジ ツー エッジ ディスプレイを有効にするには、 enableEdgeToEdge() 関数については、以下をご覧ください。 エッジ ツー エッジのディスプレイを手動でセットアップする

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

図に示すように、アプリのビューの一部がシステムバーの背後に描画されることがあります。 3.

オーバーラップに対処するには、インセットに反応させます。インセットは、 画面がナビゲーション バーやステータスなどのシステム UI と交差している場合。 表示されます。交差するとコンテンツの上方に表示される場合がありますが、 システム ジェスチャーについて確認してください。

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

  • システムバーのインセット: タップ可能であってはならないビューに最適です。 システムバーによって見えにくくなります。

  • ディスプレイ カットアウト インセット: 画面カットアウトがある可能性のある領域用 熱を持つことがあります。

  • システム ジェスチャー インセット: システムで使用されるジェスチャー ナビゲーション エリア用 アプリよりも優先される場合もあります

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

システムバー インセットは、最もよく使用されるタイプのインセットです。これらは システム UI がアプリ上部の Z 軸に表示される領域です。彼らは最高 タップ可能であってはならない、アプリ内のビューの移動やパディングに使用されます。 システムバーによって隠れてしまうことがあります。

たとえば、フローティング アクションは ボタン(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. 操作での視覚的な重なりの解決 ナビゲーションモードです

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

一部のデバイスにはディスプレイ カットアウトがあります。通常、カットアウトは ステータスバーに表示されます。デバイスの画面が横向きの場合 カットアウトが垂直端になります。アプリのコンテンツに応じて が画面に表示されている場合は、ディスプレイ カットアウトを避けるためにパディングを実装する必要があります。 デフォルトでは、アプリはディスプレイ カットアウト内に描画されます。

たとえば、多くのアプリ画面にはアイテムのリストが表示されます。リストアイテムを隠さない ディスプレイ カットアウトやシステムバーに重ねて表示できます。

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  WindowInsetsCompat bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

WindowInsetsCompat の値は、またはの システムバーとディスプレイ カットアウトのタイプです。

clipToPaddingRecyclerView に設定して、パディングがスクロールされるようにします。 リストアイテムを表示します。これにより、ユーザーがアイテムを表示したときに、アイテムをシステムバーの後ろに配置できます。 スクロールします。

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

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

システム ジェスチャー インセットは、システム ジェスチャーを行うウィンドウの領域を表します。 アプリよりも優先されます。これらの領域は図 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;
});

マテリアル コンポーネント

多くのビューベースの Android マテリアル コンポーネント (com.google.android.material){:.external} は自動的に以下を含むインセットを処理 BottomAppBarBottomNavigationView, NavigationRailView です。 および NavigationView

ただし、AppBarLayout インセットは自動的に処理されません。追加 android:fitsSystemWindows="true" 上部のインセットを処理するか、setOnApplyWindowInsetsListener を使用します。

以下を使用してインセットを処理する方法を確認する Compose のマテリアル コンポーネント

没入モード

コンテンツによっては全画面表示が最適で、 没入感のあるエクスペリエンスが実現します。没入モードのシステムバーを非表示にするには、 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、ジェスチャーについて詳しくは、以下のリファレンスをご覧ください。 インセットの仕組みについて説明します。