How do I remove this "overlay" in the bottom navigation view (Android Studio)

Question

The following behavior only shows during run time

Image Showing unwanted bottom navigation view behavior

the xml code for the above is:

    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav_bar"
    android:layout_width="0dp"
    android:background="#92000000"
    android:layout_height="70dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_bar_menu" />

Answer 1

create a drawable resource file with a transparent rectangle and use it as view background

transparent_rectangle.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#92000000" />

</shape>

and your view should be

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_bar"
android:layout_width="0dp"
android:background="@drawable/transparent_rectangle"
android:layout_height="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/bottom_nav_bar_menu" />