Selected Item in BottomNavigationView Has Same Color as Background

Question

I am implementing a bottom navigation menu. but the first item in the menu is not selected. I notice that when I change the color of bar background then it shows, and the reason is that the first item "enabled" color is the same as the background color of my navbar. How can I change the colors of the enabled tab as well as the remaining items. By default they're black... let's say I want to change them to white. Thanks image of main activity. http://pctechtips.org/apps/activity.png menu xml file

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

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
</menu>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <org.techgeorge.textrecon.PaintView
        android:id="@+id/paintView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:menu="@menu/bottom_nav_menu" />

</RelativeLayout>

Gabriele Mariotti · Answer 1 · 2019-12-01T08:06:34.497

The color of the selected/unselected icons and labels are defined by the app:itemIconTint and app:itemTextColor attributes with a selector. The default style of the BottomNavigationView uses this selector for tinting the icon and the label of the icons:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="1.0" android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>

Check if for some reason the colors colorOnSurface and colorPrimary are the same color of the background of your BottomNavigationView.

You can in any case override these colors without defining a new selector.
Just use the android:theme attribute:

  <com.google.android.material.bottomnavigation.BottomNavigationView
      android:theme="@style/ThemeOverlay.BottomNavView"
      ../>

with:

  <style name="ThemeOverlay.BottomNavView" parent="">
    <item name="colorPrimary">@color/secondaryDarkColor</item>
    <item name="colorOnSurface">@color/colorAccent</item>
  </style>

You can also use a custom style with the materialThemeOverlay attribute:

  <style name="MyWidget.MaterialComponents.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.BottomNavView</item>
  </style>

with:

  <com.google.android.material.bottomnavigation.BottomNavigationView
      style="@style/MyWidget.MaterialComponents.BottomNavigationView"
      ../>

This last attribute requires the version 1.1.0 of the library.

Very clear answer on how to do this via theming. – Richard Dec 02 '20 at 08:47 — Richard, Dec 02 '20 at 08:47
Wondering if this can also be overriden in the app's theme? – David Feb 26 '21 at 12:11 — David, Feb 26 '21 at 12:11

score 9 · Accepted Answer · answered Nov 30 '19 at 18:14

You need to make drawable selector for your bottom navigation view, here is the example (nav_item_color_state.xml)

<?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/darker_gray" android:state_checked="false" />
</selector>

then add codes below to your bottom navigation view

app:itemIconTint="@drawable/nav_item_color_state" app:itemTextColor="@drawable/nav_item_color_state"

Thanks, this really helped. – King Of The Jungle Mar 25 '22 at 20:53 — King Of The Jungle, Mar 25 '22 at 20:53

Selected Item in BottomNavigationView Has Same Color as Background

2 Answers2