Glide Transformation of GIF Image

[ixsans]

I have a problem when try to load GIF image into an ImageView with a Circle Transformation.
If I load GIF image without transformation, the image is loaded without any problem and the GIF animation works. But, when I try to perform Circle Transformation to the image, the animation work, but the transformation (circle crop) doesn't work.

This is the GIF image:

And this is what I want (Image is crooped, but also it should be run):

I observed that the Circle Transformation is performed before GIF image frame fully loaded so the image become circle. But when it has loaded, the image become square again.

here is my code:

  Glide.with(context)
                .load(imageURL)
                .placeholder(R.drawable.default_avatar)
                .transform(new CircleTransform(context))
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(imageView);

CircleTransform

public class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);


        int borderWidth = 3;
        int borderColor = 0xffffffff;

        final Paint paint2 = new Paint();
        paint2.setAntiAlias(true);
        paint2.setColor(borderColor);
        paint2.setStrokeWidth(borderWidth);
        paint2.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(source.getWidth() / 2, source.getHeight() / 2, (float) (source.getWidth() / 2 - Math.ceil(borderWidth / 2)), paint2);

        return result;
    }

    @Override
    public String getId() {
        return getClass().getName();
    }
}

[sjudd]

I can reproduce this as well, definitely a bug. I'll look in to doing a dot release to fix this, thanks for the report!

[sjudd]

Should be fixed here: 5884d2d

See the Snapshots wiki if you want to try out the fix (you want 3.7.0-SNAPSHOT)

[wasabeef]

+1