如何修改Android FloatingActionButton内Material图标的颜色?
修改FAB内Material Vector图标颜色的几种方法
嘿,针对你这个问题,我整理了几个常用且实用的解决方案,你可以根据自己的需求选择:
方法一:直接在FAB布局中添加tint属性(最简单快捷)
你可以直接在现有的FAB标签里加上app:tint属性,指定你想要的颜色——这个属性会直接给图标着色,完全不用修改Vector文件本身。
修改后的FAB代码如下:
<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/search" app:rippleColor="@color/primary" app:elevation="1dp" app:borderWidth="4dp" app:tint="@color/your_desired_color" /> <!-- 新增这一行 -->
这里的@color/your_desired_color是你在res/values/colors.xml里定义的颜色值,比如#FFFFFF或者项目中已有的颜色资源。
方法二:修改Vector Asset文件本身的颜色
如果你希望这个search图标在所有使用场景下都是统一的颜色,可以直接修改它的Vector源文件:
- 找到
res/drawable/search.xml(你用Vector Asset工具创建的那个文件) - 找到文件里的
<path>标签,把android:fillColor属性改成你需要的颜色,示例如下:
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:fillColor="@color/your_target_color" <!-- 修改这里的颜色 --> android:pathData="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </vector>
修改后,这个图标无论用在FAB还是其他控件中,都会显示你设置的颜色。
方法三:在代码中动态修改颜色(适合需要动态切换的场景)
如果需要根据页面状态或用户操作动态改变图标颜色(比如点击FAB后变色),可以在Activity/Fragment中通过代码实现:
Java版本
// 获取FAB实例 FloatingActionButton fab = findViewById(R.id.fab); // 设置图标颜色 fab.getDrawable().setColorFilter( ContextCompat.getColor(this, R.color.your_dynamic_color), PorterDuff.Mode.SRC_IN );
Kotlin版本
val fab = findViewById<FloatingActionButton>(R.id.fab) fab.drawable.setColorFilter( ContextCompat.getColor(this, R.color.your_dynamic_color), PorterDuff.Mode.SRC_IN )
注意要导入对应的类:androidx.core.content.ContextCompat和android.graphics.PorterDuff。
内容的提问来源于stack exchange,提问作者Sparker0i




