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

Question

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.

Answer 1

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"

Answer 2

you can use this function for change indicator color: findViewById<BottomNavigationView>(R.id.bottomNavigationView) .itemActiveIndicatorColor = getColorStateList(R.color.white)

and set this annotatin for your onCreate function @RequiresApi(Build.VERSION_CODES.M) look in the screenshot