Using RenderScript to achieve Gaussian blur (frosted glass/frosted) effect

Preface

When browsing Instagram, I accidentally discovered that the design of Instagram's dialog box is very interesting, as shown below:

The background of its dialog is actually frosted glass, which is really beautiful in my opinion. Well, both the dialog box and Dilraba Dilmurat are beautiful😂. Seeing such a good effect, of course I have to start to do something and achieve a similar effect by myself. The final effect is as follows:

The dialog box background is blurred and the blur degree is manually adjusted.

Comparison of implementation methods

When I first wanted to achieve the frosted glass effect, I was confused and didn't know how to start. Fortunately, there is Google. After searching, I found that there are 4 common ways to achieve it, which are:

• RenderScript
• Java Algorithms
• NDK Algorithms
• openGL

For such a computationally intensive task of processing an entire image, openGL has the best performance, and Java is definitely the worst. The performance of RenderScript and NDK is comparable, but you know, I can't do anything about NDK and openGL. After comprehensive consideration, RenderScript should be the most suitable.

But that doesn’t mean RenderScript is completely problem-free:

1. The larger the blur radius, the higher the performance requirement. The blur radius cannot exceed 25, so it is not possible to obtain images with very high blur.
2. ScriptIntrinsicBlur was introduced in API 17. If you need to implement it on devices below Android 4.2, you need to introduce RenderScript Support Library. Of course, the size of the installation package will increase accordingly.

RenderScript Implementation

First, add the following code to the build.gradle file in the app directory:

 defaultConfig {
        applicationId "io.github.marktony.gaussianblur"  
 minSdkVersion 19
 targetSdkVersion 25
 versionCode 1
 versionName "1.0"  
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true  
 }

RenderScriptIntrinsics provides some operation classes that can help us quickly implement various image processing operations. For example, ScriptIntrinsicBlur can achieve Gaussian blur effects simply and efficiently.

 package io.github.marktony.gaussianblur; 
 
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.support.annotation.IntRange;
 import android.support.annotation.NonNull;
 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 RenderScriptGaussianBlur { 
 
    private RenderScript renderScript; 
 
 public RenderScriptGaussianBlur(@NonNull Context context) {
        this.renderScript = RenderScript.create (context);
 } 
 
 public Bitmap gaussianBlur(@IntRange( from = 1, to = 25) int radius, Bitmap original) {
        Allocation input = Allocation.createFromBitmap(renderScript, original);
        Allocation output = Allocation.createTyped(renderScript, input.getType());
        ScriptIntrinsicBlur scriptIntrinsicBlur = ScriptIntrinsicBlur. create (renderScript, Element.U8_4(renderScript));
        scriptIntrinsicBlur.setRadius(radius);
        scriptIntrinsicBlur.setInput(input);
        scriptIntrinsicBlur.forEach( output );
 output .copyTo(original);
 return original;
 } 
 
 }

Then you can use RenderScriptGaussianBlur directly and happily achieve different degrees of blur depending on the value of the SeekBar.

 package io.github.marktony.gaussianblur; 
 
 import android.content.DialogInterface;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.support.v7.app.AlertDialog;
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.util.Log;
 import android. view . View ;
 import android.view.Window ;
 import android.view.WindowManager ;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.SeekBar;
 import android.widget.TextView; 
 
 public class MainActivity extends AppCompatActivity { 
 
    private ImageView imageView;
    private ImageView container;
    private LinearLayout layout;
    private TextView textViewProgress;
    private RenderScriptGaussianBlur blur; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
        imageView = (ImageView) findViewById(R.id.imageView);
        container = (ImageView) findViewById(R.id.container); 
 
        container.setVisibility( View .GONE); 
 
        layout = (LinearLayout) findViewById(R.id.layout); 
 
        layout.setVisibility( View .VISIBLE); 
 
        SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
        textViewProgress = (TextView) findViewById(R.id.textViewProgress);
        TextView textViewDialog = (TextView) findViewById(R.id.textViewDialog);
        blur = new RenderScriptGaussianBlur(MainActivity.this); 
 
 seekBar.setMax(25);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
 @Override
 public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                textViewProgress.setText(String.valueOf(progress));
 } 
 
 @Override
 public void onStartTrackingTouch(SeekBar seekBar) { 
 
 } 
 
 @Override
 public void onStopTrackingTouch(SeekBar seekBar) {
 int radius = seekBar.getProgress();
                if (radius < 1) {
                    radius = 1;
 }
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
                imageView.setImageBitmap(blur.gaussianBlur(radius, bitmap));
 }
 }); 
 
        textViewDialog.setOnClickListener(new View .OnClickListener() {
 @Override
 public void onClick( View v) { 
 
                container.setVisibility( View .VISIBLE); 
 
                layout.setDrawingCacheEnabled( true );
                layout.setDrawingCacheQuality( View .DRAWING_CACHE_QUALITY_LOW); 
 
                Bitmap bitmap = layout.getDrawingCache(); 
 
                container.setImageBitmap(blur.gaussianBlur(25, bitmap)); 
 
                layout.setVisibility( View .INVISIBLE); 
 
                AlertDialog dialog = new AlertDialog.Builder(MainActivity.this) .create ();
                dialog.setTitle( "Title" );
                dialog.setMessage( "Message" );
                dialog.setButton(DialogInterface.BUTTON_POSITIVE, "OK" , new DialogInterface.OnClickListener() {
 @Override
 public void onClick(DialogInterface dialog, int which) {
                        dialog.dismiss();
 }
 });
                dialog.setButton(DialogInterface.BUTTON_NEGATIVE, "Cancel" , new DialogInterface.OnClickListener() {
 @Override
 public void onClick(DialogInterface dialog, int which) { 
 
 }
 });
                dialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
 @Override
 public void onCancel(DialogInterface dialog) { 
 
 }
 }); 
 
                dialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
 @Override
 public void onCancel(DialogInterface dialog) {
                        container.setVisibility( View .GONE);
                        layout.setVisibility( View .VISIBLE);
 }
 }); 
 
                dialog.show();
 }
 }); 
 
 }
 }

I have done some operations on the visibility of the view in the code, which is relatively simple and I believe you can understand it. One difference from the implementation of the dialog in Instagram is that I did not capture the bitmap of the entire page, but only the content under the actionbar. If you must achieve the same effect, just adjust the layout of the page. I won't go into details here.

Simple isn’t it?

wheel

In addition to RenderScript, there are some excellent wheels:

• 500px-android-blur
• Blurry
• android-stackblur
• FastBlur: Java Algorithm Implementation

BlurTestAndroid makes statistics and comparisons on the implementation methods, algorithms adopted and time consumed by different libraries. You can also download its demo app and test it yourself.

Example code is here: GaussianBlur