resize image inside imageview

[orenk86]

Hi, First of all, thanks for this library. I'm really enjoying it! :)

I have an image that is loaded from the web, and needs to be displayed in a circular frame. The problem is, I need the image to fit entirely inside the circular frame. I have tried adding margins, padding, scaling etc. but the circular frame always changes its size as well as the image itself. Here's the code I'm using:

public void setImageURL(String url) { DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true).cacheOnDisk(true).displayer(new RoundedBitmapDisplayer(cornerRadius)).build(); ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(this.getContext()).defaultDisplayImageOptions(options).build(); if (!ImageLoader.getInstance().isInited()) { ImageLoader.getInstance().init(config); } ImageLoader.getInstance().displayImage(url, this, options); }

here's a screenshot, if you have trouble reading the text:

Any suggestions on how to solve this? Thanks!

[Sai628]

Here is my solution:

new a class OvaledBitmapDisplayer implement BitmapDisplayer

public class OvaledBitmapDisplayer implements BitmapDisplayer
{
    @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.setImageBitmap(BitmapTool.toOvalBitmap(bitmap));
    }
}

public class BitmapTool
{
    public static Bitmap toOvalBitmap(Bitmap bitmap)
    {
        if (bitmap != null)
        {
            Bitmap output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getWidth(), Config.ARGB_8888);
            Canvas canvas = new Canvas(output);
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
            RectF rectF = new RectF(rect);

            canvas.drawOval(rectF, paint);
            paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
            canvas.drawBitmap(bitmap, rect, rectF, paint);

            return output;
        }

        return null;
}

then using like that:

DisplayImageOptions logoDisplayOptions = new DisplayImageOptions.Builder()
                                                .resetViewBeforeLoading(true)
                                                .showImageOnLoading(R.drawable.icon_logo_default)
                                                .showImageForEmptyUri(R.drawable.icon_logo_default)
                                                .showImageOnFail(R.drawable.icon_logo_default)
                                                .cacheOnDisk(true)
                                                .cacheInMemory(true)
                                                .bitmapConfig(Bitmap.Config.ARGB_8888)
                                                .displayer(new OvaledBitmapDisplayer()).build();

ImageLoader.getInstance().displayImage(uri, imageView, options);

btw: you can add frame parameter to the method "toOvalBitmap(Bitmap bitmap)", if bitmap.getWidth() isn't equal to bitmap.getHeight() and you need the image to fit entirely inside the circular frame.

Hope it'll useful to you.

[orenk86]

Thanks for your help @Sai628 ! I tried your solution (which looks awesome, btw) and added a frame parameter to the toOvalBitmap like you said (because I handle images of different sizes and aspect ratios. the only thing constant is the size of the circular frame). But for some reason, each imageview I use it on turns out to be in a different size and position (and so are their frames as well), and the images are never centered...

For now, I switched to using 2 imageviews on top of each other (one is a regular web image, the other is just a white circle), but I'd love to give your solution another try (perhaps even wrap it up into a nice utility to use in future projects). Any idea why I might be experiencing this issue?

Thanks again!