CODEWITHSUNDEEP
androidandroid-glide
user10299469
user10299469

Reputation:

Show Blur Image Using Glide library

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";
}
}

Upvotes: 9

Views: 25087

Answers (5)

Cypher
Cypher

Reputation: 357

This may help you.

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

Upvotes: 3

Zero
Zero

Reputation: 51

If you got a red line under the:

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

Just add the RequestOptions

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

Upvotes: 3

Deepak Rajput
Deepak Rajput

Reputation: 761

  1. Add this library : implementation 'jp.wasabeef:glide-transformations:4.0.0 For latest version always check change log from here Glide transformation
  2. 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)

Upvotes: 22

Vladyslav Ulianytskyi
Vladyslav Ulianytskyi

Reputation: 2541

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
    }
}

Upvotes: 5

Rakesh Verma
Rakesh Verma

Reputation: 806

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";
}

}

Upvotes: 2

Related Questions