如何为ImageButton的Vector Asset资源设置黑色着色？

我有一个全局通用的白色关闭按钮Vector资源，不能直接修改其fillColor，现在需要将它显示为黑色，要求基于原白色资源通过着色实现。该资源作为ImageButton的src使用，尝试app:backgroundTint="@color/black"会让整个按钮背景变黑，达不到仅按钮图标变黑的效果，求可行方案。

原Vector资源代码 #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M13.414,12L19.778,18.364L18.364,19.778L12,13.414L5.636,19.778L4.222,18.364L10.586,12L4.222,5.636L5.636,4.222L12,10.586L18.364,4.222L19.778,5.636L13.414,12Z"
      android:fillColor="#ffffff"
      android:fillType="evenOdd"/>
</vector>

可行解决方案 #

方案1：使用app:tint属性（最简单，推荐） #

backgroundTint作用于按钮背景，app:tint才是给android:src指定的Drawable着色。直接在ImageButton中添加该属性即可：

修改后的ImageButton代码：

<ImageButton
    android:id="@+id/btn_exit"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_marginTop="12dp"
    android:layout_marginStart="12dp"
    android:adjustViewBounds="true"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:contentDescription="@string/cd_exit"
    android:scaleType="fitCenter"
    android:src="@drawable/stim_viewer_btn_close"
    app:tint="@color/black"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

方案2：代码中动态设置ColorFilter #

如果需要根据逻辑动态切换颜色，可在代码中给ImageButton的Drawable设置ColorFilter：

// Kotlin示例
btn_exit.drawable.setColorFilter(ContextCompat.getColor(this, R.color.black), PorterDuff.Mode.SRC_IN)

// Java示例
btn_exit.getDrawable().setColorFilter(ContextCompat.getColor(this, R.color.black), PorterDuff.Mode.SRC_IN);

方案3：创建带tint的Drawable资源（复用着色后的图标） #

如果需要在多个地方复用黑色版本的按钮，可创建一个新的Drawable XML文件（比如ic_close_black.xml），给原Vector资源设置tint：

<?xml version="1.0" encoding="utf-8"?>
<drawable xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/stim_viewer_btn_close"
    android:tint="@color/black"/>

之后直接将这个新资源作为ImageButton的src即可。

波纹效果适配建议 #

如果使用自定义波纹Drawable，注意图标与波纹的对比度。按钮图标改为黑色后，可将波纹颜色调整为灰色（避免白色波纹在浅色背景下不明显），同时将波纹的背景设为透明，避免遮挡图标：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey">
  <item>
    <shape android:shape="oval">
      <solid android:color="@android:color/transparent" />
    </shape>
  </item>
  <item
      android:bottom="4dp"
      android:drawable="@drawable/stim_viewer_btn_close"
      android:left="4dp"
      android:right="4dp"
      android:top="4dp" />
</ripple>

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