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.

Lightning

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"

Revealment

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

Lakeshialakey

This is a programmatic approach and it may be correct, but you should prefer the accepted solution which works with styles overriding. – Khz