How to correctly apply tint to compose Image?

Question

Image(
      painter = painterResource(id = paymentCardLogoId),
      contentDescription = null,
      modifier = Modifier.size(logoSize)
     )

So I have a payment card details view and I am trying to display the colored payment card logo which is a drawable but I need to display it as black and white. Above is my initial code which displays colored logo:

What I am trying to display is:

When I tried adding colorFilter of ColorFilter.color(Color.Black), it just simply came out to be a black rectangle.

I also tried using colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) which gave me:

So is there any way I can get the text "Visa" to be black and the background as white? There are bunch of blendMode that can be used but I couldn't find the right one or I am missing something. :(

Answer 1

You can try Icon composable instead of Image as shown in the example:

Icon(
    painter = painterResource(id = paymentCardLogoId),
    contentDescription = null,
    tint = Color.Black
)

If this is also not working then you might have to change your image and use image of type .xml, .svg, etc because specifications change will be easy for them.