How can I blur the background of my layout?

Question

I have tried most of the solutions from stack overflow, but I don't seem to get a correct implementation of the blurred effect.
Help me out please

@Anand Singh see my answer hope it will give you some idea to achieve the thing which you are looking for. — Andy Developer, Jul 07 '17 at 10:09

Andy Developer · Answer 1 · 2017-07-11T04:58:24.227

Try this one it works fine.

public Bitmap captureScreenShot(View view) {
/*
 * Creating a Bitmap of view with ARGB_4444.
 * */
    Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_4444);
    Canvas canvas = new Canvas(bitmap);
    Drawable backgroundDrawable = view.getBackground();
    if (backgroundDrawable != null) {
        backgroundDrawable.draw(canvas);
    } else {
        canvas.drawColor(Color.parseColor("#80000000"));
    }
    view.draw(canvas);
    return bitmap;
}

You can pass any View to this function like RelativeLayout, LinearLayout, FrameLayout etc.

Now, Set up a Blur function.

    public static Bitmap blur(Context context, Bitmap image) {
    float BITMAP_SCALE = 0.4f;
    float BLUR_RADIUS = 7.5f;

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

Thanks to Norman Peitek for this blur function.You can follow this link for more information regarding this blur function.

How to use this Function?

// relCustomDialog is the Parent object of RelativeLayout.
// relFullScreen is the Main Parent object of RelativeLayout.
relCustomDialog.setBackgroundDrawable(new BitmapDrawable(getResources(), blur
(MainActivity.this, captureScreenShot(relFullScreen))));

You follow this link for full sourcecode .

Thanks Andy Developer....this solution really helped me out in understanding the concept of blurring a view — Anand Singh, Jul 11 '17 at 04:31
@AnandSingh welcome sir. If you found the answer helpful so please mark as accepted answer :) — Andy Developer, Jul 11 '17 at 04:50

score 5 · Answer 2 · answered Jul 07 '17 at 10:02

5

alpha attribute is there for view in android who represent Opacity

In XML

android:alpha="0.5"

Programatically

yourView.setAlpha(0.5f);

also you can set backgroud color as you want for view

v.setBackgroundColor(0xFF00FF00);

answered Jul 07 '17 at 10:02

Sushant Gosavi

3,647
3
35
55

score 0 · Answer 3 · edited Jul 07 '17 at 10:16

You can use this

Blur.java

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Build.VERSION;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;

public class Blur {


    @SuppressLint("NewApi")
    public static Bitmap fastblur(Context context, Bitmap sentBitmap, int radius, boolean canReuseInBitmap) {

        if (VERSION.SDK_INT > 16) {
            Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);

            final RenderScript rs = RenderScript.create(context);
            final Allocation input = Allocation.createFromBitmap(
                    rs,
                    sentBitmap,
                    Allocation.MipmapControl.MIPMAP_NONE,
                    Allocation.USAGE_SCRIPT);

            final Allocation output = Allocation.createTyped(rs, input.getType());
            final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
            script.setRadius(radius /* e.g. 3.f */);
            script.setInput(input);
            script.forEach(output);
            output.copyTo(bitmap);
            return bitmap;
        }


        // Stack Blur Algorithm by Mario Klingemann <mario@quasimondo.com>

        Bitmap bitmap;

        if (canReuseInBitmap) {
            bitmap = sentBitmap;
        } else {
            bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
        }

        if (radius < 1) {
            return (null);
        }

        int w = bitmap.getWidth();
        int h = bitmap.getHeight();

        int[] pix = new int[w * h];
        bitmap.getPixels(pix, 0, w, 0, 0, w, h);

        int wm = w - 1;
        int hm = h - 1;
        int wh = w * h;
        int div = radius + radius + 1;

        int r[] = new int[wh];
        int g[] = new int[wh];
        int b[] = new int[wh];
        int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
        int vmin[] = new int[Math.max(w, h)];

        int divsum = (div + 1) >> 1;
        divsum *= divsum;
        int dv[] = new int[256 * divsum];
        for (i = 0; i < 256 * divsum; i++) {
            dv[i] = (i / divsum);
        }

        yw = yi = 0;

        int[][] stack = new int[div][3];
        int stackpointer;
        int stackstart;
        int[] sir;
        int rbs;
        int r1 = radius + 1;
        int routsum, goutsum, boutsum;
        int rinsum, ginsum, binsum;

        for (y = 0; y < h; y++) {
            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
            for (i = -radius; i <= radius; i++) {
                p = pix[yi + Math.min(wm, Math.max(i, 0))];
                sir = stack[i + radius];
                sir[0] = (p & 0xff0000) >> 16;
                sir[1] = (p & 0x00ff00) >> 8;
                sir[2] = (p & 0x0000ff);
                rbs = r1 - Math.abs(i);
                rsum += sir[0] * rbs;
                gsum += sir[1] * rbs;
                bsum += sir[2] * rbs;
                if (i > 0) {
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
                } else {
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
                }
            }
            stackpointer = radius;

            for (x = 0; x < w; x++) {

                r[yi] = dv[rsum];
                g[yi] = dv[gsum];
                b[yi] = dv[bsum];

                rsum -= routsum;
                gsum -= goutsum;
                bsum -= boutsum;

                stackstart = stackpointer - radius + div;
                sir = stack[stackstart % div];

                routsum -= sir[0];
                goutsum -= sir[1];
                boutsum -= sir[2];

                if (y == 0) {
                    vmin[x] = Math.min(x + radius + 1, wm);
                }
                p = pix[yw + vmin[x]];

                sir[0] = (p & 0xff0000) >> 16;
                sir[1] = (p & 0x00ff00) >> 8;
                sir[2] = (p & 0x0000ff);

                rinsum += sir[0];
                ginsum += sir[1];
                binsum += sir[2];

                rsum += rinsum;
                gsum += ginsum;
                bsum += binsum;

                stackpointer = (stackpointer + 1) % div;
                sir = stack[(stackpointer) % div];

                routsum += sir[0];
                goutsum += sir[1];
                boutsum += sir[2];

                rinsum -= sir[0];
                ginsum -= sir[1];
                binsum -= sir[2];

                yi++;
            }
            yw += w;
        }
        for (x = 0; x < w; x++) {
            rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
            yp = -radius * w;
            for (i = -radius; i <= radius; i++) {
                yi = Math.max(0, yp) + x;

                sir = stack[i + radius];

                sir[0] = r[yi];
                sir[1] = g[yi];
                sir[2] = b[yi];

                rbs = r1 - Math.abs(i);

                rsum += r[yi] * rbs;
                gsum += g[yi] * rbs;
                bsum += b[yi] * rbs;

                if (i > 0) {
                    rinsum += sir[0];
                    ginsum += sir[1];
                    binsum += sir[2];
                } else {
                    routsum += sir[0];
                    goutsum += sir[1];
                    boutsum += sir[2];
                }

                if (i < hm) {
                    yp += w;
                }
            }
            yi = x;
            stackpointer = radius;
            for (y = 0; y < h; y++) {
                // Preserve alpha channel: ( 0xff000000 & pix[yi] )
                pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];

                rsum -= routsum;
                gsum -= goutsum;
                bsum -= boutsum;

                stackstart = stackpointer - radius + div;
                sir = stack[stackstart % div];

                routsum -= sir[0];
                goutsum -= sir[1];
                boutsum -= sir[2];

                if (x == 0) {
                    vmin[y] = Math.min(y + r1, hm) * w;
                }
                p = x + vmin[y];

                sir[0] = r[p];
                sir[1] = g[p];
                sir[2] = b[p];

                rinsum += sir[0];
                ginsum += sir[1];
                binsum += sir[2];

                rsum += rinsum;
                gsum += ginsum;
                bsum += binsum;

                stackpointer = (stackpointer + 1) % div;
                sir = stack[stackpointer];

                routsum += sir[0];
                goutsum += sir[1];
                boutsum += sir[2];

                rinsum -= sir[0];
                ginsum -= sir[1];
                binsum -= sir[2];

                yi += w;
            }
        }

        bitmap.setPixels(pix, 0, w, 0, 0, w, h);
        return (bitmap);
    }

}

*BlurImage.java*

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;

public class BlurImage {
    private Context context;

    private  Bitmap getScreenshot(View v) {
        Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Config.ARGB_4444);
        v.draw(new Canvas(b));
        return b;
    }

    public void applyBlur(Context context, View mainView, View blurView) {
        this.context = context;
        blur(getScreenshot(blurView), mainView);
    }

    @SuppressLint({"NewApi"})
    private void blur(Bitmap bitmap, View view) {
        Bitmap overlay = Bitmap.createBitmap((int) (((float) view.getMeasuredWidth()) / 3.0f), (int) (((float) view.getMeasuredHeight()) / 3.0f), Config.ARGB_4444);
        Canvas canvas = new Canvas(overlay);
        canvas.translate(((float) (-view.getLeft())) / 3.0f, ((float) (-view.getTop())) / 3.0f);
        canvas.scale(1.0f/ 3.0f, 1.0f / 3.0f);
        Paint paint = new Paint();
        paint.setFlags(2);
        canvas.drawBitmap(bitmap, 0.0f, 0.0f, paint);
        view.setBackground(new BitmapDrawable(this.context.getResources(), Blur.fastblur(context,overlay, (int) 20.0f, true)));
    }
}

score 0 · Answer 4 · answered Jul 07 '17 at 10:07

layout in which you are adding background add upper layout and set background color with hex transparency you can get it like but not exactly.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A6FFFFFF"></LinearLayout></LinearLayout>

Hex transparency in colors it is link it would give you transparency code just you have to add hex code before color code. such as your color code is #FFFFF and hex code is A6 than you write like this #A6FFFF.

score -1 · Answer 5 · answered Jul 07 '17 at 10:07

-1

Put the view on that view in which you want to blur

 <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#CC000000" />

answered Jul 07 '17 at 10:07

Akshay More

359
2
13

getBindingFragmentAdmittedFor.recylerviewAdmittedFor.alpha =1.0F – Ayan Bhattacharjee Jan 16 '23 at 07:08

How can I blur the background of my layout?

5 Answers5