How to Implement Android Blur View Programmatically

In Android development, creating a blur effect on views can help enhance the visual appeal of your app, giving it a more polished, modern look. This technique is especially popular in apps that want to use a blurred background or elements like images and menus that have a smooth, out-of-focus look. While Android provides several options for adding blur effects, performing this task programmatically offers flexibility and control over how and when the blur is applied.

In this guide, we’ll explore how to programmatically add a blur effect to a View or any part of the screen in an Android app using different approaches, focusing mainly on using the RenderScript API, BlurView library, and Android's View.setLayerType() for simpler effects.

Approach 1: Using RenderScript for Blur Effect

RenderScript is a powerful framework introduced in Android that allows developers to run compute-intensive tasks efficiently on Android devices. It supports operations like image processing, which can be used to apply a blur effect to an image or a view.

Steps to Blur a View Using RenderScript:

  1. Add RenderScript to Your Project Before using RenderScript, ensure that you add it to your build.gradle file:

    gradle
    android {
    compileSdkVersion 33 // or your target SDK version

    defaultConfig {
        // Other configurations
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true
    }
}

  2. Create a Blur Function You can create a utility function to blur an image or a view by converting it into a bitmap and applying the RenderScript blur algorithm.

    java
    import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Build;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
import android.widget.ImageView;

public class BlurUtility {

    // Apply blur to a bitmap
    public static Bitmap blurBitmap(Context context, Bitmap originalBitmap, float radius) {
        // Create a RenderScript instance
        RenderScript renderScript = RenderScript.create(context);

        // Create a mutable bitmap to apply the blur effect
        Bitmap outputBitmap = Bitmap.createBitmap(originalBitmap);

        // Create an Allocation from the bitmap
        Allocation input = Allocation.createFromBitmap(renderScript, originalBitmap);
        Allocation output = Allocation.createFromBitmap(renderScript, outputBitmap);

        // Create the blur effect
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        script.setRadius(radius);  // Set the blur radius
        script.setInput(input);
        script.forEach(output);

        // Copy the result to the output bitmap
        output.copyTo(outputBitmap);

        // Clean up
        renderScript.destroy();
        return outputBitmap;
    }
}

  3. Apply Blur to Image or View Use this function to apply the blur effect programmatically. For instance, if you want to blur an image loaded in an ImageView:

    java
    ImageView imageView = findViewById(R.id.imageView);
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
Bitmap blurredBitmap = BlurUtility.blurBitmap(this, originalBitmap, 25f);  // 25f is the blur radius
imageView.setImageBitmap(blurredBitmap);

  4. Notes on RenderScript:

    • RenderScript is optimized for performance but is deprecated in newer Android versions (API 31+). Google recommends using the RenderEffect API or third-party libraries for newer devices.
    • You can adjust the blur intensity by changing the radius parameter, with a higher value resulting in a stronger blur effect.

Approach 2: Using the BlurView Library

If you want an easy-to-implement and more customizable blur effect, consider using a third-party library such as BlurView. This library makes it very easy to implement a blur view in your layout programmatically.

  1. Add the Dependency

    First, add the BlurView library to your build.gradle file:

    gradle
    dependencies {
    implementation 'com.eightbitlab:blurview:1.6.6'
}

  2. Set Up the Blur View in Your Layout

    In your layout XML, you can add the BlurView widget:

    xml
    <com.eightbitlab.blurview.BlurView
    android:id="@+id/blurView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

  3. Apply Blur Programmatically

    Now, you can blur the background of the BlurView programmatically. This example demonstrates how to blur the content behind the BlurView:

    java
    BlurView blurView = findViewById(R.id.blurView);
View decorView = getWindow().getDecorView();
ViewGroup rootView = (ViewGroup) decorView.getRootView();

// Set the radius of the blur (between 0 and 25)
blurView.setupWith(rootView)
    .setBlurRadius(15f)  // Adjust the blur radius here
    .setBlurAutoUpdate(true)
    .setHasFixedTransformationMatrix(true);

  4. Additional Customizations BlurView provides various customization options, such as setting a custom BlurRadius, OverlayColor, and allowing auto-updates whenever the layout changes.

Approach 3: Using View.setLayerType() for a Simpler Blur

For simple blurring effects, another approach you can take is by using Android's View.setLayerType() in combination with Paint objects. This method can be used to create basic blur effects but doesn’t provide the fine control or performance benefits of RenderScript or third-party libraries.

Here’s how you can apply a blur effect using View.setLayerType():

  1. Use a BitmapShader with a Paint object: This technique involves blurring the background or view by drawing it with a BitmapShader and applying a blur effect with the Paint class.

    java
    import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.BitmapShader;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        View myView = findViewById(R.id.my_view);

        // Enable hardware acceleration for the view
        myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        // Apply the blur effect on the background (example with Bitmap)
        Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
        Bitmap blurredBitmap = applyBlur(originalBitmap);

        // Set the blurred bitmap as the background of the view
        myView.setBackground(new BitmapDrawable(getResources(), blurredBitmap));
    }

    private Bitmap applyBlur(Bitmap original) {
        Bitmap blurredBitmap = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(blurredBitmap);
        Paint paint = new Paint();
        paint.setFlags(Paint.ANTI_ALIAS_FLAG);
        paint.setShader(new BitmapShader(original, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        canvas.drawBitmap(original, 0, 0, paint);
        return blurredBitmap;
    }
}

  2. Limitations

    • This approach can be performance-heavy, especially for large images.
    • It may not be as flexible or efficient as using RenderScript or third-party libraries for more complex blur effects.

Conclusion

Blurring views programmatically on Android is an effective way to improve the design and feel of your app. Whether you are using RenderScript for optimized performance, the BlurView library for ease of use and customization, or simpler methods like setLayerType(), you can achieve beautiful and dynamic blur effects tailored to your needs.

For modern Android applications, it's recommended to use third-party libraries like BlurView or RenderEffect (in API 31 and above) to create high-quality blur effects efficiently and with minimal performance impact.