Hello, `Material3` `ModalBottomSheet` in landscap...

# compose-android

[Tomas Gordian]

Hello, Material3 ModalBottomSheet in landscape mode on mobile has an extra right inset applied when using Theme.SplashScreen. It looks like it is the same size as the navigation bar inset.

[Tomas Gordian]

Screenshot_20240321_115836.png

[Tomas Gordian]

Minimum code to reproduce:

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            Surface(
                color = Color.Green,
                modifier = Modifier.fillMaxSize()
            ) {
                val sheetState = rememberModalBottomSheetState()
                val coroutineScope = rememberCoroutineScope()

                LaunchedEffect(Unit) {
                    coroutineScope.launch {
                        sheetState.show()
                    }
                }

                ModalBottomSheet(
                    windowInsets = WindowInsets(0, 0, 0, 0),
                    sheetState = sheetState,
                    onDismissRequest = {},
                    modifier = Modifier.fillMaxHeight()
                ) {}
            }

        }
    }
}

<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
      <item name="android:navigationBarColor">@android:color/transparent</item>
      <item name="android:statusBarColor">@android:color/transparent</item>
</style>

<style name="Theme.MyLauncherTheme" parent="Theme.SplashScreen">
      <item name="windowSplashScreenBackground">@android:color/black</item>
      <item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher_foreground</item>
      <item name="postSplashScreenTheme">@style/Theme.MyTheme</item>
    </style>

Is this a known issue or is there some workaround for this? Without Theme.SplashScreen it works correctly.

[Stylianos Gakis]

The first enableEdgeToEdge is supposed to be called before super.onCreate btw, can you change that first and see if you get a different result?

[Stylianos Gakis]

What I think happens in your case is that your content is actually constrained to be padded by the navigation bar. Then you enable this, so you get the right inset values inside your code, and then it also applies the nav bar insets to your sheet too. Effectively double applying it.
Just a hunch, from looking at the screenshot

[Tomas Gordian]

That did not help unfortunately, still the same result.

[Stylianos Gakis]

What does your code look like now?
Do you still have this windowInsets = WindowInsets(0, 0, 0, 0) there?

[Tomas Gordian]

Yes, I just tried to call enableEdgeToEdge before super.onCreate as you suggested. windowInsets are set to zero for other bugs with ModalBottomSheet. But even if I remove it, it has no effect on my issue.

[Stylianos Gakis]

and what is your windowSoftInputMode in your manifest?

[Tomas Gordian]

I dont have it set. I just tried couple of different modes, but it has no effect on the issue.

[Stylianos Gakis]

Oh last question 😅
Does this also happen if you open the sheet after you were already in landscape mode? Or only if you were in portrait, opened the sheet, and then went to landscape? I had a bug with that behavior too.
If not again then I’d ask you to make sure you are in latest version of the library, even try the latest alpha and see if there’s anything different there.

[Tomas Gordian]

I tried both ways 😄 I also tried the latest material3 alpha. My setup should not be special, the bug is also reproducible when creating new project or in Now in Android app.

[Stylianos Gakis]

Time for a bug report then 😊 https://issuetracker.google.com/issues/new?component=742043&template=1590761

[Tomas Gordian]

Looks like it is already reported: https://issuetracker.google.com/issues/300280229

[Tomas Gordian]

Update on the ModalBottomSheet issue: I noticed, that if I am using the Theme.SplashScreen , it has set:
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
I could override it in my theme to never and get rid of the extra right inset, but than I am getting black space on the left side:

[Stylianos Gakis]

What if you specify nothing at all for that windowLayoutInDisplayCutoutMode?
So just use the default one