Customize navigation bar in Android Studio

benreturns — Wed, 03 May 2023 07:50:40 +0000

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

DEV Community: benreturns

Customize navigation bar in Android Studio