ItemActiveIndicator in not Visible in Material 3 Bottom Navigation Bar by Default in Android

Question

implementation 'com.google.android.material:material:1.5.0' added this already in Build.Gradle . . Code for implementing Bottom Navigation Bar:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   android:background="@color/PrimaryWhite">

   <com.google.android.material.bottomnavigation.BottomNavigationView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:menu="@menu/bottom_navigation_menu"
      app:layout_constraintBottom_toBottomOf="parent"
      android:padding="10dp"
      app:itemRippleColor="@color/AccentLight"
      app:labelVisibilityMode="auto"
      />
</androidx.constraintlayout.widget.ConstraintLayout>

Code for @menu/bottom_navigation_menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
   android:id="@+id/homePage"
   android:enabled="true"
   android:icon="@drawable/home_enabled"
   android:title="@string/homeBtnTxt"/>

   <item
      android:id="@+id/profilePage"
      android:enabled="true"
      android:icon="@drawable/user_enabled"
      android:title="@string/userBtnTxt"/>

   <item
      android:id="@+id/profilePage1"
      android:enabled="true"
      android:icon="@drawable/user_enabled"
      android:title="@string/userBtnTxt"/>

   <item
      android:id="@+id/profilePage2"
      android:enabled="true"
      android:icon="@drawable/user_enabled"
      android:title="@string/userBtnTxt"/>

</menu>

I repeated two menu bar items for example only so that my nav bar has more than 3 items..

Now after running app this screen appears as this video:

i need active indicator like this marked by red arrow in below image:

Searched a lot about this but didn't got help anywhere!! hope here i get solution!!

Answer 1

You need to change your app theme to material3 theme first then you will get material 3 style bottom navigation bar

here