Blur in Jetpack Compose

user_5131883 0
Viewed 10159

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

android-jetpack-compose android
3 Answers

This is a feature that has been requested (implemented in Compose 1.1.0-alpha03 for android 12 and above only) and which you might want to star.
The idea would be to create a blur modifier that would look like this:

Modifier.blur(radius = 16.dp)
user_55137880

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

user_151868020

For earlier versions than API 31 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"
)
user_139988070
Related