Circle ImageView in Android XML

A circle image view is great for profile pics, but it can be difficult to create in Android as it requires a custom class. To quickly create a circle image view try this third party library available on GitHub.

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.

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)

Gradle

dependencies {
    ...
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

Usage in XML

This creates a circleImageView for a profile pic.

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/profile_pic"
    app:civ_border_width="5dp"
    app:civ_border_color="@color/black"/>

Additional Attributes

If your source image has transparency, such as a png or an android drawable you can set its background color in XML.

XML

android:src="@android:drawable/btn_radio"
app:civ_circle_background_color="@color/teal_700"

Limitations

• The ScaleType is always CENTER_CROP and you'll get an exception if you try to change it. This is (currently) by design as it's perfectly fine for profile images.

• Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType

• If you use an image loading library like Picasso or Glide, you need to disable their fade animations to avoid messed up images. For Picasso use the noFade() option, for Glide use dontAnimate(). If you want to keep the fadeIn animation, you have to fetch the image into a Target and apply a custom animation yourself when receiving the Bitmap.

• Using a TransitionDrawable with CircleImageView doesn't work properly and leads to messed up images.