```.graphicsLayer( renderEffect = BlurEffect(400f, 356f, TileMode.Decal) )``` Is there any other w...

# compose

[Nthily]

.graphicsLayer(
  renderEffect = BlurEffect(400f, 356f, TileMode.Decal)
)

Is there any other way to use TileMode.Decal to achieve the blur effect on Android 12 and below? 🤔

[Sergey Y.]

No, unfortunately, it's not possible to achieve blur effects out of the box on Android versions prior to Android 12. Blur is a hardware-accelerated feature that was introduced in Android 12, regardless of the tiling mode being used.

[Nthily]

I was just searching for Blur related stuff on slack and came across a real time blur compose library you made, it looks great!

[Sergey Y.]

I did? 🙂

[pavi2410]

Could you share a link to that library?

[Nthily]

yes this one
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1715695041982569?thread_ts=1715677194.944999&cid=CJLTWPH7S
but it still under development 😀

[Sergey Y.]

hah, that one, it not a library yet, more like POC

[Sergey Y.]

of blurring capabilities when it is done right(not on CPU)

[Nthily]

👍 but anyway, it looks really awesome!

[Sergey Y.]

this Nexus 5(2013) running live GPU-accelerated blur. It's actually working, and the device stays just a bit warm. Keep in mind, the algorithm hasn't been optimized yet, so there's room for even more improvement.
Now, don't get me wrong, I'm not saying this would work flawlessly on every low-budget device out there today. But for the vast majority of modern phones, this level of performance should be totally achievable. Compared to the slower software blurring in other libraries, this approach offers a significant performance boost.

Screen_recording_20240515_010759.mp4

[Sergey Y.]

Of course, there are a few drawbacks, and getting the blur just right is tricky. I'm still fiddling with the blur to get it looking just right.

[Sergey Y.]

I'm planning to make the repo public soon, but I need to clean up the code a bit first - it's a bit of a mess right now! 😅
I'll try my best to package it up as a library, but no promises on that front. And no deadlines either.

[Sergey Y.]

I tried to stay on the hardware path as much as possible, drawing the UI directly into the texture using the new `GraphicsLayer API`(Huge thanks to @Nader Jawad and @romainguy for all their help and inspiration!).

The blur shader itself is a straightforward two-pass algorithm I found on Shadertoy, but I plan to adapt the blurring shader from Flutter's Impeller engine (or at least try to). Color tinting, noise texture blending, and other effects are all done in shaders.
The final texture is visualized using TextureView, so there's no need to copy it into a bitmap or perform any other horrible operations like that.

Again, this is just a proof of concept that I worked on during nights after my day job, so it has some rough edges that need to be smoothed out. 🙂

I've said it before, and I'll say it again: I'm really impressed by the flexibility of Compose's UI system and how it blurs the lines between regular 2D UI and lower-level graphics programming. Many kudos to the Jetpack Compose team! ❤️

Where there's a will, there's a way.

[romainguy]

SurfaceView is more efficient. You could also use hardware bitmaps

[Sergey Y.]

Hey 🙂 Originally I used SurfaceView, but there is a bug https://issuetracker.google.com/issues/339049704

[Sergey Y.]

I tried HW Bitmaps but ultimately rejected them because they're API 26+ and Bitmap.wrapHardwareBuffer is API 29+, plus some other reason I can't recall at the moment.
My demo runs on Android 6 😊

[Sergey Y.]

Once the bug is fixed, I'll switch back to using SurfaceView, at least for Android 7 and above. If I recall correctly, that's when SurfaceView started being synchronized with the UI. For Android 6, I might just stick with TextureView for now.