CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-navigation-barwindowinsetsmodalbottomsheet
avatar_aang
avatar_aang

Reputation: 160

ModalBottomSheet animation going over system NavigationBar

Problem: When the Compose ModalBottomSheet is being dismissed it animates over the navigationBar, or rather "through" it, the nav buttons stay visible over the sheet, but the navigationBar background is covered by the sheet while it's being dismissed (I'm testing with 3-button nav) [see right image]. At first I thought this was default behavior that can't be changed, but then I saw Instagram, Uber, and Discord have sheets which slide behind the navigationBar background when they are dismissed. How do I get the navigationBar background to stay in the front?

EDIT: I found the same behavior in an all Compose test app with enableEdgeToEdge() (default params) so the mixed app stuff background below is probably irrelevant

Background: We have a single activity mixed fragments/compose app using Compose ModalBottomSheets. I found out yesterday how to prevent the sheets from overlapping with system bars when expanded by setting WindowCompat.setDecorFitsSystemWindows(window, false) on the activity, and since it's a mixed app, I've set the margin of the activity root to use the windowInsets but not consume them so that the sheet will also respect the windowInsets. And it all works, except during the animation.

The navigation bar color is set in the XML apptheme to a solid color and is not transparent:

<item name="android:navigationBarColor">@color/status_bar_color</item>

Left: Sheet expanded with proper windowInsets (all good here)
Right: Mid drag: the sheet is going over the navigationBar background
Expanded sheet Mid drag

Upvotes: 2

Views: 561

Answers (1)

AbdulelahAGR
AbdulelahAGR

Reputation: 211

When you use enableEdgeToEdge(), then the app is rendered from the edge of the screen to the edge and your components should handle insetes for system bars. In compose Material 3, most components handle this but in Material 2 that is not the case.

In your ModalBottomSheetLayout add systemBarsPadding() or navigationBarsPadding Modifier:

ModalBottomSheetLayout(
    modifier = Modifier.systemBarsPadding() // or try navigationBarsPadding if you only want nav bar padding,
    sheetContent = {/* Your sheet Content */},
    content = {},
)

Upvotes: 1

Related Questions