How to blur background images in Android

Question

What is the best way to blur background images like the image below? I saw some code and libraries but their are a couple of years old or like BlurBehind library, but it doe

Answer 1

you can use Glide for load and transform into blur image, 1) for only one view,

val requestOptions = RequestOptions()
                requestOptions.transform(BlurTransformation(50)) // 0-100
Glide.with(applicationContext).setDefaultRequestOptions(requestOptions)
                        .load(imageUrl).into(view)

2) if you are using the adapter to load an image in the item, you should write your code in the if-else block, otherwise, it will make all your images blurry.

 if(isBlure){
  val requestOptions = RequestOptions()
                requestOptions.transform(BlurTransformation(50))
                Glide.with(applicationContext).setDefaultRequestOptions(requestOptions)
                        .load(imageUrl).into(view )
}else{
 val requestOptions = RequestOptions()
            Glide.with(applicationContext).setDefaultRequestOptions(requestOptions).load(imageUrl).into(view)
}

Answer 2

This is an easy way to blur Images Efficiently with Android's RenderScript that I found on this article

1. Create a Class called BlurBuilder

   public class BlurBuilder {
     private static final float BITMAP_SCALE = 0.4f;
     private static final float BLUR_RADIUS = 7.5f;
   
     public static Bitmap blur(Context context, Bitmap image) {
       int width = Math.round(image.getWidth() * BITMAP_SCALE);
       int height = Math.round(image.getHeight() * BITMAP_SCALE);
   
       Bitmap inputBitmap = Bitmap.createScaledBitmap(image, width, height, false);
       Bitmap 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;
     }
   }
   

2. Copy any image to your drawable folder

3. Use BlurBuilder in your activity like this:

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       requestWindowFeature(Window.FEATURE_NO_TITLE);
       getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
               WindowManager.LayoutParams.FLAG_FULLSCREEN);
       setContentView(R.layout.activity_login);
   
       mContainerView = (LinearLayout) findViewById(R.id.container);
       Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background);
       Bitmap blurredBitmap = BlurBuilder.blur( this, originalBitmap );
       mContainerView.setBackground(new BitmapDrawable(getResources(), blurredBitmap));
   

4. Renderscript is included into support v8 enabling this answer down to api 8. To enable it using gradle include these lines into your gradle file (from this answer)

   defaultConfig {
       ...
       renderscriptTargetApi *your target api*
       renderscriptSupportModeEnabled true
   }
   

5. Result

Answer 3

You can use

    Glide.with(getContext()).load(R.mipmap.bg)
            .apply(bitmapTransform(new BlurTransformation(22)))
            .into((ImageView) view.findViewById(R.id.imBg));

Answer 4

This might be a very late reply but I hope it helps someone.

1. You can use third party libs such as RenderScript/Blurry/etc.
2. If you do not want to use any third party libs, you can do the below using alpha(setting alpha to 0 means complete blur and 1 means same as existing).

Note(If you are using point 2) : While setting alpha to the background, it will blur the whole layout. To avoid this, create a new xml containing drawable and set alpha here to 0.5 (or value of your wish) and use this drawable name (name of file) as the background.

For example, use it as below (say file name is bgndblur.xml):

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shape="rectangle"
android:src="@drawable/registerscreenbackground" 
android:alpha="0.5">

Use the below in your layout :

<....
 android:background="@drawable/bgndblur">

Hope this helped.