I have an image that I want to render in various c...

# compose

[MarkRS]

I have an image that I want to render in various colours (according to state). Setting the colour filter on the image with ColorFilter.tint() seems to make no difference at all. How can I change the colour?
Unfortunately I can't use multiple images in different colours because I want the actual colour corresponding to a state to be set by the user.
The image is remarkably like my icon here, I just want the coloured part to change.

[Jonathan]

Did you apply the appropriate BlendMode?
https://developer.android.com/develop/ui/compose/graphics/images/customize#tint-image

[MarkRS]

I tried a few, and read that document and the one specifically about BlendMode. Using the suggestion of leaving it default (or specifying SrcIn) blanks out the colour completely. None of the others seemed particularly useful tbh since I don't want to modify the colour I want to set a specific colour. From the name I assumed Blendmode.Color would work, but that doesn't change the original colour, nor does Hue.

This is the same graphic which worked perfectly before I switched to compose. Perhaps I need to do something to the graphic itself?

[Alex Styl]

you need to be more specific Mark. what kind of image is this? svg/vector?

[MarkRS]

Thanks @Alex Styl, it's a png file.

[MarkRS]

Looks like I need to turn it into a monochrome png. It's not an icon so an svg isn't a good idea (?)

[Alex Styl]

why not? svg let you change things dynamically, so probably a good idea

[Alex Styl]

Here is the full code of Icon in Unstyled. It tints vectors nicely

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
) {
    val colorFilter = remember(tint) {
        if (tint == Color.Unspecified) null else ColorFilter.tint(tint)
    }
    Image(imageVector, contentDescription, modifier, colorFilter = colorFilter)
}

[Alex Styl]

what I do not remember though is how the vector fill color is. In CSS usually you need to specify that the fill color of the vector is currentColor and it will inherit it from the parent.

I think you need something similar in compose

[Alex Styl]

Ok found it. I think u need to pass fill = null. get any Compose vector from https://composeicons.com and it works out of the box with Icon()

[Jonathan]

I thought he said his image is a png

[Jonathan]

I imagine SVG wouldn’t be able to represent his image. Possible it’s rasterized image.

[Sergey Y.]

Besides images, you can apply color filters to the entire UI, for instance, to desaturate it or apply other types of color effects.
https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1742846298732499?thread_ts=1742845175.602779&cid=C04TPPEQKEJ

[Jonathan]

I can vouch for @Sergey Y. message. It works.

[MarkRS]

Yes, it's just I don't think that helps me.
What I'm doing is moving the image around the screen and changing its colour according to how fast it's moving. Nothing else should change.
Seems it doesn't look bad as an svg (I s'pose I didn't properly understand the format), so I'll give it a go like that.
Thanks all.

[Sergey Y.]

I don’t understand why you think it won’t work. From what you’ve described, you just need to regenerate the color matrix on the fly and apply this color filter matrix to your Image composable that displays the content.

[MarkRS]

My thought was the picture has too many not-straight lines, but that might be my misunderstanding of the format.
The svg conversion I now have isn't great but may be good enough.