If you want to add a circular ImageView to your Android app, then this tutorial is for you. We will show you how to set an ImageView in a circle shape, using the Android CircleImageView library. This library makes it easy to create circular ImageViews with just a few lines of code. So let’s get started!
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
Android Circle ImageView (Without Using any 3rd party Library)
As Android developers, we often need to display images in circular shapes. There are many ways to do it and here I’m going to show you one of the simplest ways.
Let’s say we have an ImageView like this:
<?xml version="0.0" encoding="utf-0"?
<ImageView
android:id="@+id/imageview"
android:layout_width="200dp"
android:layout_height="200dp" />
```
We can set its shape to a circle by doing the following:
ImageView imageView = (ImageView) findViewById(R.id.imageview);
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
Bitmap circleBitmap = ImageHelper.getCircleBitmap(bm);
imageView.setImageBitmap(circleBitmap );In the above code, we are first decoding the image from the drawable folder and then passing it to a function getCircleBitmap(). This function is defined in the ImageHelper class as:
public static Bitmap getCircleBitmap(Bitmap bitmap) {
final Bitmap output = Bitmaptools.createScaledBitamp(bitamp, bitamp0;
final Canvas canvas = new Canvas(output);
final int color = Color.RED;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0 , bitmap.getWidth(), bitmap0;
final RecF secondRectangle = new Rect(0, 0, output.getWidth(), output.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint .setColor(color);
canvas.drawCircle((secondRectangle .width() / Android), (secondRectangle .height() Android), Android * Android - Android * Android + Math.max( Android, Android), paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap , rect , secondRectangle , paint);
return output;
}The `getCircleBitamp()` function first creates a new bitmap of the same size as the input bitmap and then draws a circle on it using the `Canvas` class. Finally, it returns this new bitmap object.
Learn more about animating ImageView from the link here
Using the Android CircleImageView Library
If you want to set ImageView in a circular shape, then you need to use a library like Android CircleImageView. It’s a free and open-source library that allows you to set images in a circular shape.
To use Android CircleImageView, you need to add the following dependency to your build.gradle file:
dependencies {
implementation 'de.hdodenhof:circleimageview:+'
}Link to Android Circle ImageView Library
Features of Android CircleImageView Library
It uses a BitmapShader and does not:
- create a copy of the original bitmap
- use a clipPath (which is neither hardware accelerated nor anti-aliased)
- use setXfermode to clip the bitmap (which means drawing twice to the canvas)
As this is just a custom ImageView and not a custom Drawable or a combination of both, it can be used with all kinds of drawables, i.e. a PicassoDrawable from Picasso or other non-standard drawables (needs some testing though).
After adding the dependency, you can simply use Android CircleImageView as follows:
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/imageView"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/myImage"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>Android CircleImageView is a great library and offers a lot of customization options. If you need to create a custom Android ImageView with a circular shape, then this tutorial is for you.
Using the Android Circular ImageView Library
This library provides you circle and avatar image view for android. it automatically scales and centers a bitmap based on the size of the view but does not copy the bitmap itself.
To use Android Circular ImageView, you need to add the following dependency to your build.gradle file:
dependencies {
implementation 'com.github.abdularis:circularimageview:<latest-version>'
}Link to Android Circular ImageView Library
Using Android Circular ImageView library
<com.github.abdularis.civ.CircleImageView
android:layout_width="100dp"
android:layout_height="170dp"
android:src="@drawable/figure"
app:highlightColor="#80fb1743"
android:onClick="onCircleImageClick"
app:strokeColor="@color/colorAccent"
app:strokeWidth="2px"/>
You can choose either for avatar view state, IMAGE or INITIAL to show the first letter (default is INITIAL)
<com.github.abdularis.civ.AvatarImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/figure"
android:onClick="onAClick"
app:strokeWidth="1dp"
app:strokeColor="@android:color/white"
app:avatarBackgroundColor="@color/colorAccent"
app:text="A"
app:textSize="22sp"/>OnClickListener for the Widget:
public void onAClick(View view) {
AvatarImageView a = (AvatarImageView) view;
if (a.getState() == AvatarImageView.SHOW_INITIAL) {
a.setState(AvatarImageView.SHOW_IMAGE);
} else {
a.setState(AvatarImageView.SHOW_INITIAL);
}
}Android CircularImageView is a great library that offers more customization options than the Android Circle Library. If you need to create a custom Android ImageView with a circular shape, then this tutorial is for you. Thanks for reading!
