CODEWITHSUNDEEP
androidbottomnavigationview
Micer
Micer

Reputation: 8969

Android BottomNavigationView tint icon color

I'm using BottomNavigationViewand I've set colors like this:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="@dimen/bottom_navigation_height"
    app:itemBackground="@color/white"
    app:itemIconTint="@color/bottom_bar_item_selector"
    app:itemTextColor="@color/bottom_bar_item_selector"
    app:menu="@menu/bottom_navigation_main" />

@color/bottom_bar_item_selector: 

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

BottomNavigationBar

The problem is, that my @color/colorPrimary is #C4071A, but final selected item color is lighter (#E65A6E). The difference is visible on the screenshot - icon color is lighter then the text color. Is there a way how to use exactly same color?

@menu/bottom_navigation_main:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/bottom_bar_item_one"
        android:icon="@drawable/ic_1"
        android:title="item1"
        app:showAsAction="ifRoom"
        android:enabled="true" />
    <item
        android:id="@+id/bottom_bar_item_two"
        android:icon="@drawable/ic_2"
        android:title="item2"
        app:showAsAction="ifRoom"
        android:enabled="true" />
    <item
        android:id="@+id/bottom_bar_item_three"
        android:icon="@drawable/ic_3"
        android:title="item3"
        app:showAsAction="ifRoom"
        android:enabled="true" />
    <item
        android:id="@+id/bottom_bar_item_four"
        android:icon="@drawable/ic_4"
        android:title="item4"
        app:showAsAction="ifRoom"
        android:enabled="true" />
    <item
        android:id="@+id/bottom_bar_item_five"
        android:icon="@drawable/ic_5"
        android:title="item5"
        app:showAsAction="ifRoom"
        android:enabled="true" />
</menu>

Note I'm using Xamarin, but since I'm using native BottomNavigationView I wouldn't expect any difference.

Upvotes: 2

Views: 6924

Answers (1)

Oğuzhan D&#246;ng&#252;l
Oğuzhan D&#246;ng&#252;l

Reputation: 7936

Your png files seems to have an alpha channel/transparency

I checked your both checked and uncheck states of icons.

Your grey colored icons also have the same problem as red ones. If you open these png files with Adobe Photoshop etc, you can see that channel by adding solid white colored layer under the icon (if the alpha cannel is active).

enter image description here

Upvotes: 7

Related Questions