システムバーの保護について

アプリが SDK 35 以降をターゲットとするようになると、エッジ ツー エッジが強制適用されます。システム ステータスバーとジェスチャー ナビゲーション バーは透明ですが、3 ボタン ナビゲーション バーは半透明です。enableEdgeToEdge を呼び出して、下位互換性を確保します。

ただし、システム デフォルトがすべてのユースケースで機能するとは限りません。透明または半透明のシステムバーを検討するタイミングの概要については、Android システムバーの設計ガイダンスとエッジ ツー エッジの設計ガイダンスをご覧ください。

透明なシステムバーを作成する

Android 15 以降をターゲットにするか、以前のバージョンのデフォルト引数で enableEdgeToEdge() を呼び出すことで、透明なジェスチャー ナビゲーション バーを作成します。3 ボタン ナビゲーション バーの場合、Window.setNavigationBarContrastEnforced を false に設定します。そうしないと、半透明のスクリムが適用されます。

半透明のシステムバーを作成する

半透明のステータスバーを作成するには、メイン コンテンツと重なり、インセットで覆われた領域にグラデーションを描画するカスタム コンポーザブルを作成します。

class SystemBarProtectionSnippets : ComponentActivity() {

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

        // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true
        // which is used to add a translucent scrim to three-button navigation
        enableEdgeToEdge()

        setContent {
            MyTheme {
                // Main content
                MyContent()

                // After drawing main content, draw status bar protection
                StatusBarProtection()
            }
        }
    }
}

@Composable
private fun StatusBarProtection(
    color: Color = MaterialTheme.colorScheme.surfaceContainer,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}
SystemBarProtectionSnippets.kt

図 1. 半透明のステータスバー。

アダプティブ アプリの場合は、エッジ ツー エッジ デザインで示されているように、各ペインの色に合わせたカスタム コンポーザブルを挿入します。半透明のナビゲーション バーを作成するには、Window.setNavigationBarContrastEnforced を true に設定します。

前へ
ビューと Compose でインセットを使用する
次へ
カットアウトについて