如何设置FloatingActionButton图标tint仅作用描边不填充内部

解决方案 #

核心问题原因 #

你当前使用的官方心形矢量图为填充类型图形，给整个drawable设置tint时会将路径的填充区域整体染色，导致原本的空心视觉效果变成实心。要实现仅描边染色、内部空心的效果，需要修改矢量图的绘制属性，切换为描边绘制模式。

具体修改步骤 #

1. 修改心形矢量图配置
   将现有矢量图代码替换为如下内容，核心是关闭填充、开启描边：

<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="@android:color/transparent"
      android:strokeColor="@android:color/white"
      android:strokeWidth="1.5"
      android:pathData="M16.5,3c-1.74,0 -3.41,0.81 -4.5,2.09C10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2,8.5c0,3.78 3.4,6.86 8.55,11.54L12,21.35l1.45,-1.32C18.6,15.36 22,12.28 22,8.5 22,5.42 19.58,3 16.5,3zM12.1,18.55l-0.1,0.1 -0.1,-0.1C7.14,14.24 4,11.39 4,8.5 4,6.5 5.5,5 7.5,5c1.54,0 3.04,0.99 3.57,2.36h1.87C13.46,5.99 14.96,5 16.5,5c2,0 3.5,1.5 3.5,3.5 0,2.89 -3.14,5.74 -7.9,10.05z"/>
</vector>

修改说明：

• 移除了矢量图根节点自带的android:tint属性，避免和FAB设置的tint冲突
• 将path的fillColor设为透明，关闭填充效果
• 新增strokeColor设置描边基础色，新增strokeWidth调整描边粗细，可根据视觉需求调整strokeWidth的数值修改边框粗细

2. 原有FAB配置无需改动
   你之前给FAB设置的android:tint="@color/yellow"属性会自动将矢量图的描边区域染为黄色，填充区域保持透明，刚好实现预期的空心描边效果。

备选方案（无需修改原生矢量图） #

如果不想改动官方原生矢量文件，也可以通过图层列表实现：创建一个新的drawable文件，叠加两个心形图标，下层是稍大的黄色心形，上层是和FAB背景同色的稍小心形，模拟空心效果。不过修改矢量图的方案性能更高、实现更简洁。

内容的提问来源于stack exchange，提问作者SmallGrammer