Glassmorphism in Jetpack Compose
Create beautiful Android UIs
If you google “Glassmorphism” you would see a lot of articles on creating glassmorphic UI designs which is basically a panel that blurs the background behind it. It’s becoming a huge trend as of 2022 and not going to lie, it looks really cool!
When you think about implementing it, the first thing that can come to mind is Modifier.blur() which only blurs the background of itself (“Psst, only works on Android 12 and above”).
But it gets even more complicated when the component you are trying to make glassmorphic has a dynamic position such as items inside scrollable views.
Enough talk! Let’s look at how we can make it work.
What we want to achieve will look like this:
Setting up
Metrics
Two bitmaps:
One for the background and another one which is a copy of the same bitmap but blurred. Our UI will look like this:
Bg Image -> Canvas { drawBlurred image but clip scroll item positions } -> Scrollable RowThat’s it!
The trick I did here is just having the same rememberScrollState() for both Canvas and Row composable modifiers.
Also, you can make things much Clean and use .onGloballyPositioned {} modifier that gives you the position and the size of the composable after its composition… but I thought it will be easier to understand without it.
Bonus!
Add these lines after clipPath{} block and experiment with blendModes:
So you can make something like:
Never mind!
Here’s a small library that has its own fast blur method and gives you Glassmorphic Column and Row composables.
