9

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.

ouflak
  • 2,458
  • 10
  • 44
  • 49
HarshBarash
  • 125
  • 1
  • 7

2 Answers2

24

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"
DrHowdyDoo
  • 2,327
  • 2
  • 7
  • 21
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

saburjon123456789
  • 21
  • 2
  • 1
    This is a programmatic approach and it may be correct, but you should prefer the accepted solution which works with styles overriding. – andrea.rinaldi Jun 06 '22 at 14:18