BottomNavigationView never fills system navigation buttons when edge to edge

Question

I'm trying to make edge to edge UI with top nav bar, bottom nav bar and drawer.

the BottomNavigationView doesn't want to fill the system navigation buttons. screenshot

i've tried to put the BottomNavigationView alone in LinearLayout, but still the same issue. neither the color of system navigation buttons changed nor the BottomNavigationView overlapped with system navigation buttons.

i tried to put buttons and image without the BottomNavigationView, both work well and overlapped with system navigation buttons. but once i add the BottomNavigationView they just disappeared? or have been covered behind the BottomNavigationView, and all became over the system navigation buttons.

i'm using material design 3 so i don't know if the issue from it or not.

i've tried to add fitsSystemWindows to everything, tried true/false, removed from some, add it to some, moved the BottomNavigationView element out side of the drawer, and too many other desperate attempts.

all what i want is just to make it like this screenshot.

xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="fill_parent"
    android:fontFamily="@font/helveticarounded"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="false"
    >

    <LinearLayout
        android:id="@+id/main"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fitsSystemWindows="false"
        android:fontFamily="@font/helveticarounded"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/AppBarLayout"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="top"
            android:fitsSystemWindows="false"
            android:gravity="top"
            android:layout_marginTop="0dp"
            android:fontFamily="@font/helveticarounded">
            <FrameLayout
                android:id="@+id/Frame_toolbar"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="20dp"
                android:fontFamily="@font/helveticarounded"
                android:fitsSystemWindows="false"
                android:elevation="8dp">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/topAppBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAlignment="center"
                    android:minHeight="?attr/actionBarSize"
                    app:navigationIcon="@drawable/baseline_menu_24"
                    android:layoutDirection="rtl"
                    android:fitsSystemWindows="false"
                    android:fontFamily="@font/helveticarounded"
                    app:title="@string/app_name" />
            </FrameLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragment_container_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="fill"
            android:fitsSystemWindows="false"
            android:layout_weight="1"
            android:layout_marginBottom="0dp"
            android:fontFamily="@font/helveticarounded" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:fitsSystemWindows="false"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_navigation_menu" />
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:elevation="2dp"
        android:fitsSystemWindows="false"
        android:layoutDirection="rtl"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation_drawer" />



</androidx.drawerlayout.widget.DrawerLayout>

java:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        EdgeToEdge.enable(this);

        super.onCreate(savedInstanceState);
       
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
       
        setContentView(R.layout.main);


    }

Answer 1

To solve this issue, I've override the dimensions from dimens.xml in folder value (create one if it doesn't exist), and this is the code I used.

 <?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="m3_bottom_nav_min_height" tools:override="true">50dp</dimen>
    <dimen name="m3_bottom_nav_item_padding_top" tools:override="true">5dp</dimen>
    <dimen name="m3_bottom_nav_item_padding_bottom" tools:override="true">5dp</dimen>
</resources>

and used

getWindow().setNavigationBarColor(SurfaceColors.SURFACE_2.getColor(this));

to make the color of the Navigation Bar match with BottomNavigationView! while this solution is temporary, i may post an updated code later to make it works with android 15+.

Answer 2

I check the source code of BottomNavigationView.java.

In BottomNavigationView.applyWindowInsets(), engineers avoid the issue of overlapping with the system navigation bar by adding padding to the bottom.

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomnavigation/BottomNavigationView.java#L142

The BottomNavigationView component is displayed above the system navigation bar, which seems to be in line with the MaterialUI design requirements.