Android Vector xml file - is it possible fix the color without being affected by tint in Jetpack Compose?

Question

I have this vector drawable. ic_check.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:fillColor="#2D3296"
        android:pathData="M10,0C4.48,0 0,4.48 0,10C0,15.52 4.48,20 10,20C15.52,20 20,15.52 20,10C20,4.48 15.52,0 10,0ZM8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />
</vector>

In Jetpack Compose, I use Icon and and tint

Icon(
    imageVector = ImageVector.vectorResource(R.drawable.ic_check),
    contentDescription = null,
    modifier = Modifier
        .size(20.dp),
    tint = Color.Red,
)

But it changes all path colors:

What I want is the white tick and the tint background. I am wondering if there is a way I can fix the tick color to be white, and only change the background color? The tick is the second path in the xml. I have looked attributes I cannot see anything. Another solution is make it transparent, but then it will be affected by the layout's background color.

Answer 1

The answer is technically no, but there's a pretty easy workaround. You definitely can't selectively tint only a part of the vector drawable.

But what you can do instead is separate your icon into 2 items - the background circle, and the foreground check mark. You can then wrap them both inside a Box container, and display the checkmark icon on top of the background icon, and only tint the background icon.

Box(){
    Icon(
        imageVector = ImageVector.vectorResource(R.drawable.ic_background),
        tint = Color.Red,
        ...
    )
    Icon(
        imageVector = ImageVector.vectorResource(R.drawable.ic_check),
        .....
    )
}

Answer 2

Remove the circle path in your vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="20"
    >
    <path
        android:fillColor="#ffffff"
        android:pathData="M8,15L3,10L4.41,8.59L8,12.17L15.59,4.58L17,6L8,15Z" />

</vector>

And then use the tint the background modifier to apply a circle red background and the tint attribute to tint the tick.

Icon(
    painterResource(id = R.drawable.vector2),
    contentDescription = null,
    modifier = Modifier.size(20.dp).background(Red, CircleShape),
    tint = White
)