Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
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;
}
}
@TinasheMzondiwa

This comment has been minimized.

Copy link

@TinasheMzondiwa TinasheMzondiwa commented Nov 13, 2014

Thanks for this, it works perfect.

@albertovasquez

This comment has been minimized.

Copy link

@albertovasquez albertovasquez commented Nov 14, 2014

Thank you for this. Only issue is that if you set default resource it will revert to square if network returns 404. Any work around?

@panchicore

This comment has been minimized.

Copy link

@panchicore panchicore commented Nov 19, 2014

good work bkurzius

@jmxt3

This comment has been minimized.

Copy link

@jmxt3 jmxt3 commented Dec 14, 2014

works perfect, thanks for this

@aimazh

This comment has been minimized.

Copy link

@aimazh aimazh commented Dec 24, 2014

How can I to use CircularNetworkImageView it this case: NetworkImageView thumbnail = ((NetworkImageView) convertView.findViewById(R.id.main_activity_listview_item_thumbnail));?

Like this:
CircularNetworkImageView thumbnail = ((CircularNetworkImageView) convertView.findViewById(R.id.main_activity_listview_item_thumbnail));

@balavishnu

This comment has been minimized.

Copy link

@balavishnu balavishnu commented Jan 7, 2015

Works Perfect..Thanks

@asepsholihin

This comment has been minimized.

Copy link

@asepsholihin asepsholihin commented Feb 14, 2015

works perfectly, thanks a lot...

@sunilomrey

This comment has been minimized.

Copy link

@sunilomrey sunilomrey commented Apr 9, 2015

How to use this ?

i edited the instructions above

@jakubturcovsky

This comment has been minimized.

Copy link

@jakubturcovsky jakubturcovsky commented Apr 15, 2015

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

@madsongr

This comment has been minimized.

Copy link

@madsongr madsongr commented May 15, 2015

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

@bkurzius

This comment has been minimized.

Copy link
Owner Author

@bkurzius bkurzius commented May 15, 2015

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

@petersf7

This comment has been minimized.

Copy link

@petersf7 petersf7 commented Jun 28, 2015

Thanks! Works very well!

@cowboy93

This comment has been minimized.

Copy link

@cowboy93 cowboy93 commented Jul 22, 2015

Perfect !!!

@AlobhaTechnologies

This comment has been minimized.

Copy link

@AlobhaTechnologies AlobhaTechnologies commented Jul 26, 2015

Perfect thanks

@babakhalid

This comment has been minimized.

Copy link

@babakhalid babakhalid commented Aug 2, 2015

works perfectly, thanks a lot.

@tkarakasoglu

This comment has been minimized.

Copy link

@tkarakasoglu tkarakasoglu commented Nov 8, 2015

Good job dude

@SamBellerose

This comment has been minimized.

Copy link

@SamBellerose SamBellerose commented Nov 26, 2015

Very sick !

@chandaninfowiz

This comment has been minimized.

Copy link

@chandaninfowiz chandaninfowiz commented Jan 19, 2016

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

@habil

This comment has been minimized.

Copy link

@habil habil commented Jan 27, 2016

Thank you so much ;)

@maahibhat88

This comment has been minimized.

Copy link

@maahibhat88 maahibhat88 commented Feb 14, 2016

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

@kpg257

This comment has been minimized.

Copy link

@kpg257 kpg257 commented Mar 4, 2016

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

@rohit101293

This comment has been minimized.

Copy link

@rohit101293 rohit101293 commented Mar 7, 2016

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

@mohamedelgarnaoui

This comment has been minimized.

Copy link

@mohamedelgarnaoui mohamedelgarnaoui commented Jun 5, 2016

Thank you so much

@Abydars

This comment has been minimized.

Copy link

@Abydars Abydars commented Jul 9, 2016

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

@CKalung

This comment has been minimized.

Copy link

@CKalung CKalung commented Jul 18, 2016

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

@IshanFx

This comment has been minimized.

Copy link

@IshanFx IshanFx commented Aug 12, 2016

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

@zmeid

This comment has been minimized.

Copy link

@zmeid zmeid commented Aug 30, 2016

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

@metes

This comment has been minimized.

Copy link

@metes metes commented Nov 8, 2016

It's working great! Thanks.

@power7714

This comment has been minimized.

Copy link

@power7714 power7714 commented Mar 10, 2017

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

@codeshifu

This comment has been minimized.

Copy link

@codeshifu codeshifu commented Mar 15, 2017

Ahhh. Thank you sooooo much

@thetundedoherty

This comment has been minimized.

Copy link

@thetundedoherty thetundedoherty commented Aug 17, 2017

This is working perfectly..Thanks

@ShilpaCISPL

This comment has been minimized.

Copy link

@ShilpaCISPL ShilpaCISPL commented Sep 15, 2017

Thanks..It works

@samuelDeveloperiOS

This comment has been minimized.

Copy link

@samuelDeveloperiOS samuelDeveloperiOS commented Jan 3, 2018

Thanks. it works perfect.

@nanom1t

This comment has been minimized.

Copy link

@nanom1t nanom1t commented Jun 6, 2018

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

@bhatguru03

This comment has been minimized.

Copy link

@bhatguru03 bhatguru03 commented Nov 2, 2018

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

@bhatguru03

This comment has been minimized.

Copy link

@bhatguru03 bhatguru03 commented Nov 2, 2018

Thanks for the solution... Helped a lot

@hmzgtl16

This comment has been minimized.

Copy link

@hmzgtl16 hmzgtl16 commented Sep 21, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment