Modal Bottom Sheet scrim color is not shown in status bar in Jetpack compose

Question

Migrating an app in view system to Jetpack compose.

The bottom sheet scrim color is shown on the status bar in the current app.
How to reproduce the same in Jetpack compose?

Screenshot of the app using views

Screenshot of the app using compose

Compose Code

val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
)
val coroutineScope = rememberCoroutineScope()

ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        // Not relevant
    },
) {
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            // Not relevant
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    coroutineScope.launch {
                        if (!modalBottomSheetState.isAnimationRunning) {
                            if (modalBottomSheetState.isVisible) {
                                modalBottomSheetState.hide()
                            } else {
                                modalBottomSheetState.show()
                            }
                        }
                    }
                },
            ) {
                Icon(
                    imageVector = Icons.Rounded.Add,
                    contentDescription = "Add",
                )
            }
        },
        modifier = Modifier
            .fillMaxSize(),
    ) { innerPadding ->
        // Not relevant - Nav graph code
    }
}

Answer 1

try to use the System UI Controller in the accompanist library to control the statusBar Color and navigationBar color

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight

SideEffect {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setSystemBarsColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarsColor() and setNavigationBarsColor() also exist
}

Answer 2

In the latest versions of Compose, there's a statusBarColor parameter that is set in the Theme.kt file by default. If you're not using accompanist, try altering that value to get the desired effect.

Answer 3

You can remove automatic insects and make status bar transparent:

    WindowCompat.setDecorFitsSystemWindows(window, false)
    window.statusBarColor = android.graphics.Color.TRANSPARENT;

Then draw your bottom sheet and it will go under all system bars including status bar

Just don't forget to add insects for the rest of the views when needed, it's in compose foundation now:

            modifier = Modifier
                                .navigationBarsPadding()
                                .captionBarPadding()
                                .imePadding()
                                .statusBarsPadding(),

Answer 4

ModalBottomSheet(
    modifier = Modifier
        .imePadding()
        .fillMaxWidth()
        .fillMaxHeight(0.95f),
    sheetState = sheetState,
    containerColor = MaterialTheme.colorScheme.background,
    scrimColor = Color(0x8A000000),
    dragHandle = {},
    windowInsets = WindowInsets(0,0,0,0),
    onDismissRequest = {
        scope.launch {
            sheetState.hide()
        }
    },
) {
    }

use androidx.compose.material3.ModalBottomSheet and set windowInsets = WindowInsets(0,0,0,0)