Hi I’m trying to implement disabled state for a card component. It involves setting the entire component to grayscale with an alpha of 0.8f. The Figma layer shows blendMode as saturation. So I tried doing something like;

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

This does the job but the BlendMode.Saturation is available only API 29 and onwards. Is there any workaround to this please? (Attaching the screenshot for the component)

Hmm, this is interesting and I have no idea, pinging @Chris Sinco [G] 😅 as I’m curious myself

I think @romainguy would know more

With Views you can achieve this fairly easily by using a hardware layer and setting a

ColorMatrixColorFilter

on the layer’s paint to set saturation to 0. Compose does have a

ColorFilter

(https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/ColorFilter) but unfortunately it seems we don’t let

graphicsLayer

hold a color filter. We should fix this. @Nader Jawad Any thoughts?

There are quite a few similar APIs to accomplish similar goals. In the framework the most recent is RenderEffect which is Android 12+. For the sake of compose's RenderEffect API, we may end up back porting a few of these instances using ColorFilter on a Paint that is consumed on View's setLayerPaint API

@Nader Jawad but that fill filter the rect itself, not what’s underneath

That's right but this is also what the original sample code above is doing

No because the code above uses a blend mode so the desaturation affects what’s underneath

Another workaround in the meantime could be to reach into the native canvas and use a saveLayerPaint around the drawContent method invocation then restore afterwards

I was able to achieve a somewhat similar grayscale effect by using a colormatrix this article discusses how to preserve the whites in the source.

Modifier.drawWithCache {
  onDrawWithContent {
    val saturationMatrix = ColorMatrix(
      floatArrayOf(
        0.18f, 0.18f, 0.18f, 0f, 118f,
        0.18f, 0.18f, 0.18f, 0f, 118f,
        0.18f, 0.18f, 0.18f, 0f, 118f,
        0f, 0f, 0f, 0.8f, 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()
    }
  }
}

I'm not completely sure about this tho - thoughts on this approach please?

If you want to match the saturation blend mode, use https://developer.android.com/reference/android/graphics/ColorMatrix#setSaturation(float)

@romainguy thanks a ton for the help - can you briefly describe how did you come up with this matrix please? would like to know if this matrix should be derived from the color scale i'm trying to set the component to (for my case its #2D2E2E

0.213, 0.715, 0.072 are the luminance weights for the sRGB color space

makes sense - thanks a lot! 🙏