Search code examples
androidandroid-jetpack-composeandroid-jetpackandroid-compose-image

How to correctly apply tint to compose Image?

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:

visa

What I am trying to display is: b and w visa

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: gray visa

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. :(

Solution

  • 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.