Customize navigation bar in Android Studio

Hello all,
I am currently building a navigation bar for my app. Since I am relatively new, I have one or the other problem.
The desired result should look like this:

My version that I have so far looks like this:

I have the individual icons as .png with and without gradient (white). as well as the background to be displayed when selected.

For the items:

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

    <item
        android:id="@+id/home2"
        android:icon="@drawable/exert_menu_bottom_icon_footprints_gradient"
        android:title="" />
    <item
        android:id="@+id/steps"
        android:icon="@drawable/exert_menu_bottom_icon_boost_gradient"
        android:title=""
        />
    <item
        android:id="@+id/transactions"
        android:icon="@drawable/exert_menu_bottom_icon_wallet_gradient"
        android:title=""
  />
</menu>

For the navigation:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:layout_marginStart="200dp"
            android:layout_marginEnd="200dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/exert_menu_bottom_border_gradient"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_nav" />

Questions that arise from this would be:

• Does anyone know another possibility than the bottomnavigation?
• How can I use the colored gradient for the selected page?
• Will this work with .png images or do they have to be .xml files?

Thanks for any contribution in advance

Ben