Using picasso library with a circle image view

Question

I am looking at using the Picasso library to download an image from URL and pass this into circle image view, but since picasso requires that you pass in an actual imageView

Answer 1

I don't think you require CircleImageView library

You can implement Circular Transformation check the below gist

https://gist.github.com/julianshen/5829333

then

Picasso.with(activity).load(image link here)
     .transform(new CircleTransform()).into(ImageView);

Answer 2

Use this code to create Circular Imageview ....

public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return; 
    }
    Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();


    Bitmap roundBitmap =  getCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0,0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;
    if(bmp.getWidth() != radius || bmp.getHeight() != radius)
        sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
    else
        sbmp = bmp;
    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(),
            sbmp.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
            sbmp.getWidth() / 2+0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);


            return output;
}

}

Answer 3

Use This

Activity Class

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String imageUrl = "https://www.baby-connect.com/images/baby2.gif";

        CircleImageView imageView = (CircleImageView) findViewById(R.id.image);

        Picasso.with(getApplicationContext()).load(imageUrl)
                .placeholder(R.drawable.images).error(R.drawable.ic_launcher)
                .into(imageView);
    }
}

Layout File

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/image"
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_centerInParent="true"
    android:src="@drawable/images"
    app:border_color="#ffffff"
    app:border_width="2dp" />

This is Working fine.

Answer 4

I have created a target class that uses native Android's RoundedBitmapDrawable class to make image round (removes the need to add a circle transform class to code), see solution below:

public class RoundedImageBitmapTarget implements Target {

    private final Context context;
    private final ImageView view;

    public RoundedImageBitmapTarget(Context context, ImageView view) {
        this.context = context;
        this.view = view;
    }

    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        setBitmap(bitmap);
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        setBitmap(((BitmapDrawable) errorDrawable).getBitmap());
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        setBitmap(((BitmapDrawable) placeHolderDrawable).getBitmap());
    }

    public void setBitmap(Bitmap bitmap) {
        view.setImageDrawable(getRoundBitmap(context, bitmap));
    }

    public static RoundedBitmapDrawable getRoundBitmap(Context context, Bitmap bitmap) {
        Resources res = context.getResources();
        RoundedBitmapDrawable round = RoundedBitmapDrawableFactory.create(res, bitmap);
        round.setCircular(true);
        round.setTargetDensity(context.getResources().getDisplayMetrics());
        return round;
    }

    public static void load(Context context, ImageView view, String url, int size, @DrawableRes int placeholder) {
        RoundedImageBitmapTarget target;
        Picasso.with(context).load(url)
                .resize(0, size)
                .placeholder(placeholder)
                .error(placeholder)
                .into(target = new RoundedImageBitmapTarget(context, view));
        view.setTag(target);
    }

}

Answer 5

Take the ID of CircleImageView first :

CircleImageView mCircleImageView = (CircleImageView)findViewById(R.id.circleImageView);

And pass the ID to Picasso library :

Picasso.with(mContext).load(Uri.parse(link)).placeholder(drawable).into(mCircleImageView);

This worked for me.