Android Studio中自定义橙色矢量图标显示为紫色的问题求助

问题原因 #

你的矢量图标本身设置了橙色，但Button显示为紫色，是因为Material Design风格的Button默认会对背景应用主题的colorPrimary着色（tint），这个着色会覆盖矢量图中定义的fillColor，你看到的紫色就是当前主题里colorPrimary的颜色。

解决方案 #

以下几种方法都可以解决这个问题：

方法1：关闭Button的背景着色 #

直接给Button添加android:backgroundTint="@null"（如果使用Material Components库的Button，可能需要用app:backgroundTint="@null"），让矢量图的原始颜色生效：

<Button
    android:id="@+id/add_button"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/add_circle"
    android:backgroundTint="@null" <!-- 关闭背景着色 -->
    android:textSize="18sp"
    android:gravity="center"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

方法2：改用ImageView实现图标按钮 #

如果这个按钮不需要显示文字，只是作为图标按钮使用，直接用ImageView替代Button，同时设置可点击和可聚焦：

<ImageView
    android:id="@+id/add_button"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/add_circle"
    android:clickable="true"
    android:focusable="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

之后在代码里给ImageView设置点击事件即可，效果和Button一致。

方法3：将矢量图作为Button的前景图标 #

如果需要保留Button的特性（比如点击波纹效果），可以把矢量图设置为Button的drawable，而不是背景：

<Button
    android:id="@+id/add_button"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:drawableTop="@drawable/add_circle" <!-- 或drawableLeft等，根据需求调整 -->
    android:text="" <!-- 清空文字 -->
    android:backgroundTint="@null" <!-- 可选：如果不需要Button默认背景颜色 -->
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

内容的提问来源于stack exchange，提问作者João Vitor Chivite