CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3
Victor Ang
Victor Ang

Reputation: 133

Compose 3 Modal Bottom Sheet not above safe area

enter image description here

Hello guys, so i use ModalBottomSheet from Compose Material 3, and when i show the bottom sheet it appears from the bottom of the screen. What i want to achieve in here is that the bottom sheet should be shown above the safe area (not overlapping with the center "line" like in the picture. Any idea how to achieve this? Thankyou

Upvotes: 10

Views: 3472

Answers (1)

ciaranodc
ciaranodc

Reputation: 488

It seems there is an issue with the default safe insets when it comes to the ModalBottomSheet. The only way I could get this to work was to:

  1. Set android:windowSoftInputMode="adjustResize" in Activity's AndroidManifest.xml entry.

  2. Call WindowCompat.setDecorFitsSystemWindows(window, false) in Activity.onCreate.

  3. Apply safe insets to entire contents of app like this:

    setContent {
    Box(Modifier.safeDrawingPadding()) {
        // the rest of the app
    }
}

See here for more details: https://developer.android.com/jetpack/compose/layouts/insets#insets-setup

Upvotes: 4

Related Questions