How to add background for only icons in bottom navigation bar android?

Question

I want to add only background for icon not all the item background.

Here is my code:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/surface_container_lowest"
        app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
        app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
        app:itemTextColor="@color/on_surface"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@drawable/selector_bottom_nav_background
        app:menu="@menu/menu_main"/>

The background fills the icon and text, so how can I just fill only the icon like the attached image?

Thanks!

Answer 1

The menu from the picture is from material3 style, so your app theme or at least bottom_navigation_main theme has to have parent theme from Theme.Material3 e.g. Theme.Material3.DayNight.NoActionBar. With this it should work fine, just remove app:itemBackground="@drawable/selector_bottom_nav_background" line.

If you don't want to change whole app theme, add android:theme="@style/Theme.Material3.DayNight" to set theme just for the navigation, it should look like this:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/surface_container_lowest"
        app:itemTextAppearanceActive="@style/Theme.FarmKeep.TextAppearance.SemiBold.LabelSmallProminent"
        app:itemTextAppearanceInactive="@style/Theme.FarmKeep.TextAppearance.Regular.LabelSmall"
        app:itemTextColor="@color/on_surface"
        app:labelVisibilityMode="labeled"
        android:theme="@style/Theme.Material3.DayNight"
        app:menu="@menu/menu_main"/>

Answer 2

Try this:

<!-- res/drawable/icon_selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <solid android:color="#FF6200EE"/> <!-- Background color for the selected state -->
                    <size android:width="24dp" android:height="24dp"/>
                </shape>
            </item>
            <item android:drawable="@drawable/ic_your_icon" android:gravity="center"/>
        </layer-list>
    </item>
    <item android:drawable="@drawable/ic_your_icon"/> <!-- Default icon -->
</selector>

Other layout:

 <!-- res/menu/menu_main.xml -->
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/icon_selector"
            android:title="@string/title_home" />
        <!-- Other items -->
    </menu>