Set the entire component to GrayScale compose

Question

I'm trying to implement a disabled state for a custom component in compose. The disabled state involves having the entire component set to grayscale with an alpha of 0.8f. I tried drawing a rect on top of the component content with BlendMode.Saturation like so;

Surface(
 modifier = modifier.then(Modifier.drawWithCache {
  onDrawWithContent {
   drawContent()
   drawRect(backgroundColor, blendMode = BlendMode.Saturation)
  }
 }.graphicsLayer { alpha = 0.8f }

While this works perfectly fine, the only issue is BlendMode.Saturation is supported API 29 and above. How can I achieve the same behavior on API<29?

Attaching the component screenshot as reference.

Answer 1

Just to add something that could be nice for people that want to use this, following @Programmer123's answer and the official documentation for creating custom modifiers I did this:

fun Modifier.grayScale(): Modifier {
  val saturationMatrix = ColorMatrix().apply { setToSaturation(0f) }
  val saturationFilter = ColorFilter.colorMatrix(saturationMatrix)
  val paint = Paint().apply { colorFilter = saturationFilter }

  return drawWithCache {
    val canvasBounds = Rect(Offset.Zero, size)
    onDrawWithContent {
      drawIntoCanvas {
        it.saveLayer(canvasBounds, paint)
        drawContent()
        it.restore()
      }
    }
  }
}

I think it is very readable and reusable, you can simply use it as

    Column(
        modifier = Modifier
            .padding(6.dp)
            .grayScale()
    )

Answer 2

Building on top of @Nikola's answer this is what worked for me.

onDrawWithContent {
      val saturationMatrix = ColorMatrix().apply { setToSaturation(0f) }

      val saturationFilter = ColorFilter.colorMatrix(saturationMatrix)
      val paint = Paint().apply {
        colorFilter = saturationFilter
      }
      drawIntoCanvas { canvas ->
        canvas.saveLayer(Rect(0f, 0f, size.width, size.height), paint)
        drawContent()
        canvas.restore()
      }
    }