BottomNavigationView - How to disable selected icon highlight

Question

I have a bottomnavigation view that sets an icon depending on the state if it's checked or not.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/icon_tree"
        android:title="Tree"
        android:icon="@drawable/bottomnav_icon_home">
    </item>

</menu>

bottomnav_icon_home:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_home_black" android:state_checked="false"/>
    <item android:drawable="@drawable/icon_home_green" android:state_checked="true"/>

</selector>

How ever bottomnavigation is automatically highlighting the icon when android:state_checked is true.

How do I completely disable bottomnavigation's icon selection highlight?

I've tried setting app:itemIconTint="@drawable/bottom_navigation_selector" to @null however that doesn't work

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_navigation_menu"
            android:background="@color/colorWhite"
            app:itemTextColor="@drawable/bottom_navigation_selector"
            app:itemIconSize="28dp"
            app:itemIconTint="@drawable/bottom_navigation_selector"
            app:labelVisibilityMode="labeled"/>

bottom_navigation_selector:

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

What do you mean? I have two icon states that I want. One with black highlight and white inside, and one with black highlight with green inside. Does using same color for both state have that outcome? — DIRTY DAVE, Jan 31 '20 at 03:12
Setting them both to black removes the green https://i.imgur.com/8ClmMSD.png — DIRTY DAVE, Jan 31 '20 at 03:18
What do you mean by How do I completely disable bottomnavigation's icon selection highlight? — VVB, Jan 31 '20 at 13:04

score 7 · Accepted Answer · answered Feb 06 '20 at 05:36

7

If i understood you right, android by default sets a tint on your bottom navigation icons on selection and you would like it to be removed right.

I know how to do that in your java class not xml though.

You'll need to set setItemIconTintList method of your BottomNavigationView to null. So in wherever you set the layout write code as :

BottomNavigationView btmNav = findViewById(R.id.bottom_navigation);
btmNav.setItemIconTintList(null);

Let us know if this works for you.

answered Feb 06 '20 at 05:36

ljk

1,496
1
11
14

Would prefer an XML way, but I've searched through the docs and there doesn't seem like there is one? Maybe I missed it? – DIRTY DAVE Feb 07 '20 at 20:46
Had a similar requirement, tried to find a way in xml myself but this was the only way i could disable the feature. Hope someone finds another way in xml... – ljk Feb 07 '20 at 22:33
Thanks for your help appreciate it, I'll give you the bounty =) – DIRTY DAVE Feb 07 '20 at 23:12

score 1 · Answer 2 · answered Feb 05 '20 at 21:30

1

try to add this line in the dimens.xml

<dimen name="design_bottom_navigation_active_text_size" tools:override="true">@dimen/design_bottom_navigation_text_size</dimen>

answered Feb 05 '20 at 21:30

DemoDemo

372
1
12

score 1 · Answer 3 · answered Apr 23 '21 at 19:19

You can create custom style.

There are two steps.

1- Create custom bottom_navigation_bar_icon_color.xml in drawable folder. This is the selector showed the icon highlighted or default. So you can highlight all icons or show them as default. Choose one of the following when creating your bottom_navigation_bar_icon_color.xml

Icons highlighted: <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true"/>
Icons default: <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>

bottom_navigation_bar_icon_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
</selector>

2- Add following custom style to themes.xml or styles.xml. bottom_navigation_bar_icon_color used in itemIconTint and itemTextColor

<style name="BottomNavigationThemeCustom">
    <item name="enforceTextAppearance">true</item>
    <item name="enforceMaterialTheme">true</item>
    <item name="android:background">?attr/colorPrimary</item>
    <item name="itemIconTint">@drawable/bottom_navigation_bar_icon_color</item>
    <item name="itemRippleColor">@color/mtrl_navigation_bar_colored_ripple_color</item>
    <item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
    <item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
    <item name="itemTextColor">@drawable/bottom_navigation_bar_icon_color</item>
</style>

3- Use your new style for bottomNavigationBar

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            style="@style/BottomNavigationThemeCustom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_menu" />

4- If you want to hide the bottomNavigationBar on Scroll add following attribute to bottomNavigationBar

app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"

score 0 · Answer 4 · answered Feb 05 '20 at 22:43

You consider create your own implementation of bottomNavigation? When I implement the Google BottomNavigationView, I got a lot of issues, so I create a new one like this:

<LinearLayout android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:layout_alignParentBottom="true">

    <View android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="@color/grayBottomNavigationDelimiter"/>

    <RadioGroup android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorNavigationBar"
                android:orientation="horizontal">

        <android.support.v7.widget.AppCompatRadioButton
            android:id="@+id/homeButton"
            android:drawableTop="@drawable/ic_home_black_24dp"
            android:text="@string/navigation_home_text"
            style="@style/RadioButtonStyle"/>
...

So, can see this is easier than imagine, did you?

score 0 · Answer 5 · answered May 11 '21 at 08:42

To add it through XML: For the attribute IconItemTint and ItemTextColor, simply use the same color that you've used for icons by default. In that case, the highlight color and default color will be the same. Will give you the required ripple effect on selecting but highlight wont be visible.

For my black color icon, I've used this:

    app:itemIconTint="@color/black"
    app:itemTextColor="#000000"

My entire bottom nav looks like this:

    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/black"
    app:itemTextColor="#000000"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_more_options_menu" />

BottomNavigationView - How to disable selected icon highlight

5 Answers5