Get effect of Blur image with color shade (like Dark Gray) like iOS, but in Android

Question

How can I create an effect like you see in iOS; when a dialog box is open, the background screen becomes blurred as well, as with color shade in Android.

I have follow this link to get this effect, but I am not able to get proper effect like this.

For the blur effect, I take screenshot of the current view and blur that image, but I need a color effect with this like in the demo image, below.

The effect I want is shown in this picture. How can I get this effect?

Demo Image (Blur with Color shade)

https://stackoverflow.com/questions/19311192/blur-background-behind-alertdialog — AskNilesh, Oct 13 '17 at 07:02
I get blur effect but i also need effect of color shade (as dark grey in image) with blur effect — Manoj Patidar, Oct 13 '17 at 07:10
Possible duplicate of [Set the background image in blur effect in android app](https://stackoverflow.com/questions/36192800/set-the-background-image-in-blur-effect-in-android-app) — Dima Kozhevin, Oct 13 '17 at 07:19
@DimaKozhevin I already go through your link but this help me only to blur image not getting color shade like Dark gray in picture. my question is how i get both at a time — Manoj Patidar, Oct 13 '17 at 07:23
Follow this link https://stackoverflow.com/a/36686744/3598052 and apply a colour filter with alpha 0.7 colour code in RGB. — Chitrang, Aug 28 '18 at 20:29

score 0 · Answer 1 · answered Mar 15 '19 at 09:16

use ColorFilter. The following codes are taken from Blurry

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

Canvas canvas = new Canvas(bitmap);

//...omitted...

Paint paint = new Paint();
paint.setFlags(Paint.FILTER_BITMAP_FLAG | Paint.ANTI_ALIAS_FLAG);

//replace factor.color with your desired color, e.g Color.argb(200,200,200,200)
PorterDuffColorFilter filter =
    new PorterDuffColorFilter(factor.color, PorterDuff.Mode.SRC_ATOP);
paint.setColorFilter(filter);
canvas.drawBitmap(source, 0, 0, paint);

//blur
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
  try {
    bitmap = Blur.rs(context, bitmap, factor.radius);
  } catch (RSRuntimeException e) {
    bitmap = Blur.stack(bitmap, factor.radius, true);
  }
} else {
  bitmap = Blur.stack(bitmap, factor.radius, true);
}

//...omitted...

But it colors the elements of the the bitmap that you are using rather than the color of the blur. — Fay007, Jul 19 '19 at 09:32

GURPREET KOONER · Answer 2 · 2020-02-26T10:16:09.973

0

Use any method to blur your image. You can find various types library to do so.

I have used Blur Image View.

When the image gets blured then you just have to add one line i.e.

BlurImageView.setColorFilter(Color.argb(155, 0, 0, 0), PorterDuff.Mode.SRC_ATOP);

This will give a shade to your Image View change the arguments of Color.argb according to your need

edited Feb 26 '20 at 10:16

answered Feb 26 '20 at 10:08

GURPREET KOONER

1
3

score -1 · Answer 3 · answered Oct 13 '17 at 07:08

Use this below class

public class BlurBuilder {
    private static final float BITMAP_SCALE = 0.05f;
    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;
    }
}

Also Use it where you need as below:

Bitmap blurredBitmap = BlurBuilder.blur(mContext, icn);
rootlay.setBackgroundDrawable(new BitmapDrawable(getResources(), blurredBitmap));

This make image only blur not with color shade like in image (shade with dark grey color) — Manoj Patidar, Oct 13 '17 at 07:12

Get effect of Blur image with color shade (like Dark Gray) like iOS, but in Android

3 Answers3