Circular ImageView

Question

I watched how to create a round ImageView in Android. After reading the questions asked about this question in StackOverflow at:

How to make the image fit in a circular frame in android

and

How to set a bitmap in a circular image?

I put together my own ImageView, using links as a guide, which does what I need: a rounded image with a border.

The following is the code I'm using:

public class CircularImageView extends ImageView { private int borderWidth = 5; private int viewWidth; private int viewHeight; private Bitmap image; private Paint paint; private Paint paintBorder; private BitmapShader shader; public CircularImageView(Context context) { super(context); setup(); } public CircularImageView(Context context, AttributeSet attrs) { super(context, attrs); setup(); } public CircularImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setup(); } private void setup() { // init paint paint = new Paint(); paint.setAntiAlias(true); paintBorder = new Paint(); setBorderColor(Color.BLUE); paintBorder.setAntiAlias(true); } public void setBorderWidth(int borderWidth) { this.borderWidth = borderWidth; this.invalidate(); } public void setBorderColor(int borderColor) { if(paintBorder != null) paintBorder.setColor(borderColor); this.invalidate(); } private void loadBitmap() { BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable(); if(bitmapDrawable != null) image = bitmapDrawable.getBitmap(); } @SuppressLint("DrawAllocation") @Override public void onDraw(Canvas canvas) { //load the bitmap loadBitmap(); // init shader if(image !=null) { // Create a shader with a scaled bitmap to match the view dimensions shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint.setShader(shader); int circleCenter = viewWidth / 2; // Draw the outer border canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder); // circleCenter is the x or y of the view center // radius is the radius in pixels of the cirle to be drawn // paint contains the shader that will texture the shape canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter, paint); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = measureWidth(widthMeasureSpec); int height = measureHeight(heightMeasureSpec, widthMeasureSpec); viewWidth = width - (borderWidth *2); viewHeight = height - (borderWidth*2); setMeasuredDimension(width, height); } private int measureWidth(int measureSpec) { int result = 0; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { // We were told how big to be result = specSize; } else { // Measure the text result = viewWidth; } return result; } private int measureHeight(int measureSpecHeight, int measureSpecWidth) { int result = 0; int specMode = MeasureSpec.getMode(measureSpecHeight); int specSize = MeasureSpec.getSize(measureSpecHeight); if (specMode == MeasureSpec.EXACTLY) { // We were told how big to be result = specSize; } else { // Measure the text (beware: ascent is a negative number) result = viewHeight; } return result; } } 

I plan to make this open source and therefore appreciate it if someone could view the code to make sure that I am doing everything right.

Answer 1

Try this function to get the image in the round corner:

  private Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); final int color = 0xff424242; final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); final RectF rectF = new RectF(rect); final float roundPx = pixels; 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; } 

Answer 2

If you are not so strict about the border of buttons. why not make a round PNG image file with transparent edges.

Answer 3

This may not be the best way, and you won’t be able to change many properties, but it is by far the easiest way. I just used this library, and I made a circular image that also has a border.

---

So this is my solution:

First , I put this in my build.grandle :

 `compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'` 

Second , I put this in a .xml layout file:

  <com.github.siyamed.shapeimageview.CircularImageView android:layout_width="150dp" android:layout_gravity="center_horizontal" android:layout_height="150dp" android:id="@+id/photo" app:siBorderWidth="5dp" app:siBorderColor="#ffffff" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> 

In my .java file, this is the way I can take or set the image in the CircularImageView :

 final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo); photo.setBackgroundResource(R.drawable.female); 

---

This is all I have done to create a circular image with a white frame.

Answer 4

Add latest dependency compatible with Android X

 implementation 'com.github.arefhosseini:android-shape-imageview:1.0.3'