DEV Community

benreturns
benreturns

Posted on

Customize navigation bar in Android Studio

#android #java #nav #bar

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:

Goal layout

My version that I have so far looks like this:

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

Icon in White for selection
Icon with gradient if not selected
Background if 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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)