How to Implement Glassmorphism in Android?

Glassmorphism or BlurView is a style, developed by adopting the behavior of glass to enhance your app design. It gives a look and feel of translucent or transparent elements. Glassmorphic elements and shapes work really well on bright colorful backgrounds which accentuate the glass effect. So, we will understand this by making a simple app to display glassmorphism in android.

Step-by-Step Implementation

Step 1: Create a new project in Android Studio and select Java as the language. If you are new to Android refer to How to Create/Start a New Project in Android Studio.

Step 2: Navigate to Gradle Scripts > settings.gradle(Project Setting) and the JitPack repository inside repositories in dependencyResolutionManagement {}.

allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}

Step 3: Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section and Sync the project by clicking on Sync Now option appearing in the top right corner.  

implementation ‘com.github.furkankaplan:fk-blur-view-android:1.0.1’

Now update SDK Version and Sync the project by clicking on Sync Now option appearing in the top right corner.

android {
  compileSdk 33

  defaultConfig {
      applicationId “com.example.ccp”
      minSdk 21
      targetSdk 33
      versionCode 1
      versionName “1.0”

      testInstrumentationRunner “androidx.test.runner.AndroidJUnitRunner”
  }

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--background image-->
    <ImageView
        android:id="@+id/banner_image_view"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/gfg"/>

    <!--FkBlurView-->
    <com.github.furkankaplan.fkblurview.FKBlurView
        android:id="@+id/fkBlurView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="@id/banner_image_view"
        app:layout_constraintStart_toStartOf="@id/banner_image_view"
        app:layout_constraintEnd_toEndOf="@id/banner_image_view"
        app:layout_constraintBottom_toBottomOf="@id/banner_image_view"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.example.gfg;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.github.furkankaplan.fkblurview.FKBlurView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // hooker(binding View)
        FKBlurView blurView = findViewById(R.id.fkBlurView);

        // Blur level starts from 1. It's minimum level.
        // Default blurLevel 50
        // if you want to update blurLevel
        // use
        // blurView.setBlur(this, blurView, 20);
        blurView.setBlur(this, blurView);
    }
}

Output: