Android: Problem in Transparent Bottom Navigation inside the Bottom App Bar

Question

I am trying to achieve this kind of Bottom App Bar.

I manage to do this.

Then I put app:backgroundTint="@android:color/transparent" in Bottom navigation but it turns out as shown below. It's not that properly set as transparent.

Layout code:

<com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorPrimary"
        app:fabCradleRoundedCornerRadius="20dp">
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_marginRight="16dp"
            app:backgroundTint="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/app_bar_menu" />
    </com.google.android.material.bottomappbar.BottomAppBar>

Answer 1

It is the shadow of the BottomNavigationView. Use:

<com.google.android.material.bottomnavigation.BottomNavigationView
    app:elevation="0dp"
    app:backgroundTint="@android:color/transparent"