Icon in png for bottom navigation bar android

Question

In My Bottom navigation bar, I am using an icon in the menu XML, the icon color changed with the theme color when selected.

after the tab click the icon totally change I am totally stuck why this happens with the png image.

Bottom navigation

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/white"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@color/transparent"
        app:itemTextColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_navigation_main" />

Selector

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_compas"
        android:state_checked="false"/>
    <item android:drawable="@drawable/discover_green"
        android:state_enabled="true"/>
</selector>

Bottom_nav_menu

 <?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/chatMenuFragment"
            android:enabled="true"enter code here
            android:icon="@drawable/chat_selector"
            android:title="Chat"
            app:showAsAction="always" />
        <item
            android:id="@+id/contactsFragment"
            android:enabled="true"
            android:icon="@drawable/people_selector"
            android:title="People"
            app:showAsAction="always" />
        <item
            android:id="@+id/discoverFragment"
            android:enabled="true"
            android:icon="@drawable/discover_selector"
            android:title="Discovery"
            android:backgroundTint="@color/white"
            app:showAsAction="always|withText" />
        <item
            android:id="@+id/myProfileFragment"
            android:enabled="true"
            android:icon="@drawable/user_selector"
            android:title="My"
            app:showAsAction="always|withText" />
    </menu>

screenshots

Before selection:

After selection:

Mourn

what is your discover_green drawable? – Torchwood

I can't see yours screenshot, same with link. can you reupload it ? – Fimbriate

before selected i.sstatic.net/cbmEU.png After i.sstatic.net/m3gLo.png – Mourn

Please show your disabled and enabled compass icons. I'm almost sure that white space inside the compass is white but not a transparent. – Easily

ic_compass ibb.co/SnjFvWs discover_green ibb.co/ns8N58H – Mourn

Ou. Thats make sense. – Easily

Answer 1

I ran into a similar issue, the problem is that by default the bottom navigation view adds a tint to the drawables and fills everything that is not transparent (like the case of your assets).

try adding this line bottomNavigationView.itemIconTintList = null

Manchester

Answer 2

"@drawable/discover_green" check this drawble , is it what you you're getting after pressing the compass ?

you're using a state list drawable so when you press compass the icon changes to discover_green, it is same as you defined. The solution is the completely delete the state list drawble and use just the icon or changed the green dot icon to something you want to use.

Peaslee

before selected i.sstatic.net/cbmEU.png After i.sstatic.net/m3gLo.png thanku for reply . these screenshot help u to find my problem – Mourn

is there any way that icon design will not change in bottom navigation . it uses it own theme color in my icon ,thats why icon totally changed – Mourn

the icon which it changes after pressing is defined by you in the xml resource it is not doing it on it own , you can simple not use state list drawble to get rid of it. – Peaslee

Answer 3

The problem is that selected state apply color filter for whole not transparent part of icon. To fix your selected icon you have to make arrows on green circle transparent not white. Ask designer for change it or do it in some editor by your own.

Easily

Answer 4

Your problem arises from the fact that discover_green.png file has no transparent area. So when the menu item is selected the green tint is applied to the whole image hence you see a green circle.

However in ic_compas.png everything except the compas is transparent, Meaning if you use it as icon the compas in image will turn green when selected. For this you will have to modify the Discovery menu item as

       <item
        android:id="@+id/discoverFragment"
        android:enabled="true"
        android:icon="@drawable/ic_compas"
        android:title="Discovery"
        app:showAsAction="always|withText" />

This will give you a grey compas if item is not selected and a green compas when selected.

Indophenol

Answer 5

You have to create color icon and simple icon both and at selection time you have to change icon form plain to color and on not select time you have to change color icon to plain icon this is the simplest way to do that.

Accusal

Answer 6

You can delete the white filter on the drawable item (png or vector) with this code (but you cant colour the icons on touch):

bottomNavigationView.itemIconTintList = null

Jedthus