Universal image loader roundedBitmapDisplayer issu

Question

I'm using latest universal-image-loader-1.9.2-SNAPSHOT-with-sources.jar file. Its working fine. I want to change image to round(Circle). I have used following display options.

             DisplayImageOptions userimgoptions = new DisplayImageOptions.Builder()
                           .displayer(new RoundedBitmapDisplayer(35))
                           .showImageOnLoading(android.R.color.transparent)
                           .showImageForEmptyUri(R.drawable.picture_info_profile_img)
                           .showImageOnFail(R.drawable.picture_info_profile_img)
                           .cacheInMemory(true).cacheOnDisc(true)
                           .bitmapConfig(Bitmap.Config.RGB_565).build();

its not working for some images. I have tested this into low and high resolution its not working.

Note : In my xml Imageview height and with(55 * 55).

please kindly help me how to resolve this issue. i cant resolve this issue.

Thanks,

Answer 1

As kingargyle said using RoundedImageView is the best approach and you can achieve what you want by just doing this:

Transformation transformation = new RoundedTransformationBuilder()
          .borderColor(Color.BLACK)
          .borderWidthDp(3)
          .cornerRadiusDp(30)
          .oval(false)
          .build();

Picasso.with(context)
    .load(url)
    .fit()
    .transform(transformation)
    .into(imageView);

So, if you don't need to costumize a lot of cache options, using Picasso instead of Universal Image Loader with RoundedImageView it's the best option.

Answer 2

If you want a rounded image you need to set the rounded bitmap displayer to the radius of the image which in your case is 1/2 55 or 27.5

DisplayImageOptions userimgoptions = new DisplayImageOptions.Builder()
                       .displayer(new RoundedBitmapDisplayer((int) 27.5f))
                       .showImageOnLoading(android.R.color.transparent)
                       .showImageForEmptyUri(R.drawable.picture_info_profile_img)
                       .showImageOnFail(R.drawable.picture_info_profile_img)
                       .cacheInMemory(true).cacheOnDisc(true)
                       .bitmapConfig(Bitmap.Config.RGB_565).build();

But it's probably not a good idea to hard code that, I would change the config when you actually get the bitmap and calculate the width.

Answer 3

The solution of Tim is good but in my case if the image is larger then taller the image is more oval than circle. Try this code, it works with every image size :

public class CircleBitmapDisplayer extends RoundedBitmapDisplayer {


public CircleBitmapDisplayer() {
    super(0);
}

@Override
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
    if (!(imageAware instanceof ImageViewAware)) {
        throw new IllegalArgumentException("ImageAware should wrap ImageView. ImageViewAware is expected.");
    }

    imageAware.setImageDrawable(new CircleDrawable(bitmap, margin));
}

public static class CircleDrawable extends RoundedDrawable {

    private Bitmap mBitmap;

    public CircleDrawable(Bitmap bitmap, int margin) {
        super(bitmap, 0, margin);
        this.mBitmap = bitmap;
    }

    @Override
    public void draw(Canvas canvas) {
        int radius = 0;
        if(mBitmap.getWidth() > mBitmap.getHeight()) {
            radius = mBitmap.getHeight() / 2;
        }else {
            radius = mBitmap.getWidth() / 2;
        }
        canvas.drawRoundRect(mRect, radius, radius, paint);
    }
}
}

Use it as a normal displayer:

DisplayImageOptions options = new DisplayImageOptions.Builder()
                    .displayer(new CircleBitmapDisplayer())
                    .cacheInMemory(true)
                    .cacheOnDisk(true)
                    .build();
ImageLoader.getInstance().displayImage(url, imageView,options);

Answer 4

If you want a circular image you can change .displayer(new RoundedBitmapDisplayer(25)) to .displayer(new RoundedBitmapDisplayer(1000)) which worked for me.

Answer 5

I've found the RoundedBitmpDisplayer to be pretty slow even with the latest rewrite. By far the fastest way I've found to get a Rounded corners consistently is to use RoundedImageView. https://github.com/vinc3m1/RoundedImageView You can pass that view into UIL and the view will take care of rounding the corners for you. You just specify the radius you want.

Answer 6

Use .displayer(new CircleBitmapDisplayer()) in DisplayImageOptions

along with

compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'

in you module level build.gradle.