CODEWITHSUNDEEP
androidandroid-bottomnavigationview
WHOATEMYNOODLES
WHOATEMYNOODLES

Reputation: 2731

BottomNavigationView - How to disable selected icon highlight

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>

enter image description here

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

enter image description here

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>

Upvotes: 2

Views: 10646

Answers (7)

saif
saif

Reputation: 1

I am able to remove that blue highlight by using

app:itemActiveIndicatorStyle="@color/white"

in my BottomNavigationView

this is my complete code

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="wrap_content"
    android:foregroundGravity="center"
    android:layout_height="60dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/searchView"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="10dp"
    app:itemIconSize="100dp"
    app:itemActiveIndicatorStyle="@color/white"
    android:defaultFocusHighlightEnabled="false"
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/bottom_navigation_menu" />

Upvotes: 0

Ron Nyonje
Ron Nyonje

Reputation: 11

You can add "app:itemActiveIndicatorStyle="@style/ShapeAppearance.Material3.Corner.None" into the bottom navigation tag so that selection highlight disappears.

<com.google.android.material.bottomnavigation.BottomNavigationView app:itemActiveIndicatorStyle="@style/ShapeAppearance.Material3.Corner.None" />

Upvotes: 1

Vikram Baliga
Vikram Baliga

Reputation: 504

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

Upvotes: 0

Alper Aslan
Alper Aslan

Reputation: 61

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"

Upvotes: 1

ljk
ljk

Reputation: 1616

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.

Upvotes: 9

FacuArg
FacuArg

Reputation: 64

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?

Upvotes: 0

DemoDemo
DemoDemo

Reputation: 392

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>

Upvotes: 1

Related Questions