CODEWITHSUNDEEP
androidandroid-layoutandroid-blur-effect
Pedo
Pedo

Reputation: 194

how to blur image in android and set it to relative layout

I want to blur image like this and I need to set it to the RelativeLayout and it should create blur image like this image given below :

Blur snapshot of my camera app when it changes the camera from front to rear

I used blurry library from github and it does all my work using this code but I can set it to Imageview only not to RelativeLayout.

Blurry.with(context).capture(view).into(imageView);

So, please give me the solution.

Upvotes: 1

Views: 14584

Answers (6)

Foroogh Varmazyar
Foroogh Varmazyar

Reputation: 1605

If you are using jetpack compose and you want blurry image use Modifier .blur(radius = 10.dp) like this :

 Image(
            painter = painterResource(R.drawable.Your_Image),
            contentDescription = "",
            modifier = Modifier
                .blur(radius = 10.dp)
        )

Upvotes: 0

amit bansode
amit bansode

Reputation: 339

Whoever want more blurry effect, please check the following class I have used. Note the for loop -> more time you loop more you get blurred. (For above question ImageView can be use inside RelativeLayout)

public class BlurTransformation implements Transformation {

RenderScript rs;

public BlurTransformation(Context context) {
    super();
    rs = RenderScript.create(context);
}

@Override
public Bitmap transform(Bitmap bitmap) {
    // Create another bitmap that will hold the results of the filter.
    Bitmap blurredBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);
    for (int i = 0; i < 10; i++) {


        // Allocate memory for Renderscript to work with
        Allocation input = Allocation.createFromBitmap(rs, blurredBitmap, Allocation.MipmapControl.MIPMAP_FULL, Allocation.USAGE_SHARED);
        Allocation output = Allocation.createTyped(rs, input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setInput(input);

        // Set the blur radius
        script.setRadius(25);

        // Start the ScriptIntrinisicBlur
        script.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(blurredBitmap);
    }
    bitmap.recycle();

    return blurredBitmap;
}

@Override
public String key() {
    return "blur";
}
}

Using this with picasso:

List<Transformation> transformations = new ArrayList<>();
transformations.add(new BlurTransformation(mContext));

Picasso.get().load(Uri.parse(url))
              .tag(mContext)
              .placeholder(defaultresource)
              .transform(transformations)
              .placeholder(defaultresource)
              .into(imageview, new Callback() {
                        @Override
                        public void onSuccess() { }

                        @Override
                        public void onError(Exception e) {
                        }
                    });

Hope this will help you.

Upvotes: 0

Prashant Kumar Sharma
Prashant Kumar Sharma

Reputation: 1118

It can be done without using any library files, just create a layer-list XML file in the drawable folder and use it.

For blurry effect, create blur.xml file in the drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/nature" /> <!-- change @drawable/nature with your desired image -->
    <item>
        <shape android:shape="rectangle">

<!-- You can use from 1% transparency to 100% transparency, according to your need,-->
            <solid
                android:color="#80FFFFFF"/>  <!-- Here transparency level is 80%-->
        </shape>
    </item>
    </layer-list>

Now use it as a background image in your layout file.

<RelativeLayout 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/blur">

Done,...

Upvotes: 1

S Haque
S Haque

Reputation: 7281

You can use BlurTransformation of Picasso and load your image in a custom target(In your case that is RelativeLayout) like

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .transform(new BlurTransformation(context))
    .into(new Target() {
            @Override
            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {

            }

            @Override
            public void onBitmapFailed(Drawable errorDrawable) {

            }

            @Override
            public void onPrepareLoad(Drawable placeHolderDrawable) {

            }
    });

Upvotes: 1

PEHLAJ
PEHLAJ

Reputation: 10126

Try RenderScript and FastBlur techniques explained by trickyandroid.com

http://trickyandroid.com/advanced-blurring-techniques/

Upvotes: -1

Shubham Sejpal
Shubham Sejpal

Reputation: 3614

May this helps you

Maintain Height and Width by yourself

Example:-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:adjustViewBounds="true"
        android:alpha="0.3"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/abcd" />
</RelativeLayout>

Upvotes: 2

Related Questions