How to show Image in black and white in android compose

Question

I am trying to convert the colored Image shown to black and white using android compose.

In the view system, I could change the image from colored to black and white by adding a filter like that

imageView.colorFilter = ColorMatrixColorFilter(ColorMatrix().apply { setSaturation(0f)})

as shown in this answer.

In Android Compose the Image composable function already takes color filter but I cannot find ColorMatrixColorFilter equivalent in the compose package.

Here is the Image code that I want to convert to grayscale

 Image(
            asset = vectorResource(id = R.drawable.xxx),
            modifier = Modifier.clip(RectangleShape).size(36.dp, 26.dp),
            alpha = alpha,
            alignment = Alignment.Center,
            contentScale = ContentScale.Fit
        )

Answer 1

I hope I have not misunderstood the problem but this helped me convert the image into grayscale. This is as per the current Compose version 1.0.0-beta01

val grayScaleMatrix = ColorMatrix(
        floatArrayOf(
            0.33f, 0.33f, 0.33f, 0f, 0f,
            0.33f, 0.33f, 0.33f, 0f, 0f,
            0.33f, 0.33f, 0.33f, 0f, 0f,
            0f, 0f, 0f, 1f, 0f
        )
    )
Image(
        painter = painterResource(id = imageId),
        contentDescription = "",
        colorFilter = ColorFilter.colorMatrix(matrix)
    )