How to change the color of active indicator bottombavigationview material You? material3

Issue

I want to change the color of the selected area in the bottom navigation view material 3, but the color does not change in any way. I've tried selector, background, background Tint, and styles. All unsuccessfully.

Currently like this.

It should be like this.

Solution

You can change indicator color by overridng it's default style.

Default itemIndicatorStyle :

<style name="Widget.Material3.BottomNavigationView.ActiveIndicator" parent="">
<item name="android:width">@dimen/m3_bottom_nav_item_active_indicator_width</item>
<item name="android:height">@dimen/m3_bottom_nav_item_active_indicator_height</item>
<item name="marginHorizontal">@dimen/m3_bottom_nav_item_active_indicator_margin_horizontal</item>
<item name="shapeAppearance">@style/ShapeAppearance.Material3.NavigationBarView.ActiveIndicator</item>
<item name="android:color">?attr/colorSecondaryContainer</item>

just override the style according to your preference :

<style name="App.Custom.Indicator" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
    <item name="android:color">@color/blue</item>  
</style>

And then add this line to your bottomNavigationView xml code :

app:itemActiveIndicatorStyle="@style/App.Custom.Indicator"

Answered By - DrHowdyDoo