Glide: transform to a round bitmap not fill in Imageview

Created on 11 Dec 2015  路  2Comments  路  Source: bumptech/glide

in my code :

 Glide.with(getContext())
                    .load(mSocket.getDownloadURL() + entity.logo)
                    .transform(new GlideRoundTransform(getContext()))
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .into(holder.img);

GlideRoundTransform.java:

public class GlideRoundTransform extends BitmapTransformation {
    private static float radius = 12f;

    public GlideRoundTransform(Context context) {
        this(context, 12);
    }

    public GlideRoundTransform(Context context, int dp) {
        super(context);
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    }

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

    private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;
        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        }
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
        return result;
    }

    @Override
    public String getId() {
        return getClass().getName() + Math.round(radius);
    }
}

in some devices the ImageView maybe display like this:
Image
Image

question

Most helpful comment

I think it's simple: Both devices have full-hd screens (based on screenshot size), but one of them has an extra 100px+ padding at the bottom, those stupid on-screen controls decreasing screen real-estate. Given this, you're simply seeing scaleType="fitCenter" (default if not set) in action. (Open the two images in separate tabs and click back and forth between them.)

Notice that at the transformation you're keeping the size Glide has determined so you don't affect the Bitmap size. Remember that calling .transform() also turns off magic auto-transformations, so if you want to crop for example you need:

.transform(new CenterCrop(getContext()), new GlideRoundTransform(getContext())); // crop first to prevent cutoff of rounded corners

I gave the example of CenterCrop because FitCenter won't have any effect on display here (only memory usage!).

All 2 comments

I think it's simple: Both devices have full-hd screens (based on screenshot size), but one of them has an extra 100px+ padding at the bottom, those stupid on-screen controls decreasing screen real-estate. Given this, you're simply seeing scaleType="fitCenter" (default if not set) in action. (Open the two images in separate tabs and click back and forth between them.)

Notice that at the transformation you're keeping the size Glide has determined so you don't affect the Bitmap size. Remember that calling .transform() also turns off magic auto-transformations, so if you want to crop for example you need:

.transform(new CenterCrop(getContext()), new GlideRoundTransform(getContext())); // crop first to prevent cutoff of rounded corners

I gave the example of CenterCrop because FitCenter won't have any effect on display here (only memory usage!).

thanks,it work!

Was this page helpful?
0 / 5 - 0 ratings