Not able to use glide-transformations ON Glide 4.4

Question

I searched everywhere but since Glide has released version 4.4. I can not find a way to apply RoundedCornersTransformation any more. I am using glide-transformations and there is not a correct solution available even on their Github forum as well.

Previously:

GlideApp.with(context)
.load(url)
.transforms(new CenterCrop(), new RoundedCorners(radius))
.into(imageView);

Then with an update it has to be called like this:

Glide.with(context)
   .load(url)
   .apply(new RequestOptions().transforms(new CenterCrop(), new RoundedCorners(radius)))
   .into(imageView);

But with Glide 4.4 I am facing an issue that :

1: Transformation is not applied at all.

2: if I try to use the .transforms API it seems like it is not available anymore!

Please reply if anyone can help. I will post my reply if found one!

Answer 1

Here is what I read on the github opened issues of the project.

you can use Glide's RoundedCorners transformation. And please note that centerCrop() is overriding previous transformations. So you can use:

 Glide.with(context)
   .load(url)
   .apply(new RequestOptions().transforms(new CenterCrop(), new RoundedCorners(radius)))
   .into(imageView);

But unfortunately Glide has no transforms() but has only transform() method.

Hence, I checked my code and found that in my ImageView I was using:

android:scaleType="centerCrop"

As a result my Transform was being overridden by this property, just what is mentioned in the comment from the forum above.

centerCrop() is overriding previous transformations

Final Solution: I removed scaleType="centerCrop" from ImageView in layout xml and wrote my code as such.

RequestOptions options = new RequestOptions();
                options.placeholder(R.drawable.place_holder)
                        .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                        .error(R.drawable.error_place_holder)
                        .transform(new CenterCrop())
                        .transform(new RoundedCorners(corner_size));

                Glide.with(mActivity).load(url)
                        .apply(options)
                        .into(image_view);

Voila! It worked!

Note: centerCrop() may work differently for different use cases.

Answer 2

According to description given in GitHub here https://github.com/bumptech/glide , use this.

Round Pictures: CircleImageView/CircularImageView/RoundedImageView are known to have issues with TransitionDrawable (.crossFade() with .thumbnail() or .placeholder()) and animated GIFs, use a BitmapTransformation (.circleCrop() will be available in v4) or .dontAnimate() to fix the issue.

Hope this Help.

Edit : I have tried what you want , have look below . Used https://github.com/bumptech/glide and https://github.com/wasabeef/glide-transformations .

MainActivity.java

package com.demo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

public class MainActivity extends AppCompatActivity {

ImageView imageView, imageView2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    imageView = (ImageView) findViewById(R.id.imageView);
    imageView2 = (ImageView) findViewById(R.id.imageView2);


   Glide.with(this).load(R.mipmap.company_bg)
            .apply(RequestOptions.bitmapTransform(new CircleCrop()))
            .into(imageView);

   //this also works for Circle crop as above
     //Glide.with(this).load(R.mipmap.company_bg)
     //       .apply(RequestOptions.circleCropTransform())
     //       .into(imageView);


    Glide.with(this).load(R.mipmap.company_bg)
            .apply(RequestOptions.bitmapTransform(new RoundedCornersTransformation(45, 0, RoundedCornersTransformation.CornerType.ALL)))
            .into(imageView2);

  }
}

In build.gradle file

 implementation 'com.github.bumptech.glide:glide:4.4.0'
 implementation 'jp.wasabeef:glide-transformations:3.0.1'

And here is screenshot what image look like.

Answer 3

Try This:

Glide.with(CreateRecipe.this)
    .load(yourbitmap)
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .placeholder(R.drawable.yourplaceholder)
    .transform(new CenterCrop(), new Rotate(90))
    .into(yourimageviewer);

Answer 4

I am using newer version of glide and i have achieved RoundCornerTransformation Using this code. Check this if it can help you..

Put this java class in your constant files

public class RoundedCornersTransformation implements Transformation<Bitmap> {

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

  private BitmapPool mBitmapPool;
  private int mRadius;
  private int mDiameter;
  private int mMargin;
  private CornerType mCornerType;

  public RoundedCornersTransformation(Context context, int radius, int margin) {
    this(context, radius, margin, CornerType.ALL);
  }

  public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) {
    this(pool, radius, margin, CornerType.ALL);
  }

  public RoundedCornersTransformation(Context context, int radius, int margin,
      CornerType cornerType) {
    this(Glide.get(context).getBitmapPool(), radius, margin, cornerType);
  }

  public RoundedCornersTransformation(BitmapPool pool, int radius, int margin,
      CornerType cornerType) {
    mBitmapPool = pool;
    mRadius = radius;
    mDiameter = mRadius * 2;
    mMargin = margin;
    mCornerType = cornerType;
  }

  @Override
  public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) {
    Bitmap source = resource.get();

    int width = source.getWidth();
    int height = source.getHeight();

    Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888);
    if (bitmap == null) {
      bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
    drawRoundRect(canvas, paint, width, height);
    return BitmapResource.obtain(bitmap, mBitmapPool);
  }

  private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) {
    float right = width - mMargin;
    float bottom = height - mMargin;

    switch (mCornerType) {
      case ALL:
        canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint);
        break;
      case TOP_LEFT:
        drawTopLeftRoundRect(canvas, paint, right, bottom);
        break;
      case TOP_RIGHT:
        drawTopRightRoundRect(canvas, paint, right, bottom);
        break;
      case BOTTOM_LEFT:
        drawBottomLeftRoundRect(canvas, paint, right, bottom);
        break;
      case BOTTOM_RIGHT:
        drawBottomRightRoundRect(canvas, paint, right, bottom);
        break;
      case TOP:
        drawTopRoundRect(canvas, paint, right, bottom);
        break;
      case BOTTOM:
        drawBottomRoundRect(canvas, paint, right, bottom);
        break;
      case LEFT:
        drawLeftRoundRect(canvas, paint, right, bottom);
        break;
      case RIGHT:
        drawRightRoundRect(canvas, paint, right, bottom);
        break;
      case OTHER_TOP_LEFT:
        drawOtherTopLeftRoundRect(canvas, paint, right, bottom);
        break;
      case OTHER_TOP_RIGHT:
        drawOtherTopRightRoundRect(canvas, paint, right, bottom);
        break;
      case OTHER_BOTTOM_LEFT:
        drawOtherBottomLeftRoundRect(canvas, paint, right, bottom);
        break;
      case OTHER_BOTTOM_RIGHT:
        drawOtherBottomRightRoundRect(canvas, paint, right, bottom);
        break;
      case DIAGONAL_FROM_TOP_LEFT:
        drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom);
        break;
      case DIAGONAL_FROM_TOP_RIGHT:
        drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom);
        break;
      default:
        canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint);
        break;
    }
  }

  private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
        mRadius, mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
  }

  private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
        mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
    canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), paint);
  }

  private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
        mRadius, mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
  }

  private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
        mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
    canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint);
  }

  private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), paint);
  }

  private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), paint);
  }

  private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint);
  }

  private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint);
  }

  private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint);
  }

  private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
        paint);
    canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), paint);
  }

  private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
        paint);
    canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), paint);
  }

  private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right,
      float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius,
        paint);
    canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius,
        paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint);
  }

  private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right,
      float bottom) {
    canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter),
        mRadius, mRadius, paint);
    canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius,
        mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), paint);
    canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), paint);
  }

  private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right,
      float bottom) {
    canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius,
        mRadius, paint);
    canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom),
        mRadius, mRadius, paint);
    canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint);
    canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint);
  }

  @Override public String getId() {
    return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter="
        + mDiameter + ", cornerType=" + mCornerType.name() + ")";
  }
}

Use this code to apply transformation

 Glide.with(this)
                .load("url")
                ..bitmapTransform(new RoundedCornersTransformation(context, 4, 0,
                    RoundedCornersTransformation.CornerType.ALL))
                .into(imageView);

That "4" is shows corner radius for round shape... Hope this will help you if not than let me know...

Answer 5

The important part is combining the transforms. I was able to get centerCrop and RoundedCorners working at the same time using the following block:

                            GlideApp.with(context)
                                    .load(glideUrl)
                                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                                    .placeholder(R.drawable.ic_placeholder)
                                    .transforms(new CenterCrop(), new RoundedCorners(1))
                                    .into(holder.imageView);