Blur Background Behind Alertdialog

Blur Background Behind AlertDialog

Update:

We can also use renderscript api to blur background for API level >= 17 and uses fastblur for API level < 17. Please find below Github project.

- Github Project

- Blog

Steps Using FastBlur

1) Take the Snapshot of Your Background using Below Code

private static Bitmap takeScreenShot(Activity activity)
    {
        View view = activity.getWindow().getDecorView();
        view.setDrawingCacheEnabled(true);
        view.buildDrawingCache();
        Bitmap b1 = view.getDrawingCache();
        Rect frame = new Rect();
        activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
        int statusBarHeight = frame.top;
        int width = activity.getWindowManager().getDefaultDisplay().getWidth();
        int height = activity.getWindowManager().getDefaultDisplay().getHeight();

        Bitmap b = Bitmap.createBitmap(b1, 0, statusBarHeight, width, height  - statusBarHeight);
        view.destroyDrawingCache();
        return b;
    }

use it Like This Bitmap map=takeScreenShot(BlurImageView.this);// Your Actitvity Name

2) Call the Method Bitmap fast=fastblur(map, 10); Got it From Here

    public Bitmap fastblur(Bitmap sentBitmap, int radius) {
        Bitmap 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];
        Log.e("pix", w + " " + h + " " + pix.length);
        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;
            }
        }

        Log.e("pix", w + " " + h + " " + pix.length);
        bitmap.setPixels(pix, 0, w, 0, 0, w, h);

        return (bitmap);
    }

3) Finally on Button click

btnblur.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {

                AlertDialog.Builder builder=new AlertDialog.Builder(BlurImageView.this,R.style.Theme_D1NoTitleDim);
                builder.setTitle("Content");
                builder.setMessage("CLICK OK to Exit");
                builder.setPositiveButton("ON", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        back_dim_layout.setVisibility(View.GONE);
                        dialog.cancel();
                    }
                });
                alert=builder.create();
                Bitmap map=takeScreenShot(BlurImageView.this);

                Bitmap fast=fastblur(map, 10);
                final Drawable draw=new BitmapDrawable(getResources(),fast);
                alert.getWindow().setBackgroundDrawable(draw);
                alert.show();
            }
        });

That's It Now You can see the Blur Image Behind You Activity

Hope this could Help full for AnyOne...

AlertDialog with Blur background in position center

Note: This screen background can be anything you have on it, what it does is take a screenshot of it and blur that finally set it as the background of the alertDialog with blur effect

Problem was alertDialog attached with that blur background was always on the top and i couldn't change that.

I came up with this solution.

I had to use two alertDialogs
one is for the blur effect(for the use of getWindow()) and it does not get display now(I removed its setContentView / can use transparent background)

The other one is the real alert dialog got display after the blur effect.

MainActivity

public class MainActivity extends AppCompatActivity {

    private  AlertDialog dialogWhichDisplayAlert;
    private  Dialog fakeDialogUseToGetWindowForBlurEffect;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    @Override
    public void onBackPressed() {

        fakeDialogUseToGetWindowForBlurEffect = new Dialog(MainActivity.this);
        //  fakeDialogUseToGetWindowForBlurEffect.setContentView(R.layout.fakealert); // removed the content so not visible

        new BlurAsyncTask().execute();

    }

    class BlurAsyncTask extends AsyncTask<Void, Integer, Bitmap> {

        protected Bitmap doInBackground(Void...arg0) {

            Bitmap map  = AppUtils.takeScreenShot(MainActivity.this);
            Bitmap fast = new BlurView().fastBlur(map, 10);
            return fast;
        }

        protected void onPostExecute(Bitmap result) {
            if (result != null){
                final Drawable draw=new BitmapDrawable(getResources(),result);
                Window window = fakeDialogUseToGetWindowForBlurEffect.getWindow();
                window.setBackgroundDrawable(draw);
                window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
                window.setGravity(Gravity.CENTER);
                fakeDialogUseToGetWindowForBlurEffect.show();

                // real one
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this, R.style.AlertDialogCustom);
                builder.setTitle("Lets Blur");
                builder.setMessage("This is Blur Demo");
                builder.setCancelable(false);
                builder.setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        fakeDialogUseToGetWindowForBlurEffect.dismiss();
                        dialog.cancel();
                    }
                });
                builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        fakeDialogUseToGetWindowForBlurEffect.dismiss();
                        dialog.cancel();
                    }
                });
                dialogWhichDisplayAlert = builder.create();

                // position real dialogWhichDisplayAlert using Gravity.CENTER;
                dialogWhichDisplayAlert.requestWindowFeature(Window.FEATURE_NO_TITLE);
                WindowManager.LayoutParams wmlp = dialogWhichDisplayAlert.getWindow().getAttributes();
                wmlp.gravity = Gravity.CENTER;
                dialogWhichDisplayAlert.show();

            }

        }
    }
}

[other classes used are same as the question]

style

<style name="AlertDialogCustom" parent="@android:style/Theme.Dialog">
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">10sp</item>
    </style>

Out put

How to set Blur background when dialog create

try this

dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND); 

or try this you can apply a custom theme to your dialog like this

Dialog customDialog= new Dialog(MainActivity.this,R.style.mytheme); 
Window window = customDialog.getWindow();
window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
window.setGravity(Gravity.CENTER);

now create the theme like this

<style name="mytheme" parent="android:style/Theme.Translucent">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:background">@android:color/transparent</item>        
</style>

and also check this AlertDialog with Blur background in possition center

Blur background behind dialog flutter?

Just wrap your Dialog inside BackdropFilter

return new BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
      backgroundColor: Color(ColorResources.BLACK_ALPHA_65),
      child: _dialogContent(),
    )
);

Widget _dialogContent() {}//Your dialog view

Background blur while using dialog box

I think you need to create styles.xml with custom style under res - values folder.

 <style name="Theme.D1NoTitleDim" parent="android:style/Theme.Translucent">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:background">@android:color/transparent</item>        
</style>

and then use this style with your dialog

dialog = new Dialog(context,style); 

---

Related Topics