Android 15 以降を搭載したデバイスで SDK 35 以降をターゲットとすると、アプリはエッジ ツー エッジで表示されます。ウィンドウは、システムバーの背後に描画することで、ディスプレイの幅と高さ全体に表示されます。システムバーには、ステータスバー、字幕バー、ナビゲーション バーが含まれます。
多くのアプリにはトップ アプリバーがあります。トップ アプリバーは画面の上端まで引き伸ばされ、ステータスバーの背後に表示されます。オプションで、コンテンツのスクロール時にトップ アプリバーをステータスバーの高さまで縮小できます。
多くのアプリには、ボトム アプリバーまたはボトム ナビゲーション バーもあります。また、これらのバーは画面の下端まで引き伸ばされ、ナビゲーション バーの背後に表示されます。それ以外の場合は、ナビゲーション バーの背後にスクロール コンテンツを表示する必要があります。
アプリにエッジ ツー エッジのレイアウトを実装する場合は、次の点に注意してください。
- エッジ ツー エッジのディスプレイを有効にする
- 視覚的な重なりをすべて処理します。
- システムバーの背後にスクリムを表示することを検討してください。
エッジ ツー エッジ表示を有効にする
SDK 35 以降をターゲットとするアプリの場合、Android 15 以降のデバイスではエッジ ツー エッジが自動的に有効になります。
以前の Android バージョンでエッジ ツー エッジ対応を有効にするには、次の手順を行います。
アプリまたはモジュールの
build.gradleファイル内のandroidx.activityライブラリに依存関係を追加します。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' }enableEdgeToEdge拡張関数をアプリにインポートします。
Activity の onCreate で enableEdgeToEdge を呼び出して、エッジ ツー エッジを手動で有効にします。これは 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 軸に表示される領域を表します。このボタンは、アプリの中でタップ可能で、システムバーによって目立たなくならないように、ビューを移動またはパディングする場合に最適です。
たとえば、図 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 に示すように、ボタンモードで視覚的な重なりは発生しません。
図 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 の値を決定するには、システムバーとディスプレイ カットアウト タイプの論理演算子を使用します。
パディングがリストアイテムとともにスクロールされるように、clipToPadding を RecyclerView に設定します。これにより、次の例に示すように、ユーザーがスクロールしたときにアイテムがシステムバーの後ろに表示されるようになります。
<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 でオレンジ色で示されています。
システムバー インセットと同様に、getInsets(int) と WindowInsetsCompat.Type.systemGestures() を使用すると、システム ジェスチャー インセットの重複を回避できます。
これらのインセットを使用して、スワイプ可能なビューを端から離すように移動またはパディングします。一般的なユースケースとしては、ボトムシート、ゲーム内でのスワイプ、ViewPager2 を使用して実装されたカルーセルなどがあります。
Android 10 以降では、システム ジェスチャー インセットには、ホーム ジェスチャー用の下部インセットと「戻る」ジェスチャー用の左右のインセットが含まれています。
次のコード例は、システム ジェスチャー インセットを実装する方法を示しています。
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、ジェスチャー ナビゲーション、インセットの仕組みについて詳しくは、以下のリファレンスをご覧ください。