Separator between content and bottom navigation view (material) like PlayStore

Question

The new play store bottom navigation bar looks like this. As you can see there is a separator between the bottom navigation bar and the main content. How do I achieve this separator? I am using a material BottomNavigationView.

My current XML looks like this:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:itemBackground="@color/colorPrimary"
        app:itemTextColor="@color/tab_item"
        app:itemIconTint="@color/tab_item"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_menu" />

Answer 1

I think I found out how the play store is doing it. There exists a material component called "Divider".

I just added it as a child view of the BottomNavigationView and it looks exactely the same as on the play store.

Here's the new code of the child view:

<com.google.android.material.divider.MaterialDivider
    android:id="@+id/divider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />