安卓底部导航栏的png格式图标

Question

在我的底部导航栏中，我在菜单XML中使用了一个图标，当选择时图标颜色会随着主题颜色改变。

点击选项卡后，图标完全改变，我不知道为什么PNG图片会出现这种情况。 底部导航栏

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

选择器

<?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>

底部导航菜单

 <?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>

截图

选定前：

选定后：

- Mubarak Ali

---

你的 discover_green drawable 是什么？ - GianhTran

我看不到你的截图，链接也是一样。你能重新上传吗？ - Aqua Freshka

选定前https://i.stack.imgur.com/cbmEU.png选定后https://i.stack.imgur.com/m3gLo.png - Mubarak Ali

请展示您的禁用和启用指南针图标。我几乎确定指南针内部的白色空间是白色的，而不是透明的。 - Eugene Troyanskii

ic_compass https://ibb.co/SnjFvWsdiscover_green https://ibb.co/ns8N58H - Mubarak Ali

哦，那很有道理。 - Eugene Troyanskii

Answer 1

我遇到了类似的问题，问题在于默认情况下底部导航视图会给可绘制对象添加色彩并填充所有不透明区域（就像您的资源案例一样）。

尝试添加以下这行代码： bottomNavigationView.itemIconTintList = null

- Daniel Loaiza

Answer 2

"@drawable/discover_green" 检查一下这个 drawable，是否是在按指南针后得到的图标？

你正在使用一个状态列表 drawable，所以当你按下指南针时，图标会改变为 discover_green，就像你定义的那样。 解决方案是完全删除状态列表 drawable，并只使用图标或将绿点图标更改为你想要使用的内容。

- Abhinav Chauhan

---

感谢您的回复。这些截图可以帮助您找到我的问题。 - Mubarak Ali

有没有办法使底部导航栏中的图标设计不改变。我的图标使用自己的主题颜色，这就是为什么图标完全改变了的原因。 - Mubarak Ali

更改后的图标是由您在XML资源中定义的，它不会自动更改，您可以简单地不使用状态列表绘制来摆脱它。 - Abhinav Chauhan

Answer 3

问题在于所选状态会对图标的整个不透明部分应用颜色过滤器。要修复您选择的图标，您需要使绿色圆圈上的箭头变为透明而不是白色。请请求设计师进行更改或自己在某个编辑器中进行更改。

- Eugene Troyanskii

Answer 4

你需要创建彩色图标和简单图标，当选择时，你需要将图标从简单变为彩色；在未选择时，你需要将彩色图标变为简单图标。这是最简单的方法。

- Viral Rami

Answer 5

你的问题源于discover_green.png文件没有透明区域。因此，当选择菜单项时，绿色色调会应用于整个图像，因此您会看到一个绿色圆圈。

然而，在ic_compas.png中，除了指南针之外的所有内容都是透明的，这意味着如果将其用作icon，则图像中的指南针在选中时将变为绿色。为此，您需要修改Discovery menu item。

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

如果未选中该项，则会显示灰色指南针，而选中后则会显示绿色指南针。

- mightyWOZ

Answer 6

你可以使用这段代码删除可绘制项（png或矢量图）上的白色过滤器（但无法在触摸时着色图标）：

bottomNavigationView.itemIconTintList = null

- Burak Cem Dursun