You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何修改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源文件:

  1. 找到res/drawable/search.xml(你用Vector Asset工具创建的那个文件)
  2. 找到文件里的<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.ContextCompatandroid.graphics.PorterDuff


内容的提问来源于stack exchange,提问作者Sparker0i

火山引擎 最新活动