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

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

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!

Solution

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"/>