Circular NetworkImageView for use with Volley. Creates a circular bitmap and uses whichever dimension is smaller to determine the radius. Also constrains the circle to the leftmost part of that image. Used in the same way as the Volley NetworkImageView, in both code and xml. Of course you'll need to include the Volley Library in you app too.

CircularNetworkImageView

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;

import com.android.volley.toolbox.NetworkImageView;

public class CircularNetworkImageView extends NetworkImageView {
	Context mContext;

	public CircularNetworkImageView(Context context) {
		super(context);
		mContext = context;
	}

	public CircularNetworkImageView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		mContext = context;
	}

	public CircularNetworkImageView(Context context, AttributeSet attrs,
			int defStyle) {
		super(context, attrs, defStyle);
		mContext = context;
	}

	@Override
	public void setImageBitmap(Bitmap bm) {
		if(bm==null) return;
		setImageDrawable(new BitmapDrawable(mContext.getResources(),
				getCircularBitmap(bm)));
	}

	/**
	 * Creates a circular bitmap and uses whichever dimension is smaller to determine the width
	 * <br/>Also constrains the circle to the leftmost part of the image
	 * 
	 * @param bitmap
	 * @return bitmap
	 */
	public Bitmap getCircularBitmap(Bitmap bitmap) {
		Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
				bitmap.getHeight(), Config.ARGB_8888);
		Canvas canvas = new Canvas(output);
		int width = bitmap.getWidth();
		if(bitmap.getWidth()>bitmap.getHeight())
			width = bitmap.getHeight();
		final int color = 0xff424242;
		final Paint paint = new Paint();
		final Rect rect = new Rect(0, 0, width, width);
		final RectF rectF = new RectF(rect);
		final float roundPx = width / 2;

		paint.setAntiAlias(true);
		canvas.drawARGB(0, 0, 0, 0);
		paint.setColor(color);
		canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

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

		return output;
	}

}

Please add a possibility to set transparent color as default src, it accepts only drawables for now.

How to use that? CircularNetworkImageView cn = new CircularNetworkImageView()??

The easiest is to use it in the XML. Looks at the docs for NetworkImageView if you want to create it in code

it should be able to be used the same way as the Volley NetworkImageView, using both code and xml. Of course you'll need to include the Volley Library in you app too

Thanks! Works very well!

Perfect !!!

Perfect thanks

works perfectly, thanks a lot.

Good job dude

Very sick !

Followed this . it is working fine . but i am getting one problem . i have set the width and height of image but i am not able to display the images in same size. some images are big and some are small

Thank you so much ;)

Worked fine... Thanks for sharing
if anybody is applying this code he has to apply the code both in XML and Activity. Like this...

In XML:->
<yourPackageName.CircularNetworkImageView android:layout_width="60dp" android:layout_height="60dp" android:id="@+id/userImgClass" />

In Activity:->
CircularNetworkImageView thumbnail = ((CircularNetworkImageView) convertView.findViewById(R.id.main_activity_listview_item_thumbnail));

if you don't use your package name in XML u'll get ClassCastException

Thanks for sharing... Saved a lot of my time! :)

My image is displayed circular but only 3/4th of it. the remaining is gone..

Thank you so much

Thanks for sharing! But setting the default image from resources, it is not rounded.

Thanks a lot.... It's working well.

Work perfect. when i add this to list view it overflow the memory. How can i avoid this?

The original "CircularNetworkImageView.java" class is not well organized to use in recyclerview or listview. It calculates different sizes for each image. I have edited the "getCircularBitmap" method of original class, in order to get same-sized and same-positioned circular imageviews in recyclerview, listview.

https://gist.github.com/zmeid/b36f94237dadd7242b3343db92e86376

It's working great! Thanks.

How can I use this to show image with corners in top left and bottom right only?

Ahhh. Thank you sooooo much

This is working perfectly..Thanks

Thanks..It works

Thanks. it works perfect.

How I can use this?

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/photo"
        android:layout_width="@dimen/sidebar_header_photo_size"
        android:layout_height="@dimen/sidebar_header_photo_size"
        android:paddingTop="@dimen/sidebar_header_spacing_vertical"
        android:scaleType="fitXY"
        app:srcCompat="@mipmap/ic_launcher_round" />

        CircularNetworkImageView navigationHeaderPhotoView = navigationHeader.findViewById(R.id.photo);
        String navigationHeaderPhotoUrl = profile.getPhotoUrl();
        ImageLoader navigationHeaderPhotoLoader = APIRequest.getInstance(getApplicationContext()).getImageLoader();
        navigationHeaderPhotoView.setImageUrl(navigationHeaderPhotoUrl, navigationHeaderPhotoLoader);

java.lang.RuntimeException: Unable to start activity ComponentInfo{net.app.android/net.app.android.MainActivity}: java.lang.ClassCastException: com.android.volley.toolbox.NetworkImageView cannot be cast to net.app.android.views.CircularNetworkImageView

How I can use this?

    <com.android.volley.toolbox.NetworkImageView
        android:id="@+id/photo"
        android:layout_width="@dimen/sidebar_header_photo_size"
        android:layout_height="@dimen/sidebar_header_photo_size"
        android:paddingTop="@dimen/sidebar_header_spacing_vertical"
        android:scaleType="fitXY"
        app:srcCompat="@mipmap/ic_launcher_round" />

        CircularNetworkImageView navigationHeaderPhotoView = navigationHeader.findViewById(R.id.photo);
        String navigationHeaderPhotoUrl = profile.getPhotoUrl();
        ImageLoader navigationHeaderPhotoLoader = APIRequest.getInstance(getApplicationContext()).getImageLoader();
        navigationHeaderPhotoView.setImageUrl(navigationHeaderPhotoUrl, navigationHeaderPhotoLoader);

java.lang.RuntimeException: Unable to start activity ComponentInfo{net.app.android/net.app.android.MainActivity}: java.lang.ClassCastException: com.android.volley.toolbox.NetworkImageView cannot be cast to net.app.android.views.CircularNetworkImageView

In your xml file instead of using com.android.volley.toolbox.NetworkImageView use net.app.android.views.CircularNetworkImageView

Thanks for the solution... Helped a lot

i'm rewrite this code in Kotlin, the color code its made error type mismatch with print.color