CODEWITHSUNDEEP
android
M.ArslanKhan
M.ArslanKhan

Reputation: 3918

How to Blur A View

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. enter image description here

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...enter image description here

Upvotes: 5

Views: 5919

Answers (2)

Hemant Kaushik
Hemant Kaushik

Reputation: 1754

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!

Upvotes: -1

Ali Imran
Ali Imran

Reputation: 9237

This can be achieved in following steps

  1. Extract the background image of LinearLayout by cropping background Image.

  2. Now extend LinearLayout Class.

  3. Override OnDraw(Canvas mCanvas) method.

  4. Create two methods in your Custom LinearLayout Class 1. DrawBitmap 2. DrawColor.

  5. 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.

  6. Finally draw the color with your transparency level

I hope this will solve your problem.

Sample Code for this

View Background Blur

Upvotes: 3

Related Questions