Show Blur Image Using Glide library

Question

i'm trying to show blur image using Glide but instead showing error images.i have no idea why it is show error image.URL is working fine but still it is showing error image only

here is my code

 Glide.with(context)
                .load("http://www.gadgetsaint.com/wp-content/uploads/2016/11/cropped-web_hi_res_512.png")
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .bitmapTransform(new BlurTransformation(context))
                .error(R.drawable.error_image)
                .into(imageView);

BlurTransformation Class:

public class BlurTransformation extends BitmapTransformation {

private RenderScript rs;

public BlurTransformation(Context context) {
    super(context);

    rs = RenderScript.create(context);
}

@SuppressLint("NewApi")
@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    Bitmap blurredBitmap = toTransform.copy(Bitmap.Config.ARGB_8888, true);

    // 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(100);

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

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

    toTransform.recycle();

    return blurredBitmap;
}

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

Deepak Rajput · Answer 1 · 2020-05-05T04:30:32.210

21

Add this library : implementation 'jp.wasabeef:glide-transformations:4.0.0 For latest version always check change log from here Glide transformation
And where u need to blur image apply this code in your view

    Glide.with(this)
     .load(R.drawable.demo)
     .apply(bitmapTransform(BlurTransformation(25, 3)))
     .into(imageView)

edited May 05 '20 at 04:30

answered Dec 27 '18 at 07:58

Deepak Rajput

731
6
20

Nice check the changeLog to get the latest version :) – Steve Moretz Feb 10 '19 at 08:34
is this library open source to use? – Silambarasan Nov 23 '19 at 13:35
Yes it is opensource. – Deepak Rajput Nov 28 '19 at 09:35
But this blur effect doesn't affect to the edges. – c-an Jun 21 '20 at 12:14

score 4 · Answer 2 · answered Jan 07 '20 at 08:27

maybe someone will be useful, the latest version - just Glide:

-add to app gradle:

implementation("com.github.bumptech.glide:glide:4.9.0") {
    exclude group: "com.android.support"
}
kapt 'com.github.bumptech.glide:compiler:4.9.0'

-in your layout:

    <ImageView
    android:id="@+id/ivBlurred"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    tools:ignore="ContentDescription" />

-in class, where you add your image:

 Glide.with(context)
            .asBitmap()
            .load(R.drawable.temp_full_screen_image) // or url
            .transform(BlurTransformation(context))
            .into(ivBlurred)

-and finally:

import android.content.Context
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.renderscript.*
import android.renderscript.RenderScript.RSMessageHandler
import androidx.annotation.ColorInt
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool
import com.bumptech.glide.load.resource.bitmap.BitmapResource
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation
import java.security.MessageDigest

private const val DEFAULT_DOWN_SAMPLING = 0.5f

class BlurTransformation(private val context: Context) : BitmapTransformation() {

    override fun transform(pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int): Bitmap? {
        val source: Bitmap = toTransform
        val scaledWidth = (source.width * DEFAULT_DOWN_SAMPLING).toInt()
        val scaledHeight = (source.height * DEFAULT_DOWN_SAMPLING).toInt()
        val bitmap = pool[scaledWidth, scaledHeight, Bitmap.Config.ARGB_8888]
        return BitmapResource.obtain(this.blurBitmap(context, source, bitmap, Color.argb(90, 255, 255, 255)), pool)?.get()
    }

    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        messageDigest.update("blur transformation".toByteArray())
    }

    @Synchronized
    fun blurBitmap(context: Context, source: Bitmap?, bitmap: Bitmap, @ColorInt colorOverlay: Int): Bitmap? {
        if (source == null) return bitmap
        Canvas(bitmap).apply {
            scale(DEFAULT_DOWN_SAMPLING, DEFAULT_DOWN_SAMPLING)
            drawBitmap(source, 0f, 0f, Paint().apply {
                flags = Paint.FILTER_BITMAP_FLAG
            })
            drawColor(colorOverlay)
        }
        return try {
            blur(context, bitmap)
        } catch (e: RSRuntimeException) {
            e.printStackTrace()
            bitmap
        }
    }

    @Throws(RSRuntimeException::class)
    private fun blur(context: Context, bitmap: Bitmap): Bitmap {
        var rs: RenderScript? = null
        var input: Allocation? = null
        var output: Allocation? = null
        var blur: ScriptIntrinsicBlur? = null
        try {
            rs = RenderScript.create(context)
            rs.messageHandler = RSMessageHandler()
            input = Allocation.createFromBitmap(rs, bitmap, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT)
            output = Allocation.createTyped(rs, input.type)
            blur = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)).apply {
                setInput(input)
                setRadius(25f)
                forEach(output)
            }
            output.copyTo(bitmap)
        } finally {
            rs?.destroy()
            input?.destroy()
            output?.destroy()
            blur?.destroy()
        }
        return bitmap
    }
}

Great answer but deprecated in api31 needs to be updated – Eren Tüfekçi Feb 07 '22 at 10:48 — Eren Tüfekçi, Feb 07 '22 at 10:48

Zero · Answer 3 · 2021-08-31T04:35:38.663

3

If you got a red line under the:

 .apply(bitmapTransform(new BlurTransformation(22)))

Just add the RequestOptions

.apply(RequestOptions.bitmapTransform(new BlurTransformation(22)))

edited Aug 31 '21 at 04:35

answered Aug 30 '21 at 06:17

Zero

51
5

1

Why might I prefer this over the existing answers? Please edit your answer to offer an explanation. – Jeremy Caney Aug 31 '21 at 00:37

score 3 · Answer 4 · answered Jun 13 '22 at 14:30

3

This may help you.

 Glide.with(context)
    .load(yourUrl)
    .placeholder(yourPlaceholder)
    .override(20,20)
    .into(imageView);

answered Jun 13 '22 at 14:30

gaurav kumar

368
2
8

This does not blur, this overrides the size of the image and makes it very pixelated, it sort of looks like a blur but its not, its very unprofessional looking if you do this. – Robby Lebotha Mar 07 '23 at 08:52

Rakesh Verma · Answer 5 · 2018-12-27T06:53:44.797

For Glide V3 ,

 Glide.with(context).load(imagePath).transform(new BlurTransformation(context))
                                        .into(imageView);

I am using this Class for Blur Transformation

public class BlurTransformation extends BitmapTransformation {

private RenderScript rs;

public BlurTransformation(Context context) {
    super( context );

    rs = RenderScript.create( context );
}

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    Bitmap blurredBitmap = toTransform.copy( Bitmap.Config.ARGB_8888, true );

    // 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(10);

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

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

    toTransform.recycle();

    return blurredBitmap;
}

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

}

Show Blur Image Using Glide library

5 Answers5

Linked