Blur linear layout background

Question

In my app I have a LinearLayout which is transparent and it is attached to WindowManager .I want to make that LinearLayout Blur so that everything behind the LinearLayout will look blurred.I had gone through various sources from that I had got how to make a ImageView blur and I had done that successfully using RenderScript Api here is the code:

 private static final float BLUR_RADIUS = 25f;

    Bitmap outputBitmap = Bitmap.createBitmap(image);
    final RenderScript renderScript = RenderScript.create(this);
    Allocation tmpIn = Allocation.createFromBitmap(renderScript, image);
    Allocation tmpOut = Allocation.createFromBitmap(renderScript, outputBitmap);

    //Intrinsic Gausian blur filter
    ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
    theIntrinsic.setRadius(BLUR_RADIUS);
    theIntrinsic.setInput(tmpIn);
    theIntrinsic.forEach(tmpOut);
    tmpOut.copyTo(outputBitmap);
    return outputBitmap;
}


and finally adding it with `ImageView`

    ImageView imageView=(ImageView)findViewById(image-id);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.nature);
    Bitmap blurredBitmap = blur(bitmap);
    imageView.setImageBitmap(blurredBitmap);

but sadly it blurs ImageView only.Any solution for blurring a layout or modifiying the above code to use it with Layout.

Hi everyone I had got to know how to blur an ImageView successfully but how can I blur an transparent LinearLayout.Is there any solution for this please help me

Answer 1

I created an example project to give an example of a possible process to use (main code).

The purpose of this example is to show how RenderScript can be used to blur a generic view. What the example does (when the button "Blur it!" gets clicked) is:

1) Blurs the chosen view

The chosen view, for this example, must be contained inside a bigger container (ex. a LinearLayout).

The blur process:

• Gets a screenshot of the original view.

  Bitmap getViewScreenshot(View v) {
      v.setDrawingCacheEnabled(true);
      Bitmap b = Bitmap.createBitmap(v.getDrawingCache());
      v.setDrawingCacheEnabled(false);
  
      return b;
  }
  

• Instantiates all RenderScript allocations (one for input and one for blur output).

  allocOriginalScreenshot = Allocation.createFromBitmap(mRS, viewScreenshot);
  // Creates an allocation where to store the blur results
  allocBlurred = Allocation.createTyped(mRS, allocOriginalScreenshot.getType(), Allocation.USAGE_SCRIPT | Allocation.USAGE_IO_OUTPUT);
  

• Creates a TextureView to display the blur result.

• Substitutes the new TextureView with the original view. In this process, the new view gets saved inside the "tag" field of the original view, so that later the original view can be substituted back with the new TextureView.

  void replaceView(View originalView, View newView) {
      originalView.setTag(newView);
  
      newView.setLayoutParams(new FrameLayout.LayoutParams(originalView.getLayoutParams()));
  
      ViewGroup parent = (ViewGroup) originalView.getParent();
      int index = parent.indexOfChild(originalView);
      parent.removeView(originalView);
  
      parent.addView(newView, index);
  }   
  

• Blurs the screenshot using the ScriptIntrinsicBlur class.

  void executeBlur() {
      Log.d(TAG, "Executing blur");
  
      scriptIntrinsicBlur.setInput(allocOriginalScreenshot);
      scriptIntrinsicBlur.forEach(allocBlurred);
  
      allocBlurred.ioSend();
  }
  

2) Display a simple dialog

3) Unblur the original view

The unblur process removes the TextureView from the layout and restores the original View.

Reference: RenderScript: parallel computing on Android, the easy way, Dali library