Search code examples
androidkotlinnavigationbottom-navigation-bar

How to remove transparent background from tapped button in Android Bottom Navigation Bar?

enter image description here I have a navigation bar like this:

    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="32dp"
    android:layout_marginRight="32dp"
    android:layout_marginBottom="24dp"
    android:background="@drawable/drw_bottom_navigation_background"
    app:elevation="0dp"
    app:itemIconSize="100dp"
    app:itemRippleColor="@android:color/transparent"
    app:itemTextColor="@android:color/transparent"
    app:itemIconTint="@drawable/bottom_navigation_color_selector"
    app:labelVisibilityMode="unlabeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_navigation_menu"
    app:itemBackground="@android:color/transparent"
    />

Whit menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/profile_menu"
        android:title="@null"/>

    <item
        android:id="@+id/requestsFragment"
        android:icon="@drawable/requests_menu"
        android:title="@null"/>

    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/home_menu"
        android:title="@null" />
</menu>

and itemIconTint:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/Primary200" />
</selector>

So how to remove this transparent white background from buttons.

Solution

  • Add this style: @style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface

    So final code:

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            style="@style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginLeft="32dp"
            android:layout_marginRight="32dp"
            android:layout_marginBottom="24dp"
            android:background="@drawable/drw_bottom_navigation_background"
            app:elevation="4dp"
            app:itemIconSize="100dp"
            app:itemIconTint="@drawable/bottom_navigation_color_selector"
            app:labelVisibilityMode="unlabeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_navigation_menu" />

    Good luck.