How to change inactive color on bottom navigation?

Question

I can't change inactive color on my bottom navigation

and this my xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/home_item"
    android:icon="@drawable/ic_home"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Home"
    />
<item
    android:id="@+id/setting_item"
    android:icon="@drawable/ic_setting"
    android:color="#FFFFFF"
    android:tint="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:title="Setting"
    />

and this my java

bottomBar.getBar().setBackgroundColor(getResources().getColor(R.color.bottom_tabs));
bottomBar.setActiveTabColor("#FFFFFE");

anyone can help?

Answer 1

If you are using the BottomNavigationView, the solution could be easy. You just need to create a selector as a ColorStateList, then assign the selector to the "itemIconTint" attribute of the BottomNavigationView.

For example:

Create file inside drawable

bottom_nav_icon_color_selector.xml

<?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/white" />
    <item android:state_pressed="true" android:state_enabled="true" android:color="@android:color/white" />
    <item android:color="@color/InactiveBottomNavIconColor" />
</selector>

BotttomNavigationview.xml

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavMainMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/BottomNavBarColor"
        app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
        app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
        app:menu="@menu/bottom_navigation_menu" />

Answer 2

Chrislis answer is a good start. However I like to solve this problem via styling and theming. I also used the new material BottomNavigationView for this example.

Create a new file under the color folder, for example: bottom_nav_item_color.xml

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

Add this line to your base theme located in themes.xml

<item name="bottomNavigationStyle">@style/BottomNavigationViewStyle</item>

Add this code to styles.xml

<style name="BottomNavigationViewStyle" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
    <item name="android:background">@color/my_background_color</item>
    <item name="itemTextColor">@color/bottom_nav_item_color</item>
    <item name="itemIconTint">@color/bottom_nav_item_color</item>
</style>

Now the BottomNavigationView should be styled correctly

Example layout file

<com.google.android.material.bottomnavigation.BottomNavigationView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schema.android.com/apk/res/res-auto"
     android:id="@+id/navigation"
     android:layout_width="match_parent"
     android:layout_height="56dp"
     android:layout_gravity="start"
     app:menu="@menu/my_navigation_items" />

Answer 3

I've sligthly edited @Wirling answer to match Android Studio 4.2 Canary 16.

You just have to define your active/inactive colors under the color folder, for example bottom_nav_item.color.xml

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

Then, in your BottomNavigationView just use previous created selector like this

    <?xml version="1.0" encoding="utf-8"?>        
    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:itemIconTint="@color/bottom_nav_item_color"
    app:itemTextColor="@color/bottom_nav_item_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_menu" />

So its super simple. You have to create your selector in new .xml file and then use it for your BottomNavigationView in

 app:itemIconTint="@color/bottom_nav_item_color"
 app:itemTextColor="@color/bottom_nav_item_color"

Answer 4

Bottom Navigation select text and icon Color first bottom navigation home layout activity

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/colorAccent"
    android:theme="@style/ThemeOverlay.BottomNavView"
    app:itemIconTint="@drawable/icon_color_selector"
    app:itemTextColor="@drawable/selector"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/home_menu">

</com.google.android.material.bottomnavigation.BottomNavigationView>

then selector file create in drawable item_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/bottomBarItemColor" android:state_selected="true" />
<item android:color="@color/colorDivider" android:state_selected="false" />

then create text selected color xml file in drawable text_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_selected="true" />
<item android:color="@color/colorDivider" android:state_selected="false" />

then add style on theme xml

<style name="ThemeOverlay.BottomNavView" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorWhite</item>
    <item name="colorOnSurface">@color/colorDivider</item>
    <item name="android:textColorSecondary">@color/colorDivider</item>
</style>

then create home menu xml file in res directory

home_menu.xml add in menu directory

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/nav_live_date"
    android:icon="@drawable/icon_selector"
    android:title="Live Data"
    android:enabled="true"/>
<item
    android:id="@+id/nav_house_details"
    android:icon="@drawable/icon_selector"
    android:title="House Details"
    android:enabled="true"/>
<item
    android:id="@+id/nav_attendance"
    android:icon="@drawable/icon_selector"
    android:title="Attendance"
    android:enabled="true"/>
<item
    android:id="@+id/nav_emp_details"
    android:icon="@drawable/icon_selector"
    android:title="Emp Details"
    android:enabled="true"/>

End Thank you so much