[FIXED] Android Compose: How to combine tint DstOver with tint SrcIn on Image

Issue

In compose, I have an Image which can be either

1. not tinted
2. tinted with a color on top
3. have a background tint

src="https://i.stack.imgur.com/mliQSs.png" alt="enter image description here" />

I know how to do each of the state, what I don't know is how to combine 2+3 together: Have the background green color and the tint purple color.

My code (just the image), I omitted the label:

@Preview
@Composable
private fun imageWithTint(){
    Image(
        painterResource(id = R.drawable.oval),
        contentDescription = "tint",
        modifier = Modifier.size(30.dp).clip(CircleShape),
        colorFilter = getColorFilter(Color.Green, Color.Blue)
    )
}

private fun getColorFilter(backgroundIconColor: Color?, selectionColor: Color): ColorFilter {
    // todo couldn't apply selectionColor together with backgroundIconColor, so gave backgroundIconColor priority
    return when {
        backgroundIconColor != null -> {
            ColorFilter.tint(backgroundIconColor, blendMode = BlendMode.DstOver)
        }
        else -> ColorFilter.tint(selectionColor, blendMode = BlendMode.SrcIn)
    }
}

Solution

You can create a backgroud color with a shape using Modifier.background(color, shape)

Image(
  painter = painterResource(id = R.drawable.ic_baseline_check_circle_outline_24),
  contentDescription = null,
  modifier = Modifier.background(Color.Green, CircleShape).size(30.dp),
  colorFilter = ColorFilter.tint(Color.Magenta)
)

This will create a green circle background with magenta tint

Answered By - Thracian
Answer Checked By - Willingham (JavaFixing Volunteer)