AndroidAndroid UI

Android Gaussian Blur Effect Using RenderScript Framework

Gaussian Blur effect for a view is achieved by the help of RenderScript framework introduced in Android 3.0 (API level 11). It is a framework for running computationally intensive tasks at high performance on Android. RenderScript is primarily oriented for use with data-parallel computation, although serial workloads can benefit as well.
ScriptIntrinsicBlur, Intrinsic Gausian blur filter, applies a gaussian blur of the specified radius to a view.

Here we use the support library android.support.v8.renderscript so it will work from API level 9.

Add Support In Build.Gradle

Add 2 lines in your build.gradle(Module:app) file

defaultConfig {
        applicationId "blurview.devdeeds.com.blurview"
        minSdkVersion 14
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

        // Add the following 2 lines
        renderscriptTargetApi 18
        renderscriptSupportModeEnabled true
}

Create Utility Class

Create a utility class called BlurUtils.java with a public method, blur().

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;


public class BlurUtils {

    private static final float BITMAP_SCALE = 0.4f;

    //Set the radius of the Blur. Supported range 0 < radius <= 25
    private static float BLUR_RADIUS = 10.5f;

    public Bitmap blur(Context context, Bitmap image, float blurRadius) {

        Bitmap outputBitmap = null;

        if (image != null) {

            if (blurRadius == 0) {
                return image;
            }

            if (blurRadius < 1) {
                blurRadius = 1;
            }

            if (blurRadius > 25) {
                blurRadius = 25;
            }

            BLUR_RADIUS = blurRadius;

            int width = Math.round(image.getWidth() * BITMAP_SCALE);
            int height = Math.round(image.getHeight() * BITMAP_SCALE);

            Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
            outputBitmap = Bitmap.createBitmap(inputBitmap);

            RenderScript rs = RenderScript.create(context);
            ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
            Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap);
            Allocation tmpOut = Allocation.createFromBitmap(rs, outputBitmap);
            theIntrinsic.setRadius(BLUR_RADIUS);
            theIntrinsic.setInput(tmpIn);
            theIntrinsic.forEach(tmpOut);
            tmpOut.copyTo(outputBitmap);
        }

        return outputBitmap;
    }
}

Activity Layout

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="blurview.devdeeds.com.blurview.MainActivity">

    <ImageView
        android:id="@+id/bgImgView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/bg" />

</android.support.constraint.ConstraintLayout>

Finally In Activity

import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import blurview.devdeeds.com.blurview.utils.BlurUtils;

public class MainActivity extends AppCompatActivity {


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


        //Image view to be blurred
        ImageView bgImgView = (ImageView) findViewById(R.id.bgImgView);

        //Get the bitmap from the ImageView.
        Bitmap bitmap = ((BitmapDrawable) bgImgView.getDrawable()).getBitmap();

        //Let's apply Gaussian blur effect with radius "10.5" and set to ImageView.
        bgImgView.setImageBitmap(new BlurUtils().blur(MainActivity.this, bitmap, 10.5f));
    }
}

Before And After Blur Effect

About author

Rojer is a programmer by profession, but he likes to research new things and is also interested in writing. Devdeeds is his blog, where he writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *