How to add Round shaped image using universal image loader in android

Question

i am trying to add Round shaped image to my to my layout using Universal Image Loader below is my imageUtil.class

import android.graphics.Bitmap.Config;
import android.widget.ImageView;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;

import zesteve.com.myapplication.R;


public class ImageUtil {

    public static void displayImage(ImageView view, String path, ImageLoadingListener listener) {
        ImageLoader loader = ImageLoader.getInstance();
        try {
            loader.displayImage(path, view, DEFAULT_DISPLAY_IMAGE_OPTIONS, listener);
        } catch (OutOfMemoryError e) {
            e.printStackTrace();
            loader.clearMemoryCache();
        }
    }

    public static void displayRoundImage(ImageView view, String path, ImageLoadingListener listener) {
        ImageLoader loader = ImageLoader.getInstance();
        try {
            loader.displayImage(path, view, ROUND_DISPLAY_IMAGE_OPTIONS, listener);
        } catch (OutOfMemoryError e) {
            e.printStackTrace();
            loader.clearMemoryCache();
        }
    }

    public static void loadImage(String path, ImageLoadingListener listener) {
        ImageLoader loader = ImageLoader.getInstance();
        try {
            loader.loadImage(path, DEFAULT_DISPLAY_IMAGE_OPTIONS, listener);
        } catch (OutOfMemoryError e) {
            e.printStackTrace();
        }
    }

    //TODO Change default image
    private static final DisplayImageOptions.Builder DEFAULT_DISPLAY_IMAGE_OPTIONS_BUIDLER = new DisplayImageOptions.Builder()
            .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2)
            .displayer(new FadeInBitmapDisplayer(300, true, false, false))
            .showImageForEmptyUri(R.drawable.applogo)
            .showImageOnLoading(R.drawable.applogo)
            .showImageOnFail(R.drawable.applogo).cacheOnDisk(true)
            .cacheInMemory(true).bitmapConfig(Config.ARGB_8888);

    private static final DisplayImageOptions DEFAULT_DISPLAY_IMAGE_OPTIONS = DEFAULT_DISPLAY_IMAGE_OPTIONS_BUIDLER
            .build();
    private static final DisplayImageOptions ROUND_DISPLAY_IMAGE_OPTIONS = DEFAULT_DISPLAY_IMAGE_OPTIONS_BUIDLER
            .displayer(new RoundedBitmapDisplayer(500)).build();
}

and my layout contain the bellow code

           <ImageView
            android:id="@+id/profimage"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_margin="20dp" />

in my main activity

ImageView profilepic;

profilepic = (ImageView) findViewById(R.id.profimage);
        String imageUri = "http://pengaja.com/uiapptemplate/newphotos/profileimages/0.jpg";
        ImageUtil.displayRoundImage(profilepic,imageUri,null);

in app grandle

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

this is the code which i am having. my concern is in drawer layout i want to show a Rounded profile pic.

please comment if there any doubt.

Answer 1

Try this short code it works for me:

RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(Activity.this.getResources(), yourbitmap);
roundedBitmapDrawable.setCircular(true);
your imageview.setImageDrawable(roundedBitmapDrawable);

Answer 2

Try this it will work

 <com.androidhub4you.crop.RoundedImageView
        android:id="@+id/imageView_round"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/ic_launcher" />

http://www.androidhub4you.com/2014/10/android-custom-shape-imageview-rounded.html

Answer 3

As the OP wants I'm Posting the code for picasso..

Add this dependancy..

compile 'com.squareup.picasso:picasso:2.5.2'

Use this code to load image on Imageview.

Picasso.with(context)
      .load(url)              //Url in string format
      .placeholder(R.drawable.user_placeholder)
      .error(R.drawable.user_placeholder_error)
      .into(imageView);

Above code does not produce circle image its just load image from url and add to image view.. To produce circle image you can add this circle transform class to your utils

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;

import com.squareup.picasso.Transformation;

public class CircleTransform implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

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

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        BitmapShader shader = new BitmapShader(squaredBitmap,
            BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);

        squaredBitmap.recycle();
        return bitmap;
    }

    @Override
    public String key() {
        return "circle";
    }
}

Now just little modification in the above code for getting circle image

Picasso.with(context)
  .load(url)              //Url in string format
  .placeholder(R.drawable.user_placeholder)
  .error(R.drawable.user_placeholder_error)
  .transform(new CircleTransform())
  .into(imageView);

Now Image is load as a circle image

For more info about Picasso See this official Page