Draw shape over Text with Modifier in Jetpack Compose

Question

I am trying to obfuscate some text with Jetpack Compose. Obviously, the blur modifier works wonders for this use case if you have Android 12.

My alternative for devices running a lower API version would be to simply draw a rectangle with a black colour over the text. I assumed this would be relatively easy with existing modifiers like graphicsLayer or drawBehind but I haven't been able to figure it out and I'm at a loss for ideas right now...

My current text composable looks like this:

Text(
    modifier = if (blurText) {
        Modifier.blur(16.dp, BlurredEdgeTreatment.Unbounded)
    } else {
        Modifier
    },
    text = textToObfuscate,
    fontFamily = latoFontFamily,
    fontWeight = FontWeight.W700,
    fontSize = 16.sp,
    color = black,
)

I could wrap the text in a Box and have another Box inside it to draw over the Text but that just seems useless and more work than should be necessary.

If anyone has any ideas on how to achieve this simply using a Modifier extension, that would be amazing!

Answer 1

You can use Modifier.drawWithContent as

Text(
    modifier = if (blurText) {
        Modifier.blur(16.dp, BlurredEdgeTreatment.Unbounded)
    } else {
        Modifier.drawWithContent {
            drawContent()
            drawRect(Color.Black)
        }
    },
    text = "textToObfuscate",
    fontWeight = FontWeight.W700,
    fontSize = 16.sp,
)