Problem with size and design of BottomAppBar and BottomNavigation

Question

When I use BottomAppBar and BottomNavigation I see extra empty space at the bottom of the page Why am I seeing extra space at the bottom of the page? enter image description here

I use AndroidStudio Giraffe and this dependency :

  implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.6.0'

code :

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<!--Nav Host-->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />
<!--Bottom menu-->
<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/mainBottomAppbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:fabAnimationMode="scale"
    app:fabCradleMargin="@dimen/_10mdp"
    app:fabCradleRoundedCornerRadius="@dimen/_15mdp"
    app:fabCradleVerticalOffset="@dimen/_10mdp">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/mainBottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/_15mdp"
        app:itemIconTint="@color/item_bottom_nav_tint"
        app:itemTextColor="@color/item_bottom_nav_tint"
        app:labelVisibilityMode="selected"
        app:menu="@menu/menu_main" />

</com.google.android.material.bottomappbar.BottomAppBar>
<!--Menu-->
<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/mainFabMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/app_name"
    android:src="@drawable/ic_person_circle_plus"
    app:backgroundTint="@color/Blue_Lagoon"
    app:layout_anchor="@id/mainBottomAppbar"
    app:tint="@color/white" />

  </androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

I found the answer to this question:

1- First, you must use Material Design 2 For this, you need to go to the Theme section and change Material 3 to Material Component

 <style name="Base.Theme.MyApplication" parent="Theme.MaterialConponent.DayNight.NoActionBar">

2- When creating a project based on material 3, this line of code is in your main activity.

WindowCompat.setDecorFitsSystemWindows(window, false)

MainActivityClass

class MainActivity : AppCompatActivity() {

private var _binding: ActivityMainBinding? = null
private val binding get() = _binding!!

//Other
private lateinit var navHost: NavHostFragment

override fun onCreate(savedInstanceState: Bundle?) {
//WindowCompat.setDecorFitsSystemWindows(window, false) --------> This line 
    super.onCreate(savedInstanceState)

    _binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

By removing this line, this extra space will be removed to the bottom of the page