BottomAppBar with BottomNavigationView: Cant change icon and text color

Question

I have a BottomAppBar with nested BottomNaviagtionView that looks like this. I can't seem to override the default purple color for when the selected icon is chosen.

Here is my code:

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto">

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    android:backgroundTint="@color/colorWhite"
    android:theme="@style/Theme.MaterialComponents.Light">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@drawable/bg_transparent"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_app_bar"
        android:theme="@style/Theme.MaterialComponents.Light"
        app:itemHorizontalTranslationEnabled="false" />
</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/redyellow"
    app:layout_anchor="@id/bottomAppBar"
    app:layout_anchorGravity="center"
    android:layout_marginBottom="10dp"
    /> </androidx.coordinatorlayout.widget.CoordinatorLayout>

Steps I have tried:

1. A few different themed style variations in the styles.xml file with no luck...similar to this

2. Then I created a custom drawable file like this:

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

And then apply that to the app:itemIconTint="@color/..." & app:itemTextColor="@color/nav_item_colors" but that didn't seem to work either.

Here is the rest of my code:

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="actionBarSize">70dp</item>
    </style>

    <style name="bottom_nav_overlay">
        <!-- selected item -->
        <item name="colorPrimary">@color/colorSecondary</item>
        <!-- other -->
        <item name="colorOnSurface">@color/colorPrimary</item>
    </style>

</resources>

gradle dependencies:

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    implementation "androidx.recyclerview:recyclerview:1.1.0"
    // For control over item selection of both touch and mouse driven selection
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc01"
    implementation "androidx.cardview:cardview:1.0.0"
    implementation 'de.hdodenhof:circleimageview:3.1.0'
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    implementation 'com.yarolegovich:discrete-scrollview:1.4.9'
    implementation 'com.google.android.material:material:1.1.0'
    implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

nav_item_colors.xml:

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

Answer 1

You can use the itemIconTint and itemTextColor attributes in the BottomNavigationView:

   <com.google.android.material.bottomnavigation.BottomNavigationView
           app:itemIconTint="@color/..."
           app:itemTextColor="@color/..."/>

Using a selector like:

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

Otherwise you can override the color using:

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

with:

<style name="bottom_nav_overlay">
    <!-- selected item -->
    <item name="colorPrimary">@color/...</item>
    <!-- other -->
    <item name="colorOnSurface">@color/...</item>
</style>

Answer 2

This is how I'm able to change bottomNavigation icon and text color into desired color

Inside BottomNavigationView

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

bottom_navigation_colors:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/dark_red" />
    <item
        android:state_checked="false"
        android:color="@color/black" />
</selector>