Universal image loader roundedBitmapDisplayer issues

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,

Janellejanene

In that library, Its provide property for rounded bitmap display. Have you checked? – Cantoris

Answer 1

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

Billbillabong

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.

Horologium

i'm getting 120*120 pixels from API. All the image will come same size – Janellejanene

then set the rounded bitmap displayer to 60. If you want a circular image in anything the border size is just going to be the radius. – Horologium

Answer 3

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.

Boyceboycey

Answer 4

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.

Gooey

Is there supposed to be a space in 'that iRadiusDp'? It is saying that it cannot resolve the method. – Georgiannegeorgic

@PatMyron the method is cornerRadiusDp. Don't remember why I wrote "iRadiusDp". – Gooey

Answer 5

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

Greenbelt

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.

Trahurn