How to Blur A View

Question

I have a view having different colors. I need to blur the background of that view. for example, There is LinearLayout in which there is a Grid which shows some apps, this Linear Layout (Gridview Container) has color (RED/Green/Black...etc no Image). now I need to blur the background of LinearLayout. This Image is what I have to Achieve.

I am Doing all that by Android Render script because I have many fragments and each fragment has color background so I think Render is the best option other wise it may stuck while view pager swiping.

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    RelativeLayout mainLayout=(RelativeLayout)findViewById(R.id.activity_main);
    view=(View)findViewById(R.id.view);
    Bitmap blurredBitmap = blur( this,  getBitmapFromView(view) );

    view.setBackgroundDrawable( new BitmapDrawable( getResources(), blurredBitmap ) );
    mainLayout.setBackgroundResource(R.drawable.wallp);
}
public static Bitmap getBitmapFromView(View view) {
    view.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(),
            Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    view.draw(canvas);
    return bitmap;
}
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;
}

Now Problem is that if I set color in the background of the LinearLayout then there comes error of

Caused by: java.lang.IllegalArgumentException: width and height must be > 0 can we blur the background of a view have having color but not image

Here is my view...

`if I set color in the background of the LinearLayout then` Unclear: do you want to blur... **a color**???? It's quite obvious that you can only blur **images**. And that their size must be greater than 0 (I'd even say greater than 1*1 px). "Blurring" a single color seems to me like you want to act on the color **transparency**, instead. Which is far different from a **blur** effect. In short: `can we blur the background of a view have having color but not image`? **No**. — Phantômaxx, Jan 01 '17 at 17:48
@Rotwang thanks ,You right but the scenario is that if i set the transparency of that color low then I can see the background wallpaper clearly, Here I need that if user set not transparent color then surely You are right but if user set the Transparent color as in my upload picture then I need to show the blur effect behinde the Gridview(which is not right now in picture) — M.ArslanKhan, Jan 01 '17 at 18:02
Again, not clear. But If I can get you well, you want the GridView container to be "half transparent". And the GridView completely transparent, as it is now. — Phantômaxx, Jan 01 '17 at 18:15
@Rotwang http://stackoverflow.com/questions/31808955/android-blur-view-blur-background-behind-the-view here is nice explanation. I need to Blur behind the view(Linear Layout) ,whether Linear Layout has solid color or transparent color. — M.ArslanKhan, Jan 02 '17 at 10:53
Again, that's about blurring an **image**. Which is what blur is all about. "Blurring" a **single color** makes no sense at all. — Phantômaxx, Jan 02 '17 at 11:07

Ali Imran · Accepted Answer · 2017-01-02T14:26:05.070

This can be achieved in following steps

Extract the background image of LinearLayout by cropping background Image.
Now extend LinearLayout Class.
Override OnDraw(Canvas mCanvas) method.
Create two methods in your Custom LinearLayout Class 1. DrawBitmap 2. DrawColor.
First call the DrawBitmap function by giving the offset you got from ViewPager to background image so that image moves when the use swipe the screen.
Finally draw the color with your transparency level

I hope this will solve your problem.

Sample Code for this

View Background Blur

score -1 · Answer 2 · edited Jun 23 '20 at 03:26

It might be possible that your view is not ready at the time of calling getBitmapFromView method. You can try by wrap your method like:

view.post(new Runnable() {
    public void run(){
        Bitmap blurred = blur(YourActivity.this, getBitmapFromView(view));
        view.setBackgroundDrawable(new BitmapDrawable(getResources(), blurred));
    }
});

you can use your blur() method

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;
}

Hope this help!

@c-an you can use the same `blur()` method provided in question. — Hemant Kaushik, Jun 22 '20 at 11:24

How to Blur A View

2 Answers2

Linked