Blur in Jetpack Compose

Question

How can I blur a background or create a Blur Overlay in Jetpack Compose? There is no documentation or resources whatsoever addressing this topic. Simply said: I'm looking to implement something like this natively in Jetpack Compose

Answer 1

In Jetpack Compose:1.1.0-alpha03, you can use:

Modifier.blur(30.dp)

but is only supported on Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored.

Reference: Modifier.blur

Answer 2

For earlier versions than API 12 you still can use RenderScript (deprecated) or RenderScript Intrinsics Replacement Toolkit. For the first way:

val bitmap = BitmapFactory.decodeResource(
    LocalContext.current.resources,
    R.drawable.your_image
)
val rs = RenderScript.create(LocalContext.current)
val bitmapAlloc = Allocation.createFromBitmap(rs, bitmap)
ScriptIntrinsicBlur.create(rs, bitmapAlloc.element).apply {
    setRadius(BLUR_RADIUS)
    setInput(bitmapAlloc)
    forEach(bitmapAlloc)
}
bitmapAlloc.copyTo(bitmap)
rs.destroy()

For the second you have to add renderscript-toolkit module to your project (look here) and then use:

val bitmap = BitmapFactory.decodeResource(
    LocalContext.current.resources,
    R.drawable.your_image
).let { Toolkit.blur(it, BLUR_RADIUS) }

Finally you can show blurred bitmap like this:

Image(
    bitmap = bitmap.asImageBitmap(),
    "some description"
)