Home > Back-end >  how to change the color of active indicator bottombavigationview material You? material3
how to change the color of active indicator bottombavigationview material You? material3

Time:12-21

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

now so

it should be like this

CodePudding user response:

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"
  • Related