Blur effect on background - android

I need to show something like this in an ImageView
Do you know a method to set an image in an ImageView like so?
Image in background is bluerd and image on it is with blur effect
ImageView imageView=(ImageView)findViewById(R.id.imageView2);
imageView.setImageBitmap(bitmap);
I need put in bitmap my picture and fuzzy picture in background.
this only sets one picture and I need put some fuzzy background
I know how put only one image in 100% quality.
But I don't know how set the background image to this picture.
I don't know how this "filter" name and I could not Google for that.

From https://stackoverflow.com/a/36193733:
I recently came across Renderscript API.
//Set the radius of the Blur. Supported range 0 < radius <= 25
private static final float BLUR_RADIUS = 25f;
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(BLUR_RADIUS);
theIntrinsic.setInput(tmpIn);
theIntrinsic.forEach(tmpOut);
tmpOut.copyTo(outputBitmap);
return outputBitmap;
}
Use the above code snippet in the image view as shown below.
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.nature);
Bitmap blurredBitmap = blur(bitmap);
imageView.setImageBitmap(blurredBitmap);
Dont forget to add below lines in build.gradle file
renderscriptTargetApi 18
renderscriptSupportModeEnabled true

You can use View Pager and Add ImageView in each page, that way you can switch between images,

Set your fuzzy/blurry image as the background, using
android:background = "#drawable/myFuzzyImage"
Set your clear image as you would normally, just like you have, using the setImageBitmap, or using an ImageView in the xml file of your activity layout.

Related

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!

Setting Background with setBackgroungDrawable function in Android

Okey I have a problem with setting a picture for the background. At first I just set the background from 'properities' box. I copy the .jpg file to my drawable folder and just click on the background properity from properities box then select the file from the resources folder. That was okey and it worked but then i wanted to make the background blurry and I found a class that is wrote for that, called BlurBuilder and I put that class to my project. Everything is okey to this point, I added the class but when I tried to apply the funciton from that class as shown in an example like that:
Bitmap blurredBitmap = BlurBuilder.blur(MainActivity.this,myBackgroundFile);
view.setBackgroundDrawable( new BitmapDrawable( getResources(), blurredBitmap ) );
editor says 'cannot resolve symbol 'view' '.
I tryied to change the second line as;
View.setBackgroundDrawable( new BitmapDrawable( getResources(), blurredBitmap ) );
But this time android studio says 'Non-static method 'setBackgroudDrawable(android.graphic.drawables.Drawable) cannot be referenced from a static context
Here's the BlurBuilder class I used:
public class BlurBuilder {
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;
}}
Thanks in advance.
EDİT: I want to make my activity's background a blurry image.
You call a non-static function i.e setDrawableBackground from a non-static context which means to say that you need to create an instance of some View for example:
ImageView view = (ImageView) findViewById(R.id.imageview1);
Bitmap blurredBitmap = BlurBuilder.blur(MainActivity.this,myBackgroundFile);
view.setBackgroundDrawable( new BitmapDrawable( getResources(), blurredBitmap ) );
Once done now you can call any function that view supports.
Got it,
Add the following in XML (main_activity.xml or whatever is your file):
<ImageView
android:id="#+id/whole_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android" />
Add the following in there [in Main Activity] : this will force scale the image to display screen size and use the whole display to show the image.
/* where you set the activity */
setContentView(R.layout.your_main_activity);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
/* adapt the image to the size of the display */
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
Bitmap blurredBitmap = BlurBuilder.blur(MainActivity.this,myBackgroundFile);
Bitmap bmp = Bitmap.createScaledBitmap(blurredBitmap,size.x,size.y,true);
/* fill the background ImageView with the resized image */
ImageView iv_background = (ImageView) findViewById(R.id.whole_background);
iv_background.setImageBitmap(bmp);

Blur linear layout background

In my app I have a LinearLayout which is transparent and it is attached to WindowManager .I want to make that LinearLayout Blur so that everything behind the LinearLayout will look blurred.I had gone through various sources from that I had got how to make a ImageView blur and I had done that successfully using RenderScript Api here is the code:
private static final float BLUR_RADIUS = 25f;
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(BLUR_RADIUS);
theIntrinsic.setInput(tmpIn);
theIntrinsic.forEach(tmpOut);
tmpOut.copyTo(outputBitmap);
return outputBitmap;
}
and finally adding it with `ImageView`
ImageView imageView=(ImageView)findViewById(image-id);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.nature);
Bitmap blurredBitmap = blur(bitmap);
imageView.setImageBitmap(blurredBitmap);
but sadly it blurs ImageView only.Any solution for blurring a layout or modifiying the above code to use it with Layout.
Hi everyone I had got to know how to blur an ImageView successfully but how can I blur an transparent LinearLayout.Is there any solution for this please help me
I created an example project to give an example of a possible process to use (main code).
The purpose of this example is to show how RenderScript can be used to blur a generic view.
What the example does (when the button "Blur it!" gets clicked) is:
1) Blurs the chosen view
The chosen view, for this example, must be contained inside a bigger container (ex. a LinearLayout).
The blur process:
Gets a screenshot of the original view.
Bitmap getViewScreenshot(View v) {
v.setDrawingCacheEnabled(true);
Bitmap b = Bitmap.createBitmap(v.getDrawingCache());
v.setDrawingCacheEnabled(false);
return b;
}
Instantiates all RenderScript allocations (one for input and one for blur output).
allocOriginalScreenshot = Allocation.createFromBitmap(mRS, viewScreenshot);
// Creates an allocation where to store the blur results
allocBlurred = Allocation.createTyped(mRS, allocOriginalScreenshot.getType(), Allocation.USAGE_SCRIPT | Allocation.USAGE_IO_OUTPUT);
Creates a TextureView to display the blur result.
Substitutes the new TextureView with the original view. In this process, the new view gets saved inside the "tag" field of the original view, so that later the original view can be substituted back with the new TextureView.
void replaceView(View originalView, View newView) {
originalView.setTag(newView);
newView.setLayoutParams(new FrameLayout.LayoutParams(originalView.getLayoutParams()));
ViewGroup parent = (ViewGroup) originalView.getParent();
int index = parent.indexOfChild(originalView);
parent.removeView(originalView);
parent.addView(newView, index);
}
Blurs the screenshot using the ScriptIntrinsicBlur class.
void executeBlur() {
Log.d(TAG, "Executing blur");
scriptIntrinsicBlur.setInput(allocOriginalScreenshot);
scriptIntrinsicBlur.forEach(allocBlurred);
allocBlurred.ioSend();
}
2) Display a simple dialog
3) Unblur the original view
The unblur process removes the TextureView from the layout and restores the original View.
Reference: RenderScript: parallel computing on Android, the easy way, Dali library

How to set bitmap size that fill parent?

I want to creat a bit map in the size that fill parent of the app window. how can i do that?
Bitmap maskImage = BitmapFactory.decodeResource(getResources(), R.drawable.img);
ImageView on = (ImageView) findViewById(R.id.on);
Bitmap result = Bitmap.createBitmap(maskImage.getWidth(), maskImage.getHeight(), Bitmap.Config.ARGB_8888);
on.setImageBitmap(result);
Only a single additional line is needed:
Once you have your ImageView:
ImageView on = (ImageView) findViewById(R.id.on);
on.setImageBitmap( . . . );
on.setScaleType(ScaleType.FIT_XY);
ScaleTypes are options for scaling the bounds of your image. You can read more about ScaleTypes in the official docs.

How to disable anti-aliasing when scaling up an imageview in android?

I have a pixel art that I want to scale up. The problem is when I scale it up, it gets all blurred cause of the antialiasing. Is there a way to disable antialiasing directly from xml?
i hope its useful
Bitmap bmpSource = BitmapFactory.decodeResource(getResources(), SourceFileId);
//100 is dimension to resizing image size
//Passing filter = false will result in a blocky, pixellated image.
//Passing filter = true will give you smoother edges
Bitmap bmpScaled = Bitmap.createScaledBitmap(bmpSource, 100, 100, false);
ImageView img = (ImageView) findViewById(Your imageView Control Id);
img.setImageBitmap(bmpScaled);
is this what u want!?

Categories

Resources