android-jetpack-composeandroid-vectordrawable

How to set tint mode and tint color for compose vector icons programtically


I had some vector icons that were converted from SVG and I need to customize the tint colors for them based on some conditions, I'm trying to change the tint color programmatically

Image(
        modifier = Modifier.size(128.dp),
        painter = painterResource(id = R.drawable.icon_1),
        contentDescription = null,
        colorFilter =  ColorFilter.tint(Color.Red)
    )

it gave me the following result

result

also, When I tried to do it by using

Image(
    modifier = Modifier.size(128.dp),
    painter = painterResource(id = R.drawable.icon_1),
    contentDescription = null,
    colorFilter =  ColorFilter.tint(Color.Red, blendMode = BlendMode.Multiply)
)

I got the same result as well. but, when I tried to change the icon tint from the XML file by adding

android:tint="@color/red"
android:tintMode="multiply"

it gave me the desired result correctly like the following

enter image description here

So how can I achieve the same result programmatically as I need to change the color programmatically to different colors based on some conditions?


Solution

  • I was able to fix it by using blendMode = BlendMode.Modulate

        Image(
            modifier = Modifier.size(128.dp),
            painter = painterResource(id = resultType.resId),
            contentDescription = null,
            colorFilter = ColorFilter.tint(color = Color.Red, blendMode = BlendMode.Modulate) }
        )