Home » Android » android – glide rounded corner transform issue

android – glide rounded corner transform issue

Posted by: admin April 23, 2020 Leave a comment

Questions:

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?

How to&Answers:

I had the same issue, the problem in my case was the image what i’ve tried to load had less size in pixels (320×480), 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

Answer:

in Glide V4

Try like this

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

Answer:

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

Answer:

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);

Answer:

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

Answer:

For Glide v4.9 transformation (java):

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

Answer:

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

Answer:

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)

`

Answer:

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

Answer:

 Glide.with(mContext) .setDefaultRequestOptions(requestOptions) .load(home_pojo.getUser_photo()) .apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))