Adarsh Adarsh - 3 months ago 55
Android Question

Blur linear layout background

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

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