如何在Android FAB中保留Drawable特定路径的默认颜色不受tint影响
解决方案
方案1:拆分矢量图为层列表(兼容性最好,支持API 21及以上)
该方案不需要修改全局主题,可精准控制需要受tint影响的部分:
- 拆分原有矢量资源为两个独立矢量文件
ic_compass_base.xml:保留除红色指针之外的所有path代码,这部分可正常接受tint颜色ic_compass_red_pointer.xml:仅保留你需要固定为红色的path代码,不受tint影响
<!-- ic_compass_red_pointer.xml 示例 --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="20dp" android:height="20dp" android:viewportWidth="20" android:viewportHeight="20"> <path android:fillAlpha="1.0" android:fillColor="@color/red" android:pathData="M11.7326,9.4789L10.0025,3.3857L8.2723,9.4789L11.7326,9.4789Z" /> </vector>
- 创建层列表drawable
ic_compass_final.xml,组合两个矢量图层:
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/base_layer" android:drawable="@drawable/ic_compass_base"/> <item android:drawable="@drawable/ic_compass_red_pointer"/> </layer-list>
- 布局中给FAB设置该层列表为图标,并且关闭FAB默认的全局tint:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_compass_final" app:tint="@null" />
- 代码中仅给基础图层设置需要的tint颜色,不会影响红色指针层:
// Kotlin 示例 val layerDrawable = fab.drawable as LayerDrawable DrawableCompat.setTint( layerDrawable.findDrawableByLayerId(R.id.base_layer), ContextCompat.getColor(this, R.color.your_expected_tint_color) )
// Java 示例 LayerDrawable layerDrawable = (LayerDrawable) fab.getDrawable(); DrawableCompat.setTint( layerDrawable.findDrawableByLayerId(R.id.base_layer), ContextCompat.getColor(this, R.color.your_expected_tint_color) );
方案2:使用tintMode属性(适合API 24及以上)
如果你的应用最小支持版本为API 24,可以直接在原矢量图的红色path节点添加tint和tintMode属性,强制使用path自身的颜色,忽略上层全局tint:
<path android:fillAlpha="1.0" android:fillColor="@color/red" android:tint="@color/red" android:tintMode="src" android:pathData="M11.7326,9.4789L10.0025,3.3857L8.2723,9.4789L11.7326,9.4789Z" />
tintMode="src"属性会强制优先使用当前path设置的tint颜色,不会和上层Drawable的全局tint混合。
内容的提问来源于stack exchange,提问作者user14576370
相关产品推荐
相关产品推荐

