CODEWITHSUNDEEP
androidandroid-color
user9391470
user9391470

Reputation:

How to set different colors for bottom navigation icons/text in Android

I am working in an Android app ,In this I have Bottom Navigation activity . Bottom navigation contains 3 icons Home ,Reminders,settings. And 3 fragments like Home Fragments,Reminder Fragments,Settings Fragments.

What I need to do is By default when I open the app I want to set a color for Home Icon and text(icon color and text color should be different for selected item),and If I selected other tabs from bottom navigation I want to change the color of the selected tab .

I have tried the following

res/color/bnv_tab_item_foreground.xml

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

values/colors.xml

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="selected">#25EB13</color>
    <color name="not_selected">#EB1347</color>

</resources>

activity_main.xml

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground" />

The above code id not working for me.Please help me to solve this issue.

Upvotes: 2

Views: 6855

Answers (2)

Khemraj Sharma
Khemraj Sharma

Reputation: 58974

It's Easy! You can make drawable & color selectors. See how:

1 : Make drawable selector

res/ drawable/ drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorAccent" android:state_checked="true" /> // you can take drawable too. 
    <item android:drawable="@color/colorAccentDark" />
</selector>

2. Make color selector

res/ color/ color_selector.xml 

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

Now use both selectors in XML.

<android.support.design.widget.BottomNavigationView
    ...
    app:itemBackground="@drawable/drawable_selector" // set background
    app:itemIconTint="@color/color_selector" // set icon tint/color
    app:itemTextColor="@color/color_selector" // set text color
    app:menu="@menu/home_bottom_menu"
    ... />

Upvotes: 8

Suleyman
Suleyman

Reputation: 2943

In your selector, in your second item, try adding android:state_checked="false" :

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

Upvotes: 3

Related Questions