Glassmorphism in Jetpack Compose. Create beautiful Android UIs | by Jakhongir Madaminov | May, 2022

Create stunning Android UIs

Artwork by Ekaterina Kaurkina on Behance

In the event you google “Glassmorphism” you’d see a whole lot of articles on creating glassmorphic UI designs which is mainly a panel that blurs the background behind it. It’s turning into an enormous pattern as of 2022 and never going to lie, it seems actually cool!

When you concentrate on implementing it, the very first thing that may come to thoughts is Modifier.blur() which solely blurs the background of itself (“Psst, solely works on Android 12 and above”).

But it surely will get much more sophisticated when the part you are attempting to make glassmorphic has a dynamic place similar to gadgets inside scrollable views.

Sufficient speak! Let’s have a look at how we are able to make it work.

What we need to obtain will appear to be this:

Location: Bukhara, Uzbekistan

Metrics

Two bitmaps:

One for the background and one other one which is a duplicate of the identical bitmap however blurred. Our UI will appear to be this:

Bg Picture -> Canvas  drawBlurred picture however clip scroll merchandise positions  -> Scrollable Row

That’s it!

The trick I did right here is simply having the identical rememberScrollState() for each Canvas and Row composable modifiers.

Additionally, you can also make issues a lot Clear and use .onGloballyPositioned modifier that provides you the place and the dimensions of the composable after its composition… however I assumed will probably be simpler to know with out it.

Add these traces after clipPath block and experiment with blendModes:

So you can also make one thing like:

By no means thoughts!

Right here’s a small library that has its personal quick blur technique and provides you Glassmorphic Column and Row compostables.

More Posts