CODEWITHSUNDEEP
android
tsiro
tsiro

Reputation: 2393

glide rounded corner transform issue

i use the following code to load an image with rounded corners into imageview using glide:

Glide.with(this)
                .load(url)
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        return false;
                    }
                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        return false;
                    }
                })
                .transition(withCrossFade())
                .apply(new RequestOptions().transform(new RoundedCorners(50)).error(R.drawable.default_person).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.NONE))
                .into(mBinding.profileImgv);

enter image description here images get pixelized for some reason. Can somebody tell me where is the problem?

Upvotes: 77

Views: 86781

Answers (13)

Gulshan Kumar
Gulshan Kumar

Reputation: 1

 Glide.with(getContext())              
.setDefaultRequestOptions(requestOptions)             
.load("URL Here")             
 .apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
.into("Your View reference")

Upvotes: -1

Soumya Ranjan Sr.
Soumya Ranjan Sr.

Reputation: 11

Glide.with(this)
            .load(user.getPhotoUrl())
            .centerCrop()
            .apply(RequestOptions.bitmapTransform(new RoundedCorners(150)))//this line of code help to rounded the image to circle`enter code here`
            .placeholder(R.mipmap.ic_launcher)
            .into(userPic);

Upvotes: 1

zedlabs
zedlabs

Reputation: 523

For Glide v4.9 the following transformation works fine:

Glide.with(holder.imageView.context)
        .load(myDataset[position])
        .transform(CenterInside(),RoundedCorners(24))
        .into(holder.imageView)

enter image description here

Upvotes: 28

H.Fa8
H.Fa8

Reputation: 318

on Kotlin:

       Glide.with(applicationContext)
            .load("YourUrl")
            .centerCrop()
            .apply(RequestOptions.bitmapTransform(RoundedCorners(12)))
            .into(imgTest)

Upvotes: 3

Emad Razavi
Emad Razavi

Reputation: 2113

To simply add corners in Glide version 4, just use this simple spinnet:

val cornerRadius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)

Glide.with(this)
    .asBitmap()
    .load(image)
    .apply(RequestOptions.bitmapTransform(RoundedCorners(cornerRadius)))
    .into(imageView)

Upvotes: 1

Samad Talukder
Samad Talukder

Reputation: 1012

For Glide v4.9 transformation (java):

Glide.with(this)
            .load(R.drawable.sample)
            .transform(new CenterCrop(),new RoundedCorners(25))
            .into(image);

Upvotes: 49

Sir Codesalot
Sir Codesalot

Reputation: 7293

As you can see in my answer here, it can also be achieved using Glide's Generated API. It takes some initial work but then gives you all the power of Glide with the flexibility to do anything because you write the actual code so I think it's a good solution for the long run. Plus, the usage is very simple and neat.

First, setup Glide version 4+:

implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'

Then create Glide's app module class to trigger the annotation processing:

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

Then create the Glide extension which actually does the work. You can customize it to do whatever you want:

@GlideExtension
public class MyGlideExtension {

private MyGlideExtension() {}

    @NonNull
    @GlideOption
    public static RequestOptions roundedCorners(RequestOptions options, @NonNull Context context, int cornerRadius) {
        int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return options.transforms(new RoundedCorners(px));
    }
}

After adding these files, build your project.

Then use it in your code like this:

GlideApp.with(this)
    .load(imageUrl)
    .roundedCorners(getApplicationContext(), 5)
    .into(imageView);

Upvotes: 6

algrid
algrid

Reputation: 5954

This is what worked for me (generated API, Glide 4.9, Kotlin):

GlideApp.with(imageView)
    .load(pictureUri)
    .transform(CenterCrop(), RoundedCorners(8))
    .into(imageView)

Found here: https://github.com/wasabeef/glide-transformations/issues/94

Upvotes: 11

Savad
Savad

Reputation: 1622

in Glide V4

Try like this

 Glide.with(this.context)
                .load(url)
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
                .into(ImageView);

Upvotes: 69

android developer
android developer

Reputation: 116000

I've made a bit modified version of a similar solution for this (here and here) , and in Kotlin .

Example of usage:

val borderWidth= TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, context.resources.displayMetrics).toInt()
Glide.with(activity)
      .asBitmap()
      .load(photoUrl)
      .apply(RequestOptions.centerCropTransform())
      .apply(RequestOptions.bitmapTransform(RoundedCornersTransformation(activity, iconRoundedCornersRadius, 0, 0xff999999.toInt(), borderWidth)))
      .into(object : BitmapImageViewTarget(imageView) {
                                    override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                                        super.onResourceReady(resource, transition)
                                        //do something if needed
                                    }
                                })

RoundedCornersTransformation.kt

class RoundedCornersTransformation @JvmOverloads constructor(private val bitmapPool: BitmapPool, private val radius: Int, private val margin: Int,
                                                             private val cornerType: CornerType = CornerType.ALL) : Transformation<Bitmap> {
    private val diameter: Int = radius * 2
    private var color = Color.BLACK
    private var border: Int = 0

//    val id: String
//        get() = ("RoundedTransformation(radius=" + radius + ", margin=" + margin + ", diameter="
//                + diameter + ", cornerType=" + cornerType.name + ")")

    enum class CornerType {
        ALL,
        TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
        TOP, BOTTOM, LEFT, RIGHT,
        OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT,
        DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT, BORDER
    }

    constructor(context: Context, radius: Int, margin: Int, @ColorInt color: Int, border: Int) : this(context, radius, margin, CornerType.BORDER) {
        this.color = color
        this.border = border
    }

    @JvmOverloads
    constructor(context: Context, radius: Int, margin: Int,
                cornerType: CornerType = CornerType.ALL) : this(Glide.get(context).bitmapPool, radius, margin, cornerType)

    override fun transform(context: Context, resource: Resource<Bitmap>, outWidth: Int, outHeight: Int): Resource<Bitmap> {
        val source = resource.get()
        val width = source.width
        val height = source.height
        var bitmap: Bitmap? = bitmapPool.get(width, height, Bitmap.Config.ARGB_8888)
        if (bitmap == null)
            bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap!!)
        val paint = Paint()
        paint.isAntiAlias = true
        paint.shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        drawRoundRect(canvas, paint, width.toFloat(), height.toFloat())
        return BitmapResource.obtain(bitmap, bitmapPool)!!
    }

    private fun drawRoundRect(canvas: Canvas, paint: Paint, width: Float, height: Float) {
        val right = width - margin
        val bottom = height - margin
        when (cornerType) {
            RoundedCornersTransformation.CornerType.ALL -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
            RoundedCornersTransformation.CornerType.TOP_LEFT -> drawTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.TOP_RIGHT -> drawTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM_LEFT -> drawBottomLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM_RIGHT -> drawBottomRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.TOP -> drawTopRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM -> drawBottomRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.LEFT -> drawLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.RIGHT -> drawRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_TOP_LEFT -> drawOtherTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_TOP_RIGHT -> drawOtherTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_BOTTOM_LEFT -> drawOtherBottomLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_BOTTOM_RIGHT -> drawOtherBottomRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_LEFT -> drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_RIGHT -> drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BORDER -> drawBorder(canvas, paint, right, bottom)
//            else -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
        }
    }

    private fun drawTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), (margin + radius).toFloat(), bottom), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
        canvas.drawRect(RectF(right - radius, (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom - radius), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
        canvas.drawRect(RectF(right - radius, margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawTopRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBottomRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
    }

    private fun drawOtherTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
    }

    private fun drawOtherTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawOtherBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - radius, bottom), paint)
    }

    private fun drawOtherBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawDiagonalFromTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - diameter, bottom), paint)
        canvas.drawRect(RectF((margin + diameter).toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawDiagonalFromTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBorder(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        // stroke
        val strokePaint = Paint()
        strokePaint.style = Paint.Style.STROKE
        strokePaint.color = color
        strokePaint.strokeWidth = border.toFloat()
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
        // stroke
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), strokePaint)
    }


    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
    }
}

Upvotes: -1

Gautam Kumar
Gautam Kumar

Reputation: 399

There is a change in Sir Codesalot answer

Instead of doing this

GlideApp.with(this)
            .load(imageUrl)
            .roundedCorners(getApplicationContext(), 5)
            .into(imageView);

Do this

Glide.with(holder.ivBook.context)
            .load(timeline.bookImageUrl)
            .apply(MyGlideExtension.roundCorners(new RequestOptions, holder.ivBook.context, 10))
            .into(holder.ivBook)

`

Upvotes: 0

Mondok Tamas
Mondok Tamas

Reputation: 1054

I had the same issue, the problem in my case was the image what i've tried to load had less size in pixels (320x480), then the ImageView size in pixels. My solution was the following:

My ImageView in the xml file:

    <ImageView
    android:id="@+id/image_program_thumb"
    android:layout_width="match_parent"
    android:layout_height="186dp" />

ProgramViewHolder.java class

@BindView(R.id.image_program_thumb) ImageView mProgramThumbnail;
.....
void bindData(final Program item) {
    RequestOptions requestOptions = new RequestOptions();
    requestOptions = requestOptions.transforms(new CenterCrop(), new RoundedCorners(16));
    Glide.with(itemView.getContext())
            .load(item.getImage())
            .apply(requestOptions)
            .into(mProgramThumbnail);
....

}

P.S. I use 4.2.0 version of Glide

Upvotes: 103

AskNilesh
AskNilesh

Reputation: 69724

Glide.with(context).load(url).centerCrop().into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });

Upvotes: 0

Related Questions