I'm new on Android development and I'm facing some issue about BottomNavigationView and overlapping.

Here is what look like my app when everything it's fine : ViewPager2 without BottomNavigationView

I have a GoogleMap fullscreen fragment and a ViewPager2 visible when user click on Google marker (to see details)

Now, when I add my BottomNavigationView, this is what it's look like : BottomNavigationView overlapping my ViewPagers2

This is my activity_main.xml :

<?xml version="1.0" encoding="utf-8"?><!--<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"-->
<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/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/common_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <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:background="@color/colorAccent"
        android:visibility="visible"
        app:itemIconTint="@drawable/bottom_navigation_colors"
        app:itemTextColor="@drawable/bottom_navigation_colors"
        app:labelVisibilityMode="unlabeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu"
        app:showAsAction="ifRoom" />


</androidx.constraintlayout.widget.ConstraintLayout>

The FragmentContainerView (@+id/common_fragment) represent the fragment content displayed when user select an item in the BottomNavigationView. So, when user click on the center item, the follow fragment_maps.xml is display

<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/mainMapsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true">

    <!-- My Google Map fragment -->
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/mapsFragment"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginBottom="16dp"
        android:clipToPadding="false"
        android:overScrollMode="never"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

The issue is, when I speficied app:layout_constraintBottom_toBottomOf="parent" on my @+id/viewPager, parent is relative to the ConstraintLayout of my Fragment. I don't know if it's possible to add constraint inside my Fragment who refer to component in my Activity parent.

I have tried something like this app:layout_constraintBottom_toTopOf="@+id/bottom_navigation" instead of app:layout_constraintBottom_toBottomOf="parent" but bottom_navigation is not visible from my fragment... screenshot for this

I don't know how to tell to my ViewPager2 to position itself above my BottomNavigationView...

If you have any idea on my issue, or maybe I'm going in the wrong way, please tell me.

Edit

I forgot to tell that I want to keep my BottomNavigationView overlapping my google map fragment. One of the futur evolution, is to set visible GONE all components (BottomNavigationView, FloatingButton) present on the map when user move the map. Given to the user a fullscreen google maps. And components will become VISIBLE after quick period of inactivity.

When adding app:layout_constraintBottom_toTopOf="@id/bottom_navigation" to my activity_main.xml, my ViewPager2 is correctly display on top of my bottom_navitation. But when bottom_navigation GONE, the maps is stretched. And when bottom_navigation become VISIBLE, the maps is flattened.