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:

Answer 1

"@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.

Answer 2

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

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.