edge-to-edge が有効な画面でステータスバーとナビゲーションバーに描画する[Compose編]

edge-to-edge が有効な画面ではステータスバーとナビゲーションバーが透明になり、コンテンツがステータスバーとナビゲーションバーの下生地として表示されます。edge-to-edge が有効な画面がどのように表示されるかは以下の記事を参照してください。

https://qiita.com/seabat-dev/items/b48d56e3d5bc66d52979

上の記事で紹介したが、Scaffold を使用するとコンテンツをステータスバーとナビゲーションバーと被らないように表示できる。Scaffold 直下の Composable 関数に色を付けてみる。

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // edge-to-edge を有効にする。(Android 15 + API 35 は自動でedge-to-edge が強制される)
        setContent {
            HelloedgeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier.fillMaxSize().background(color = Color.Cyan)
    ) {
        Text(
            text = "Hello $name!",
        )
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494458/57f0bd60-cff8-b758-6fdf-4c4878439ac0.png" alt="" width="300">

うーん、これだとステータスバーがただ透明になっただけで **edge-to-edge** の意味がない💦 edge-to-edge であるならコンテンツの背景とステータスバーの背景がシームレスにつながっている方が見栄えが良いだろう。

ステータスバーの背景を表示するため、まずトップの Composable 関数を `Box` に、次に背景用の Composable 関数を配置する。この時、背景用の Composable 関数には `Modifier.fillMaxSize()` を適用し、`Scaffold` の `innerPadding` は適用しないのがポイント。

```kotlin
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Box {
        // 背景用の Composable 関数
        Column(
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        ) {}
        // コンテンツ用の Composable 関数
        Column(
            modifier = modifier.fillMaxSize()
        ) {
            Text(
                text = "Hello $name!",
            )
        }
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494458/cf19d181-33e2-3e3e-3586-08e2030f96cf.png" alt="" width="200">

`Scaffold` の `innerPadding` を適用したコンテンツ用の Composable 関数は本当にステータスバーとナビゲーションバーに被らないのか確認してみる。コンテンツ領域がどこなのかわかるようコンテンツ用の Composable 関数に背景色 `Color.Magenta` を追加してみる。

```kotlin
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Box {
        // 背景用の Composable 関数
        Column(
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        ) {}
        // コンテンツ用の Composable 関数
        Column(
            modifier = modifier.fillMaxSize().background(color = Color.Magenta)
        ) {
            Text(
                text = "Hello $name!",
            )
        }
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494458/494bf48b-3155-a550-4926-ea21d6e33a1e.png" alt="" width="200">


コンテンツ用の Composable 関数はステータスバーとナビゲーションバーに被らないことが確認できた。

#### 3ボタンナビゲーションの背景が半透明💦

上記はナビゲーションモードがジェスチャーナビゲーションの場合であるが、3ボタンナビゲーションに切り替えると半透明になる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494458/cbabe6f2-986e-51ca-1cd4-ba423e84b496.png" alt="" width="200">

3ボタンナビゲーションの背景が半透明になる事象を解消するには、[`window.isNavigationBarContrastEnforced`](https://developer.android.com/reference/android/view/Window#isNavigationBarContrastEnforced())プロパティを `false` にする。

```diff
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // edge-to-edge を有効にする。(Android 15 + API 35 は自動でedge-to-edge が強制される)
        setContent {
            HelloedgeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
+           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+               window.isNavigationBarContrastEnforced = false
+           }

        }
    }
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3494458/d0fadc52-7671-9d2d-a7ce-acea64842258.png" alt="" width="200">