Circular Imageview in android

In this post create circular ImageView in android. For create circular imageview here we use custom class named as CircularImageView.

Create CircularImageView.java in your project package.

public class CircularImageView extends ImageView {
 private int borderWidth;
 private int canvasSize;
 private Bitmap image;
 private Paint paint;
 private Paint paintBorder;

 public CircularImageView(final Context context) {
  this(context, null);
 }

 public CircularImageView(Context context, AttributeSet attrs) {
  this(context, attrs, R.attr.circularImageViewStyle);
 }

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

  paint = new Paint();
  paint.setAntiAlias(true);

  paintBorder = new Paint();
  paintBorder.setAntiAlias(true);

  TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);

  if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
   int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
   setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
   setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
  }

  if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
   addShadow();
 }

 public void setBorderWidth(int borderWidth) {
  this.borderWidth = borderWidth;
  this.requestLayout();
  this.invalidate();
 }

 public void setBorderColor(int borderColor) {
  if (paintBorder != null)
   paintBorder.setColor(borderColor);
  this.invalidate();
 }

 public void addShadow() {
  setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
  paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
 }

 @Override
 public void onDraw(Canvas canvas) {
  image = drawableToBitmap(getDrawable());

  if (image != null) {

   canvasSize = canvas.getWidth();
   if(canvas.getHeight() < canvasSize)
    canvasSize = canvas.getHeight();

   BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
   paint.setShader(shader);

   int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
   canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
   canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
  }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  int width = measureWidth(widthMeasureSpec);
  int height = measureHeight(heightMeasureSpec);
  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) {
   result = specSize;
  } else if (specMode == MeasureSpec.AT_MOST) {
   result = specSize;
  } else {
   result = canvasSize;
  }

  return result;
 }

 private int measureHeight(int measureSpecHeight) {
  int result = 0;
  int specMode = MeasureSpec.getMode(measureSpecHeight);
  int specSize = MeasureSpec.getSize(measureSpecHeight);

  if (specMode == MeasureSpec.EXACTLY) {
   result = specSize;
  } else if (specMode == MeasureSpec.AT_MOST) {
   result = specSize;
  } else {
   result = canvasSize;
  }

  return (result + 2);
 }

 public Bitmap drawableToBitmap(Drawable drawable) {
  if (drawable == null) {
   return null;
  } else if (drawable instanceof BitmapDrawable) {
   return ((BitmapDrawable) drawable).getBitmap();
  }

  Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
    drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  drawable.draw(canvas);

  return bitmap;
 }
}

Now create attr.xml under res/values/ folder in your project.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="CircularImageView">
        <attr name="border" format="boolean"></attr>
        <attr name="border_width" format="dimension"></attr>
        <attr name="border_color" format="color"></attr>
        <attr name="shadow" format="boolean"></attr>
    </declare-styleable>
   
    <declare-styleable name="Theme">
        <attr name="circularImageViewStyle" format="reference"></attr>
    </declare-styleable>

</resources>

In your layout file add imageview like below code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:gravity="center">

    <**YOUR PACKAGE NAME**.CircularImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_launcher"/>
 
</LinearLayout>

Output for above code is like below

Hope this post is helpful for you...