Compose Bottom nav bar with custom shape and transparent around it

Question

So I need to create a custom bottom nav that the top border is not a straight line.

I've managed making the custom bar have this shape with a custom shape I've created and clipped to it.

My problem is once I pass my nav bar to the scaffold's bottomBar param, it automatically "saves" the whole height of my bar as a separate section from the screens content.

So when theres a list of items scrolling down it gets cut as a straight line and doesn't show from the sides of the half circle in the middle of my custom shape.

I've managed making it work only when I add the bottom nav below the content inside a box in the content param (see code below) instead of the passing it as the scaffold's bottomBar param but that way my nav won't be considered as part of the apps content padding hence I'll need to add bottom spacing to every screen to make sure views won't get lost behind the bar.

When no spacing added manually -

Code that works but with out passing it in the bottomNav param -

Scaffold(
            modifier = Modifier
                .fillMaxSize(),
            topBar = topBar,
//             bottomBar = bottomBar, ** The problem is when passed here **
            content = { paddingValues ->
                Box(Modifier.padding(paddingValues)) {
                    content(paddingValues)
                    BottomNavigationBar(Modifier.align(Alignment.BottomCenter), navController)
                }
            }
        )

Desired outcome while passing it as bottomNav param to scaffold - (Achieved it only by adding space manually like explained in previous paragraph)

Settings transparent background is not the solution because as stated, when the bar is passed as the scaffold's bottomBar param it becomes a separate area below the actual content.

Answer 1

After putting quite some time into finding a solution, I ended up finding one which is actually pretty simple and straight forward.

Instead of passing the paddingValues as received, which actually have the bottom padding for the bottomNav section, I create a custom PaddingValues object and take only the top padding from the actual padding to take the toolbar's section under consideration and add the bottom padding as I wish.

Scaffold(
            modifier = Modifier
                .fillMaxSize(),
            topBar = topBar,
            bottomBar = bottomBar,
            content = { paddingValues ->
                val heightToDecrease = 20.dp //Custom shape's notch height to decrease from bottom padding
                Box(Modifier.fillMaxSize().padding(
                    PaddingValues(
                        top = paddingValues.calculateTopPadding(),
                        bottom = paddingValues.calculateBottomPadding() - heightToDecrease))) {
                    content()
                }
            },
        )