How to change the color that is around the selected item in android studio bottom navigation bar in Kotlin?

Question

I couldn't found the way to change the color that is around the selected item in bottom navigation bar. Like the purple color in picture below.

I tried changing the primary color(which is purple in default), and I also tried changing the itemRippleColor but it only change the outside of the selected item when clicked. This purple color lasts as long as the icon is selected. I also tried using a selector to change the color of icon depend on state checked, but it changed the color of icon itself but the color around it.

Answer 1

From your screenshot I suppose you're using the Material 3 Navigation Bar, in the linked documentation I see that the ripple color of the active item is

Variations of ?attr/colorPrimary

You can check all states here

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- Selected. -->
  <item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorPrimary" android:state_pressed="true" android:state_selected="true"/>
  <item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorPrimary" android:state_focused="true" android:state_selected="true"/>
  <item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorPrimary" android:state_hovered="true" android:state_selected="true"/>

  <!-- Unselected. -->
  <item android:alpha="@dimen/m3_ripple_pressed_alpha" android:color="?attr/colorPrimary" android:state_pressed="true"/>
  <item android:alpha="@dimen/m3_ripple_focused_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_focused="true"/>
  <item android:alpha="@dimen/m3_ripple_hovered_alpha" android:color="?attr/colorOnSurfaceVariant" android:state_hovered="true"/>
  <item android:color="@android:color/transparent"/>
</selector>