M3 ModalBottomSheet content behind / overlaps navigation bar in many scenarios [274872542]

Fixed

Bug

Status Update

No update yet.

Description

an...@microsoft.com

created issue #1

Mar 24, 2023 04:01AM

Jetpack Compose version: 1.4.0, material3 1.1.0-beta01 Jetpack Compose component used: material3 Android Studio Build: Kotlin version: 1.8.10

Steps to Reproduce or Code Sample to Reproduce: Use M3 ModalBottomSheet API with some text content. Finding many scenarios where the bottom of the sheet is not displayed, can't be pulled up. Some examples where cut off:

Physical Pixel 4a Android 13 in landscape. (portrait is fine)
Physical Samsung s5e tablet Andriod 9 in landscape the semi transparent systembar is on top, can't click on items
Physical Samsung s5e tablet Android 9 in portrait fails to even show bottomsheet
Emulator Pixel C Android 13, behind system bar in portrait and landscape

Sample code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            M3BottomSheetTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Greeting() {
    var showBottomSheet by remember { mutableStateOf(false) }
    Column() {
        Button(onClick = { showBottomSheet = true }) {
            Text(text = "Open sesame")
        }
        if (showBottomSheet) {
            ModalBottomSheet(onDismissRequest = { showBottomSheet = false }) {
                Column(modifier = Modifier.padding(horizontal = 16.dp), verticalArrangement = spacedBy(16.dp)) {
                    Text("Line 1", style = MaterialTheme.typography.bodyMedium)
                    Text("Line 2", style = MaterialTheme.typography.bodyMedium)
                    Text("Line 3", style = MaterialTheme.typography.bodyMedium)
                }
            }
        }
    }
}

Some examples attached. Pixel4a working is what it should show, items 1, 2, 3 but in landsacpe its cutoff, pixel c emulator its cutoff in all orientations

Pixel4aAPI33-working.png

60 KB

View

Download

Pixel4aAPI33-landscape.png

57 KB

View

Download

PixelCEmulatorAPI33-Landscape.png

62 KB

View

Download

PixelCEmulatorAPI33.png

62 KB

View

Download

Comments

se...@google.com <se...@google.com> Apr 11, 2023 07:48PM

Accepted by se...@google.com.

ap...@google.com <ap...@google.com> #2May 10, 2023 07:54PM

Project: platform/frameworks/support
Branch: androidx-main

commit 46eea23c96f45f0ee1e57d8aef2f1375507b0dec
Author: José Figueroa Santos <serniebanders@google.com>
Date: Tue Apr 11 14:38:58 2023

[M3][ModalBottomSheet] Enable edge to edge functionality for ModalBottomSheet

Bug: 274872542
Bug: 272973615
Bug: 272334475
Bug: 268432129
Bug: 275849044
Bug: 275486106
Bug: 268433162
RelNote: Add window insets parameter to ModalBottomSheet.
RelNote: Scrim for ModalBottomSheet may now be drawn behind status bar with windowInsets set to zero
RelNote: Updated default ModalBottomSheet functionality to stay outside of system bars including navigation
RelNote: Status bar inset handling is provided by drag handle in edge-to-edge mode.
RelNote: BottomSheetDefaults includes window insets for BottomSheetWindow.
Test: Parameterizes existing tests to work with and without edgeToEdge enabled.
Test: Manual EdgeToEdge testing on various devices and android APIs
Change-Id: I312008e48573ebd21326f77216be0bcd0372aa78

M compose/material3/material3/api/public_plus_experimental_current.txt
M compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/BottomSheetSamples.kt
M compose/material3/material3/src/androidAndroidTest/kotlin/androidx/compose/material3/ModalBottomSheetTest.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/ModalBottomSheet.android.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/Strings.android.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SheetDefaults.kt

https://android-review.googlesource.com/2531428

an...@microsoft.com <an...@microsoft.com> #3May 25, 2023 06:37AM

Tested with 1.2-alpha02. There are some improvements but the cases still all have problems.

Pixel 4a landscape is not clipping the bottom of the sheet anymore, but a white box is appearing on the right side of the screen the size of the system navigation buttons when not using gesture navigation.

Pixel C API33 emulator in landscape the bottomsheet is now sized so all the items would be visible, IF it was appearing over top the system navigation bar, but the bottom is behind it still in that tablet case. On a Pixel C API29 emulator in landscape the bottomsheet appears on top of the system navigation bar, but taps are not being recognized on that are. (don't have samsung s5e tablet with android 9 to test right now)

in the sample and our usage, we are not using edge to edge mode or full scaffold infrastructure (actual app usage is with a ComposeView thats not full screen)

PixelCEmulator-API33-Landscape-1.2.alpha2.png

66 KB

View

Download

Pixel4a-API33-1.2-alpha02.png

48 KB

View

Download

se...@google.com <se...@google.com> Jun 27, 2023 03:02PM

Assigned to se...@google.com.

se...@google.com <se...@google.com> Aug 31, 2023 06:53PM

Reassigned to ma...@google.com.

se...@outlook.de <se...@outlook.de> #4Sep 17, 2023 10:14AM

>>>> Pixel 4a landscape is not clipping the bottom of the sheet anymore, but a white box is appearing on the right side of the screen the size of the system navigation buttons when not using gesture navigation. <<<<

This is really a big problem. So unfortunately we cannot use the ModalBottomSheet productively yet.
When can we expect a correction?

pr...@oodles.io <pr...@oodles.io> #5Sep 22, 2023 05:28AM

upgraded to compose bom 2023.09.00. The right side no scrim issue is still there. Tested with Samsung m21 Android 13

ki...@protonmail.com <ki...@protonmail.com> #6Nov 1, 2023 10:41PM

Any updates on this?

bo...@gmail.com <bo...@gmail.com> #7Nov 14, 2023 04:56PM

such a shame that this issue still persists, it's been almost eight months

ra...@gmail.com <ra...@gmail.com> #8Dec 1, 2023 01:15PM

Some news about that?

ri...@gmail.com <ri...@gmail.com> #9Jan 21, 2024 06:47AM

is there any update on this?

si...@gmail.com <si...@gmail.com> #10Jan 30, 2024 12:23PM

ModalBottomSheet is not ready for production yet, our project have a lot of code, I can't just enable edge-to-edge for my Activity.

Without edge-to-edge enabled (`decorFitsSystemWindows` is true) material ModalBottomSheet works incorrect, it always overlaps navigation bar.

I tried different solutions, but the only one that works for me is very ugly:

```
@Composable
@SuppressLint("DiscouragedApi")
// todo:

https://issuetracker.google.com/issues/274872542
private fun rememberDimensionByName(name: String): Int {
val resources = LocalContext.current.resources
return remember {
val id = resources.getIdentifier(name, "dimen", "android")
if (id == 0) 0 else resources.getDimensionPixelSize(id)
}
}

<...>

val topInsets = WindowInsets(top = rememberDimensionByName("status_bar_height"))
val bottomInsets = WindowInsets(bottom = rememberDimensionByName("navigation_bar_height"))
ModalBottomSheet(
...
windowInsets = topInsets,
content = {
Box(Modifier.padding(bottomInsets.asPaddingValues())) {
...
}
},
)
```
android plugin "8.2.2"
kotlin version "1.9.22"
kotlinCompilerExtensionVersion = "1.5.8"
androidx.activity:activity-compose:1.8.2
androidx.compose.ui:ui:1.6.0
androidx.compose.material3:material3:1.1.2

ty...@gmail.com <ty...@gmail.com> #11Jan 30, 2024 10:40PM

Was really hoping that M3 1.2 moving to Rc1 meant this was fixed but appears its still very much an issue.

di...@gmail.com <di...@gmail.com> #12Feb 7, 2024 06:55PM

Yes, I still see the issue as well even with edge to edge enabled.

he...@gmail.com <he...@gmail.com> #13Feb 11, 2024 01:31AM

It's amazing how this is taking so long to fix.

se...@google.com <se...@google.com> Feb 15, 2024 07:50PM

Accepted by se...@google.com.

ma...@gmail.com <ma...@gmail.com> #14Feb 22, 2024 05:37AM

When this will be fixed

he...@gmail.com <he...@gmail.com> #15Feb 26, 2024 07:29PM

Maybe when they release Material 4

za...@gmail.com <za...@gmail.com> #16Mar 5, 2024 09:26PM

We are in March 2024 and this is still an issue. When is this planned to be fixed?

sh...@zohocorp.com <sh...@zohocorp.com> #17Mar 23, 2024 09:26AM

Any update on this?

se...@google.com <se...@google.com> #18Mar 25, 2024 07:29PM

We are working on moving the underlying logic to a dialog implementation which should improve this experience in a variety of devices. Apologies for the delay on this. In the meantime, I have the first iteration of this change here: https://r.android.com/3007166

Would appreciate any and all eyes on this, and especially any manual testing that can be done on a variety of devices/edge cases.

ap...@google.com <ap...@google.com> #19Apr 22, 2024 12:07PM

Project: platform/frameworks/support
Branch: androidx-main

commit 33c32f65dd7879954cfa7a46a76eb959c977e291
Author: Jose Figueroa <serniebanders@google.com>
Date: Tue Mar 19 17:08:01 2024

[M3][BottomSheet] Migrate bottom sheet to dialog implementation from popup.

Dialog provides access to the new window created, which allows for system bars styling, setDecorFitsSystemWindows for edge to edge functionality, and unconsumed window insets for proper content padding.

Bug: 274872542
Bug: 300280229
Bug: 290893168
Test: "Existing tests now check for dialog, toggle decorFitsSystemWindows for edge to edge. Added Unit Test for content window inset consumption. Manual testing on API 28, 31, 33, 34 on Pixel 4a, 7, 8, Tablet, and Samsung Galaxy S24"
RelNote: "ModalBottomSheet more accurately draws scrim over status bar when edge to edge is enabled. Modal bottom sheet content can now consume window insets, allowing for visible content above navigation bar. ModalBottomSheet parameter windowInsets renamed to contentWindowInsets to specify where the insets will be applied, these are no longer tied to window logic. contentWindowInsets type has been changed to a function which returns WindowInsets, to allow it to be resolved within its new window."
Change-Id: I39630f2d9a1b159ef27fa62750ffa26b00e078a0

M compose/material3/material3/api/current.txt
M compose/material3/material3/api/restricted_current.txt
M compose/material3/material3/integration-tests/material3-catalog/src/main/java/androidx/compose/material3/catalog/library/ui/common/CatalogScaffold.kt
M compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/BottomSheetSamples.kt
M compose/material3/material3/src/androidInstrumentedTest/kotlin/androidx/compose/material3/ModalBottomSheetTest.kt
M compose/material3/material3/src/androidMain/kotlin/androidx/compose/material3/ModalBottomSheet.android.kt
M compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/SheetDefaults.kt
A compose/material3/material3/src/main/res/values-v30/styles.xml
A compose/material3/material3/src/main/res/values/styles.xml

https://android-review.googlesource.com/3007166

bo...@gmail.com <bo...@gmail.com> #20Apr 23, 2024 07:50AM

nice! thanks

ab...@gmail.com <ab...@gmail.com> #21Apr 24, 2024 09:05PM

Is there a fix available for this issue now?

se...@google.com <se...@google.com> #22Apr 25, 2024 03:31PM

I believe the following change will land alongside 1.3.0-alpha06. In the meantime, going to leave this bug open to allow some soak time.

pe...@gmail.com <pe...@gmail.com> #23May 4, 2024 03:21PM

hi, i'm testing 1.3.0-alpha06. the scrim now goes over the status bar when in edge to edge, which is great! however, i do have this problem (not sure if specific to alpha06) that the status bar color (and nav bar) is set to light whenever the scrim is on. any way to control weather the status bar color is light or dark? it looks like no matter what scrim i use, it is always light. thanks!

se...@google.com <se...@google.com> #24May 6, 2024 12:08PM

Looking into this styling issue with the status bar. Follow https://issuetracker.google.com/338342149 for updates.

se...@google.com <se...@google.com> #25May 15, 2024 07:19PM

Marked as fixed.

A proposed fix for this bug has been landed in our latest beta release. The bottom sheet window now extends edge to edge by default, and the content padding parameter, alongside with content tagged with system bar padding modifiers should now appropriately move content outside of the nav bar area.

ma...@olxbr.com <ma...@olxbr.com> #26Jun 18, 2024 09:33PM

Do you have any plans for releasing a stable material3 1.3.0? If there is no plan for releasing a stable 1.3.0 soon, is it possible to cherry pick the fix to a 1.2.x release?

jb...@anthropic.com <jb...@anthropic.com> #27Jun 22, 2024 01:50AM

This solution seems to work well for the nav bar area, but now bottom sheets with very long content draw behind the status bar at the top of the screen. By default, the grab bar will end up behind the status bar in this case. It isn't obvious how to apply the status bar padding here so that the bottom sheet doesn't go behind it.

As a workaround, you can apply padding to the top of the sheet, but it seems like something that should be handled by default.

    ModalBottomSheet(
        modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars)
    ) {
        ...
    }

Message last modified on Jun 22, 2024 02:16AM

ni...@carfax.com <ni...@carfax.com> #28Oct 1, 2024 01:17PM

ModalBottomSheet(
onDismissRequest = { onDismiss() },
sheetState = state,
dragHandle = { BottomSheetDefaults.DragHandle() },
modifier = Modifier.statusBarsPadding().navigationBarsPadding()
) {
//Compose Body
}

Similar issue I was facing while showing BottomSheet in full screen. I did some experiment with modifier and it worked.
My design requirement was to show full screen BottomSheet but below toolbar so I've added two properties.

ng...@gmail.com <ng...@gmail.com> #29Oct 22, 2024 04:59AM

I faced the issue recently. Using m3 1.3.0, fillMaxSize() skip partially expanded, it still go behind status bar although with windowInsetsPadding(WindowInsets.statusBars). I have to enableEdgeToEdge and manually going through my app to applied inset for other components if needed. Now the btm sheet work flawlessly with inset api.

Message last modified on Oct 22, 2024 04:59AM

Issue 274872542

Description

Issue summary

Comments

se...@google.com <se...@google.com> Apr 11, 2023 07:48PM

ap...@google.com <ap...@google.com> #2May 10, 2023 07:54PM

an...@microsoft.com <an...@microsoft.com> #3May 25, 2023 06:37AM

se...@google.com <se...@google.com> Jun 27, 2023 03:02PM

se...@google.com <se...@google.com> Aug 31, 2023 06:53PM

se...@outlook.de <se...@outlook.de> #4Sep 17, 2023 10:14AM

pr...@oodles.io <pr...@oodles.io> #5Sep 22, 2023 05:28AM

ki...@protonmail.com <ki...@protonmail.com> #6Nov 1, 2023 10:41PM

bo...@gmail.com <bo...@gmail.com> #7Nov 14, 2023 04:56PM

ra...@gmail.com <ra...@gmail.com> #8Dec 1, 2023 01:15PM

ri...@gmail.com <ri...@gmail.com> #9Jan 21, 2024 06:47AM

si...@gmail.com <si...@gmail.com> #10Jan 30, 2024 12:23PM

ty...@gmail.com <ty...@gmail.com> #11Jan 30, 2024 10:40PM

di...@gmail.com <di...@gmail.com> #12Feb 7, 2024 06:55PM

he...@gmail.com <he...@gmail.com> #13Feb 11, 2024 01:31AM

se...@google.com <se...@google.com> Feb 15, 2024 07:50PM

ma...@gmail.com <ma...@gmail.com> #14Feb 22, 2024 05:37AM

he...@gmail.com <he...@gmail.com> #15Feb 26, 2024 07:29PM

za...@gmail.com <za...@gmail.com> #16Mar 5, 2024 09:26PM

sh...@zohocorp.com <sh...@zohocorp.com> #17Mar 23, 2024 09:26AM

se...@google.com <se...@google.com> #18Mar 25, 2024 07:29PM

ap...@google.com <ap...@google.com> #19Apr 22, 2024 12:07PM

bo...@gmail.com <bo...@gmail.com> #20Apr 23, 2024 07:50AM

ab...@gmail.com <ab...@gmail.com> #21Apr 24, 2024 09:05PM

se...@google.com <se...@google.com> #22Apr 25, 2024 03:31PM

pe...@gmail.com <pe...@gmail.com> #23May 4, 2024 03:21PM

se...@google.com <se...@google.com> #24May 6, 2024 12:08PM

se...@google.com <se...@google.com> #25May 15, 2024 07:19PM

ma...@olxbr.com <ma...@olxbr.com> #26Jun 18, 2024 09:33PM

jb...@anthropic.com <jb...@anthropic.com> #27Jun 22, 2024 01:50AM

ni...@carfax.com <ni...@carfax.com> #28Oct 1, 2024 01:17PM

ng...@gmail.com <ng...@gmail.com> #29Oct 22, 2024 04:59AM

Add comment

Issue metadata