CODEWITHSUNDEEP
androidandroid-jetpack-composebottom-sheet
Abhimanyu
Abhimanyu

Reputation: 14837

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

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
    }
}

Upvotes: 22

Views: 7808

Answers (7)

Dinoy Raj
Dinoy Raj

Reputation: 91

actually it was a bug which is fixed in later version, check and Migrate to Material compose version 1.3.0

implementation("androidx.compose.material3:material3:1.3.0")

the scrim colour will be correctly drawn over status bar if edge to edge is enabled

windowInsets parameter has been replaced by contentWindowInsets allows content to consume window insets

   ModalBottomSheet(
            onDismissRequest = {  },
            sheetState = sheetState,
            shape = BottomSheetDefaults.ExpandedShape,
            tonalElevation = BottomSheetDefaults.Elevation,

            scrimColor = BottomSheetDefaults.ScrimColor,
            contentWindowInsets = { BottomSheetDefaults.windowInsets },

            properties = properties

        )

for more info refer this doc from material design

Upvotes: 2

XxAayushonWebxX
XxAayushonWebxX

Reputation: 25

I also faced this problem, I had done everything from doing edge to edge to making the status bar transparent but it was still not working but then I used WindowInsets parameter in ModalBottomSheet and it worked like charm.

Here's what worked for me:

ModalBottomSheet(onDismissRequest = onDismissRequest, sheetState = bottomSheetState, windowInsets = WindowInsets(0.dp)) {
    CountryList(onRowClicked = onRowClicked)
}

Upvotes: -1

Ana Ilies
Ana Ilies

Reputation: 209

If you are using Material3 you can provide the windowInsets to the ModalBottomSheet directly. You can either set them to 0 or keep which ones you prefer.

For example, if you only want the bottom insets to be maintained use this code:

ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = {  },
        modifier = modifier,
        windowInsets = BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom),
    ) {
        // Bottom sheet layout 
    }

Upvotes: 15

what fck
what fck

Reputation: 29

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)

Upvotes: 2

DmitryBorodin
DmitryBorodin

Reputation: 4952

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(),

Upvotes: 0

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

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.

Upvotes: -1

Afterglow
Afterglow

Reputation: 405

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
}

Upvotes: 3

Related Questions