Glassmorphism effect in android

Viewed 4594

In 2021 Glass morphism UI is in trend. As a new android developer I want to add glass morphism effect in my android app so I search my query on google but I didn't get any answer to that how can I add glass morphism effect in my android app.

Should I have to write code for Glass Morphism effect or we can simply add through xml design.

3 Answers

Glassmorphism effect is basically combination of blur and opacity. You can use one of many libraries for blur effect or you can write your own blur function. Then you can change the opacity of any view present in android both programmatically or in xml.

android:alpha="0.6"

You can checkout this link for blur libraries.

For Developing side we can convert or add like Glass morphism or Soft Ui or any other . It is developed in Figma or Adobe Xd or any other with set of principles and design . After that we can get needed resources from designer then we use those resources in our App .

You can try article below. It use this library to create blur effect.Medium
dependency

implementation 'com.eightbitlab:blurview:1.6.6'

layout.xml
<eightbitlab.com.blurview.BlurView
    android:id="@+id/blur_view_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:blurOverlayColor="@color/white_40">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/black"
        android:minHeight="?actionBarSize"/>
</eightbitlab.com.blurview.BlurView>

then setup blur config in your activity

blurViewTab.setupWith(viewGroup)
        .setBlurAlgorithm(RenderScriptBlur(context))
        .setBlurRadius(16f)
        .setBlurAutoUpdate(true)
       .setHasFixedTransformationMatrix(true)

https://miro.medium.com/max/712/0*9Ns4U3PNxHGm9NLf.png
Related