Develop Reference

Using `RenderEffect` with a `Bitmap` instead of `ImageView`

I want to blur a Bitmap object in Android, currently I have the following code which blurs an ImageView:
private fun blurImageView(radius: Float) {
if (Build.VERSION.SDK_INT >= 31) {
binding.activityMainImageView.setRenderEffect(
RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)
)
}
}
I want to get the underlying Bitmap object, so I tried to achieve that by doing the following:
binding.activityMainImageView.drawToBitmap()
But it doesn't seem to be working.
So how would I go around simply blurring a Bitmap object, is this possible with RenderScript at all? If not, what are my options to create a blur effect on a Bitmap object and get the underlying Bitmap object?
The developer documentation has given no info on how you could go around doing this.

You can create a bitmap blur effect in Android using RenderScript API!
The code maybe like this:
public Bitmap blur(Bitmap image) {
if (null == image){
return null;
}
Bitmap outputBitmap = Bitmap.createBitmap(image);
final RenderScript renderScript = RenderScript.create(this);
Allocation tmpIn = Allocation.createFromBitmap(renderScript, image);
Allocation tmpOut = Allocation.createFromBitmap(renderScript, outputBitmap);
//Intrinsic Gausian blur filter
ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
theIntrinsic.setRadius(25); //should be 0-25
theIntrinsic.setInput(tmpIn);
theIntrinsic.forEach(tmpOut);
tmpOut.copyTo(outputBitmap);
return outputBitmap;
}
Then use:
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.test_pic);
Bitmap blurredBitmap = blur(bitmap);
Hope this can help you!

How can I add a blur effect to a background in an app?

How can I add a blur effect to a background in an Android app? I would like to know some source with the resources and the steps to add this effect. I understand that I have to add a filter, but I don't know where I am going to add it Please can someone help me? I will put the layout of the section that I want to change, As you can see, it has a normal background, but I want to put the blur effect on that section
<?xml version="1.0" encoding="utf-8" ?>

Here are some libraries for you:
https://github.com/Manabu-GT/EtsyBlur
https://github.com/Manabu-GT/GlassView
Usually, we call this feature Glass View, so you can also google it.

You can try to use RenderScript to blur the Bitmap of image:
public Bitmap blurBitmap(Bitmap bitmap,Context context){
//Let's create an empty bitmap with the same size of the bitmap we want to blur
Bitmap outBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
//Instantiate a new Renderscript
RenderScript rs = RenderScript.create(context);
//Create an Intrinsic Blur Script using the Renderscript
ScriptIntrinsicBlur blurScript = null;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN_MR1) {
blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
//Create the Allocations (in/out) with the Renderscript and the in/out bitmaps
Allocation allIn = Allocation.createFromBitmap(rs, bitmap);
Allocation allOut = Allocation.createFromBitmap(rs, outBitmap);
//Set the radius of the blur
blurScript.setRadius(25.f);
//Perform the Renderscript
blurScript.setInput(allIn);
blurScript.forEach(allOut);
//Copy the final bitmap created by the out Allocation to the outBitmap
allOut.copyTo(outBitmap);
}
//recycle the original bitmap
bitmap.recycle();
//After finishing everything, we destroy the Renderscript.
rs.destroy();
return outBitmap;
}
public Bitmap drawableToBitmap(Drawable drawable) {
int width = drawable.getIntrinsicWidth();
int heigh = drawable.getIntrinsicHeight();
drawable.setBounds(0, 0, width, heigh);
Bitmap.Config config = drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565;
Bitmap bitmap = Bitmap.createBitmap(width, heigh, config);
Canvas canvas = new Canvas(bitmap);
drawable.draw(canvas);
return bitmap;
}
public void blurImage(View imageView, Context context){
Drawable drawable = imageView.getBackground();
Bitmap bitmap = drawableToBitmap(drawable);
Bitmap out = blurBitmap(bitmap,context);
BitmapDrawable bitmapDrawable = new BitmapDrawable(context.getResources(),
out);
imageView.setBackground(bitmapDrawable);
}
Use it with a view id is view in a Activity:
View view = findViewById(R.id.view);
blurImage(view,this);

How to make my profile background image as darker blur

I am trying to make my image as darker blur.How can I do that darker blur?
I am making my image as blur ,working fine but that one not darker.That too I am using Network image view,my images are dynamic coming from service api. How can I make my images darker blur.
Thanks in advance.
I am using the below code.
public static Bitmap blur(Context ctx, 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(ctx);
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;
}

you can use setColorFilter
imageView =(ImageView) findViewById(R.id.image_view) ;
imageView.getDrawable().setColorFilter(0x76ffffff, PorterDuff.Mode.MULTIPLY );
average black color 0xff555555
Check my answer here
or you might like to work with this github project https://github.com/wasabeef/Blurry
Blurry.with(context)
.radius(10)
.sampling(8)
.color(Color.argb(66, 255, 255, 0))
.async()
.onto(rootView);

How to use the Renderscript blurring effect without artifacts?

Background
There are plenty of places (including here) to show how to use Renderscript to blur images, as such:
#TargetApi(VERSION_CODES.JELLY_BEAN_MR1)
public static Bitmap renderScriptBlur(Context context, Bitmap srcBitmap, #FloatRange(from = 0.0f, to = 25.0f) float radius) {
if (srcBitmap == null)
return null;
Bitmap outputBitmap = null;
RenderScript rs = null;
try {
rs = RenderScript.create(context);
outputBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(outputBitmap);
canvas.drawBitmap(srcBitmap, 0, 0, null);
Allocation overlayAlloc = Allocation.createFromBitmap(rs, outputBitmap);
ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
blur.setInput(overlayAlloc);
blur.setRadius(radius);
blur.forEach(overlayAlloc);
overlayAlloc.copyTo(outputBitmap);
return outputBitmap;
} catch (Exception ex) {
if (outputBitmap != null)
outputBitmap.recycle();
return srcBitmap;
} finally {
if (rs != null)
rs.destroy();
}
}
The problem
Usually it works great, but when using some images and/or radius-settings, the output image has artifacts that look like scan-lines:
What I've tried
I've found that there is a nicer blurring solutions (like here), but they don't use Renderscript and are also slow and memory-consuming.
I've also tried to make the input image smaller, but the output still has scanlines artifacts.
Finally, I've also reported about this, here.
The question
Is it possible to use Renderscript to blur images without those Artifcats? Is there anything wrong with what I wrote?

The problem was with the algorithm I used. Thanks to this github project, I've found the issue (which is probably not using the correct type fot the allocation) and used a nicer approach:
private static final AtomicReference<RenderScript> sRenderscript = new AtomicReference<>();
public static Bitmap blur(Context context, Bitmap bitmap) {
return blur(context, bitmap, 4, false, false);
}
public static Bitmap blur(Context context, Bitmap bitmap, float radius) {
return blur(context, bitmap, radius, false, false);
}
public static Bitmap blur(Context context, Bitmap bitmapOriginal, #FloatRange(from = 0.0f, to = 25.0f) float radius, boolean overrideOriginal, boolean recycleOriginal) {
if (bitmapOriginal == null || bitmapOriginal.isRecycled())
return null;
RenderScript rs = sRenderscript.get();
if (rs == null)
if (!sRenderscript.compareAndSet(null, rs = RenderScript.create(context)) && rs != null)
rs.destroy();
else
rs = sRenderscript.get();
final Bitmap inputBitmap = bitmapOriginal.getConfig() == Config.ARGB_8888 ? bitmapOriginal : bitmapOriginal.copy(Config.ARGB_8888, true);
final Bitmap outputBitmap = overrideOriginal ? bitmapOriginal : Bitmap.createBitmap(bitmapOriginal.getWidth(), bitmapOriginal.getHeight(), Config.ARGB_8888);
final Allocation input = Allocation.createFromBitmap(rs, inputBitmap);
final Allocation output = Allocation.createTyped(rs, input.getType());
final ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
script.setRadius(radius);
script.setInput(input);
script.forEach(output);
if (recycleOriginal && !overrideOriginal)
bitmapOriginal.recycle();
output.copyTo(outputBitmap);
return outputBitmap;
}
Now it all works nicely.

The artifact in the original version is because the same input Allocation was used as the output Allocation for IntrinsicBlur:
blur.setInput(overlayAlloc);
blur.setRadius(radius);
blur.forEach(overlayAlloc);
forEach(aOut) computes the Gaussian blur and saves the result to the output Allocation. Since the algorithm requires information about the neighbors, doing blur in place may corrupt the input data for sub-sequent calculations.

I use code below. It worked!
public static Bitmap blurRenderScript(Context context, Bitmap inputBitmap, int radius) {
Bitmap outputBitmap = inputBitmap.copy(inputBitmap.getConfig(), true);
RenderScript renderScript = RenderScript.create(context);
Allocation blurInput = Allocation.createFromBitmap(renderScript, inputBitmap, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
Allocation blurOutput = Allocation.createFromBitmap(renderScript, outputBitmap);
ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(renderScript,
Element.U8_4(renderScript));
blur.setInput(blurInput);
blur.setRadius(radius); // radius must be 0 < r <= 25
blur.forEach(blurOutput);
blurOutput.copyTo(outputBitmap);
renderScript.destroy();
return outputBitmap;
}
in build.Gradle
defaultConfig {
applicationId "hello.test.app"
minSdkVersion 16
targetSdkVersion 22
versionCode 1
versionName "1.0"
renderscriptTargetApi 18
renderscriptSupportModeEnabled true
}

Android: ScriptIntrinsicBlur error

I want blur to ImageView
This code not work and on ScriptIntrinsicBlur line force close
Blur Class :
private static final float BLUR_RADIUS = 20f;
public Bitmap blur(Bitmap image) {
if (null == image)
return null;
Bitmap outputBitmap = Bitmap.createBitmap(image);
final RenderScript renderScript = RenderScript.create(this);
Allocation tmpIn = Allocation.createFromBitmap(renderScript, image);
Allocation tmpOut = Allocation.createFromBitmap(renderScript, outputBitmap);
ScriptIntrinsicBlur theIntrinsic = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
theIntrinsic.setRadius(BLUR_RADIUS);
theIntrinsic.setInput(tmpIn);
theIntrinsic.forEach(tmpOut);
tmpOut.copyTo(outputBitmap);
return outputBitmap;
}
Set blur code :
bmp = BitmapFactory.decodeStream(urlImage.openConnection().getInputStream());
bmp = blur(bmp);
imgPost.setImageBitmap(bmp);
And erro log :
http://i.stack.imgur.com/sL2BT.jpg

Per the ScriptIntrinsicBlur documentation, the class was added in API 17 and therefore does not exist prior to that. You can use the Renderscript Support Library to gain access Renderscript back to API 8, including android.support.v8.renderscript.ScriptIntrinsicBlur