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?

score 97 · Answer 1 · edited Mar 18 '19 at 07:46

97

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

edited Mar 18 '19 at 07:46

Abhishek kumar

4,347
8
29
44

answered Feb 20 '17 at 01:37

chrisli

1,161
8
12

9

@color/bottom_nav_icon_color_selector is not correct. this file is drawable! – BoshRa Aug 07 '17 at 12:15
8

@BoshRa put it in `res/color` instead of `res/drawable` then you'll be able to reference it with `@color/bottom_nav_icon_color_selector` – arekolek Oct 10 '17 at 15:22
1

should be accepted as the answer. i have spent hours trying to get this working, and this solution is the first xml solution that has worked for me. – moatist Jan 11 '18 at 04:53
This is not working, the inactive can't be seen for me – shurrok Apr 27 '18 at 13:06
This does not work either for me... android has some many issues with themes. They never got it right and now its a hodge-podge of values depending on material design lib or appcompat...ugh. I spend more time trying to fix little things like this coloring the F'ing icons in a bottomNavBar – JPM Jan 09 '23 at 18:40

score 10 · Answer 2 · answered Jun 22 '20 at 13:48

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

I love the abstraction theming offers. – Azizjon Kholmatov May 27 '21 at 07:02 — Azizjon Kholmatov, May 27 '21 at 07:02

score 3 · Answer 3 · answered Mar 26 '21 at 20:10

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"

score 1 · Answer 4 · answered Jun 02 '22 at 07:59

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

Prat137 · Answer 5 · 2021-08-03T06:44:46.547

<!-- Base application theme. -->
<style name="Theme.RunnerApp" 

parent="Theme.MaterialComponents.DayNight.NoActionBar">
    
<!-- Primary brand color. -->

<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item  
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item> 
<item name="colorSecondaryVariant">@color/teal_700</item> 
<item name="colorOnSecondary">@color/white</item>

<!-- Status bar color. --> 
<item name="android:statusBarColor" tools:targetApi="l">? 
attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>

In most of the case...developer change there theme to NoActionBar But instead of Theme.MaterialComponents.DayNight.NoActionBar They change it into Theme.AppCompat.DayNight.NoActionBar That causes all these colour issues

Navigation component use material design so keep this point in mind

score -3 · Answer 6 · edited Jul 26 '18 at 05:35

-3

Try below code. Hope its helpful!!!

mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.setItems(R.menu.bottombar_menu);
        mBottomBar.getBar().setBackgroundResource(R.color.navigationColor);
        mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {

edited Jul 26 '18 at 05:35

Lokesh

3,247
2
33
62

answered Jul 26 '18 at 03:09

imam subekti

1

7

Try adding some context to your code to help future readers better understand its meaning. – Grant Miller Jul 26 '18 at 03:25

How to change inactive color on bottom navigation?

6 Answers6