エッジ ツー エッジを設定する

エッジ ツー エッジ表示を使用すると、アプリの UI をシステムバー（ステータスバー、キャプション バー、ナビゲーション バー）の背後に描画して、没入感のあるユーザー エクスペリエンスを実現できます。Android 15（API レベル 35）以降を搭載しているデバイスをターゲットにしている場合、 エッジツー エッジはデフォルトで適用されます。

すべての Android バージョンでコンテンツをエッジ ツー エッジで正しく表示するには、次の設定手順に沿って操作してください。これらの手順を行わないと、アプリがシステムバーの背後に単色を描画したり、画面キーボード（IME）の切り替えに合わせてコンテンツを同期的にアニメーション表示したりできないことがあります。

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

以前の Android バージョンでエッジ ツー エッジを有効にするには、 enableEdgeToEdge() を Activity.onCreate() メソッドで呼び出します。

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

デフォルトでは、enableEdgeToEdge() は、3 ボタン ナビゲーション モードを除き、システムバーを透明にします。3 ボタン ナビゲーション モードでは、コントラストを高めるためにナビゲーション バーに半透明のスクリムが適用されます。システム アイコンとスクリムの色は、システムのライトモードまたはダークモードに合わせて調整されます。

2. windowSoftInputMode を構成する

アクティビティの AndroidManifest.xml エントリで android:windowSoftInputMode="adjustResize" を設定します。この設定により、アプリは IME インセットを受け取ることができるため、画面キーボードの表示または非表示時にパディングでレイアウトを調整できます。

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. インセットを使用してオーバーラップを処理する

エッジ ツー エッジを有効にすると、アプリのコンテンツと UI 要素の一部がシステムバーの背後に描画されることがあります。重要な要素やインタラクティブな要素がシステムバーによって隠れたり、システム ジェスチャーと重なったりしないようにするには、インセットを処理する必要があります。

インセットは、画面のどの部分がシステム UI またはシステム ジェスチャーと交差するかを表します。エッジ ツー エッジ表示で考慮すべきインセットの主なタイプは次のとおりです。

  • システムバー インセット: システムバーが表示される領域を表します。これを使用して、UI がシステムバーによって隠れないようにします。
  • ディスプレイ カットアウト インセット: デバイス画面に物理的なカットアウト（カメラのノッチなど）が存在する領域を表します。

Compose では、ルーラー、パディング修飾子、インセット サイズ修飾子のいずれかを使用してインセットを処理できます。詳細なガイダンスについては、ウィンドウ インセットについてをご覧ください。

高度なトピック

エッジ ツー エッジの高度なユースケースについては、以下を考慮してください。

没入モード

動画や地図などの一部のコンテンツは、システムバーが非表示になる完全な没入型エクスペリエンスが適しています。WindowInsetsControllerCompat を使用してシステムバーを非表示にできます。

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

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

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

システムバーの色とアイコン

エッジ ツー エッジにすると、アプリの背景がシステムバーの背後に表示されることがあるため、コントラストを高めるためにシステムバーのアイコンの色を調整する必要がある場合があります。

ステータスバーのアイコンをライトまたはダークに変更するには、WindowInsetsControllerCompat を使用します。

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

システムバーの保護

enableEdgeToEdge() はデフォルトで透明または半透明のシステムバーを提供しますが、これをカスタマイズする必要がある場合があります。透明なバーと半透明のバーのどちらを使用するかを決定するには、Android システムバーのデザイン ガイドラインとエッジ ツー エッジのデザイン ガイドラインをご覧ください。

3 ボタン ナビゲーション バーを半透明ではなく完全に透明にするには、コントラストの適用を無効にします。

window.isNavigationBarContrastEnforced = false

詳細については、システムバーの保護についてをご覧ください。

ダイアログ

全画面表示のダイアログをエッジ ツー エッジで表示するには、ダイアログの onStart() メソッドで WindowCompat.enableEdgeToEdge を呼び出します。

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}
次へ
WindowInsetsRulers について