システムバーの保護

アプリが 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,
    heightProvider: () -> Float = calculateGradientHeight(),
) {

    Canvas(Modifier.fillMaxSize()) {
        val calculatedHeight = heightProvider()
        val gradient = Brush.verticalGradient(
            colors = listOf(
                color.copy(alpha = 1f),
                color.copy(alpha = .8f),
                Color.Transparent
            ),
            startY = 0f,
            endY = calculatedHeight
        )
        drawRect(
            brush = gradient,
            size = Size(size.width, calculatedHeight),
        )
    }
}

@Composable
fun calculateGradientHeight(): () -> Float {
    val statusBars = WindowInsets.statusBars
    val density = LocalDensity.current
    return { statusBars.getTop(density).times(1.2f) }
}
SystemBarProtectionSnippets.kt

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

適応型アプリの場合は、エッジ ツー エッジ デザインのように、各ペインの色と一致するカスタム コンポーザブルを挿入します。半透明のナビゲーション バーを作成するには、Window.setNavigationBarContrastEnforced を true に設定します。