Implementing Glassmorphism in Android App
Glassmorphism is getting more popular in the community, but how can we implement it in a real app? Especially on the Android app. Let’s talk about it in this article.
If you are an Android developer or app designer, you must have often heard about material design; the default design system for Android applications. Material design is an excellent design system and got all we need in Android app development.
Using this design system, we can make our app look more aesthetic.
What if we make it even more aesthetic than the default material design? We can combine our design using the guide from material design with different styles, e.g., Glassmorphism, etc. With that, designers can explore more in their design.
But, exploring too far from the guide can lead us astray. Also, too many customizations could make our designs hard to implement in the code. So, be wise when choosing the styles.
Glassmorphism
Glassmorphism is a style that adopts the behavior of glass. It will look great when the background is a colorful image. Glassmorphism uses a combination of blur and transparency.
If you want to implement this style in your app, create a layer, then add a blur effect and transparency.
And voila! It will look like acrylic in the real world. Just make sure you have enough clarity to show the content above it. Also, make sure the background is always colorful to make this effect stands out.
You can learn more about Glassmorphism in this amazing article by
Code it!
From a designer’s perspective, we already know that Glassmorphism is a style that combines blur and transparency. So let’s implement it in our code.
We can implement transparency in Android by using hex color code. This gist Hexadecimal color code for transparency can be your guide when implementing transparency color.
We just tackle our first challenge to implementing transparency in our component. Now the next challenge is to implement blur in our component.
In Android, blur is not a default library; we need to use a hacky way to implement it by using RenderScript library. Learn how to use the RenderScript library to implement blur in this article by
In my case, I have found a useful and simple library to implement the blur effect in our app. You can find it here:
with this library, we can implement blur in our layout with ease in our XML like this
and set its parameter to create the perfect blur effect
As you can see in the XML snippet above, I have used parameter app:blurOverlayColor=”@color/white_40" this parameter will set the background with white color and 40% transparency. And we will get the perfect Glassmorphism in our app. Let’s see the result.
You can try different libraries that can perpetuate the same purposes to blur the view in Android.
That’s it. We just learned how to implement Glassmorphism in our Android app. If you want to check my complete code, you can find it here:
If you have anything to say, please kindly write it in the comment section below and discuss it there.
See you in my other article!
References
- https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
- https://ssaurel.medium.com/create-a-blur-effect-on-android-with-renderscript-aa05dae0bd7d
- https://github.com/Dimezis/BlurView
- https://github.com/mmin18/RealtimeBlurView
- https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
- https://github.com/anangkur/Movie-Ku
