How to change bottomNavigationView selected item's background ripple

Question

I am new to Android development. I want to change the background colour of a selected icon from the bottom navigation view but have failed to do so. I searched a lot on Google, but I failed to get help from ChatGPT. Adding the screenshot of the app will give you guys an idea of what I want to do.

activity_main.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav"
        >
</com.google.android.material.bottomnavigation.BottomNavigationView>

res/menu/bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/inbox"
        android:icon="@drawable/snapchat_icon_140"
        android:title="Inbox"
        />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/setting_icon_24"
        android:title="Settings" />
</menu>

I wanted the colour of the selected item's background to be yellow rather than the default, which is purple. See the attached image for understanding here.

Answer 1

Create style for your BottomNavigationView. It is necessary to set the style for itemActiveIndicatorStyle:

<style name="BottomNavigation" parent="Widget.Material3.BottomNavigationView">
        ...
        <item name="itemActiveIndicatorStyle">@style/ActiveIndicatorStyle</item>
        ...
</style>

Create style for itemActiveIndicatorStyle:

<style name="ActiveIndicatorStyle" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
        <item name="android:color">@color/your_color</item>
</style>

Use style:

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    style="@style/BottomNavigation"
    ...
/>