Android circular ImageView example

In this tutorial we will learn how to implement a circular imageview in android. By default android is not providing in any widget for implementing a circular ImageView without any customisation . But we can make a custom imageview in different shapes by extending the class ImageView.

Steps

  1. Create new project in android studio
  2. Custom class which extends ImageView
  3. Using custom imageview in layout file

Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Custom class which extends ImageView

Since android is not providing any circular imageview widget ,we need to customize the original imageview widget into a circular imageview. So next step is to create a class file in java/your-package/ and use the following code. It is a class which extends android imageview which will be having all the default properties of an imageview.

public class CircularImageView extends ImageView {

public CircularImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}

@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 = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);

}

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

final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());

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

return output;
}

}

Using custom imageview in layout file

New let us see how we ill use the above created custom imageview in our activity. All you need to do is to place the following code in your layout file by replacing your own package name.

Note: For using the below code you need to have an image named android.png file in your res/drawable  folder or you can use any image file, but replace the name with your file name in following code

<com.your-package.CircularImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
android-circular-imageview
android-circular-imageview

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *