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);
}
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+.