Android: App layout: floating bottom nav obscures fragment container

Question

I'm trying to create this cool looking bottom nav where the fragment content "flows under it" as you scroll. Here's the screen, focus on the bottom: notice how you can see the content of the fragment under the bottom nav card. enter image description here

However, when scrolling up to see the bottom of the fragment or tap on something there, it's hidden behind the bottom nav's card. You want to give it one more up-scroll so that this portion is visible -- but I cannot figure how to do this.

Here's the main activity layout, where these things are defined:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Top App Bar (Material 3 Toolbar) -->
<!-- the 16dp margins visually align with the 20dp margins of the content, somehow-->
<com.google.android.material.appbar.MaterialToolbar
 android:id="@+id/topAppBar"
 android:layout_width="0dp"
 android:layout_height="?attr/actionBarSize"
 android:paddingStart="16dp"
 android:paddingEnd="16dp"
 android:theme="@style/ThemeOverlay.Material3.ActionBar"
 app:contentInsetStart="0dp"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:menu="@menu/bottom_nav_menu"
 app:title="CapitalGain.AI"
 app:titleMarginTop="16dp"
 app:titleTextAppearance="@style/TextTitle2" />
<!--
NavHostFragment fills the middle area
adding this: app:layout_constraintBottom_toTopOf="@id/nav_card"
will make the content not flow "under" the bottom nav
app:layout_constraintBottom_toBottomOf="parent"
will make the content flow under, but the bottom is inaccessible (YL 10/25)
-->
<androidx.fragment.app.FragmentContainerView
 android:id="@+id/main_fragment_container"
 android:name="androidx.navigation.fragment.NavHostFragment"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 app:defaultNavHost="true"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toBottomOf="@id/topAppBar"
 app:layout_constraintBottom_toTopOf="@id/nav_card"
 app:navGraph="@navigation/mobile_navigation" />
<!-- Bottom navigation -->
<com.google.android.material.card.MaterialCardView
 android:id="@+id/nav_card"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:cardCornerRadius="12dp"
 app:cardElevation="8dp"
 android:layout_margin="20dp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 >
 <com.google.android.material.bottomnavigation.BottomNavigationView
 android:id="@+id/nav_view"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="?android:attr/windowBackground"
 app:menu="@menu/bottom_nav_menu"
 app:labelVisibilityMode="unlabeled"
 app:itemBackground="@drawable/bottom_nav_item_bg"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent" />
</com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

what I've tried (to no avail):

1. Add padding to the bottom of the container (effectively disables the "flow under" effect)
2. Add padding to the fragments themselves (ditto)
3. Adjust the padding in Kotlin, after the nav is set up (no effect)

Speaking of which, here's the nav code in ActivityMain:

 val navView: BottomNavigationView = binding.navView
 val navController = (supportFragmentManager
 .findFragmentById(R.id.main_fragment_container) as NavHostFragment)
 .navController
 navView.setupWithNavController(navController)
 // regain the original icon colors; above call defaults them to black
 navView.itemIconTintList = null
 navView.itemTextColor = null
 navView.itemActiveIndicatorColor = null
 navView.itemRippleColor = ContextCompat.getColorStateList(this, R.color.greenLightest)

Anyone knows how to do this? Many thanks!

• tomerpacific: Could this be related to edge-to-edge?