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 33defaultConfig {
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 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:
