Skip to content

CircleImageView

Jump to bottom
TR4Android edited this page Sep 3, 2015 · 3 revisions

This wiki highlights some of the features of the CircleImageView component. It shows you how to include it in your layout and how to set circular images and placeholders.

1. Include in your layout

The CircleImageView can be included in any layout just like any other ImageView:

<com.tr4android.support.extension.widget.CircleImageView
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:scaleType="centerInside" />

There are a few attributes you can change here:

  • app:circleImageEnabled: Whether circular images should be created. This can be useful if you want to use placeholders, but don't want circular images. Defaults to true.
  • app:placeholderCircleColor: The default circle color used when no specific color is set. Defaults to ?attr/colorAccent.
  • app:placeholderTextSize: The text size for the placeholder letters. Defaults to 24sp.
  • app:placeholderTextColor: The text color for the placeholder letters. Defaults to ?android:attr/textColorPrimaryInverse.
  • app:placeholderIconSize: The size for the placeholder icon. Defaults to 24dp.

2. Set a circular image

You can easily set a circular image on your CircleImageView. Just use one of the default methods available for setting an image on a normal ImageView to create circular images:

  • setImageBitmap(Bitmap bitmap)
  • setImageResource(int resId)
  • setImageDrawable(Drawable drawable)
  • setImageURI(Uri uri)

You can toggle between normal display and circular display by using the setCircleImageEnabled(boolean enabled) method, or by using app:circleImageEnabled. If enabled the CircleImageView will create circular images, if disabled it will use the default ImageView implementation.

In order to create circular images out of the original noncircular images the RoundedBitmapDrawable from the AppCompat Support Library is used. This assures optimal preformance because it is based on the methods described by Romain Guy in his Android Recipe #1: Image with rounded corners.

3. Set a placeholder

In addition to circular images you can also set placeholder when a image is not available. A Placeholder is a colored circle with a letter, or letters, or an icon in the middle (as seen in Google's Gmail for example). The following methods are available for creating placeholders:

  • setPlaceholder(String placeholderText): Set a placeholder with the specific text. This uses the default circle color set with app:placeholderCircleColor.
  • setPlaceholder(String placeholderText, @ColorInt int circleColor): Set a placeholder with the specific text and circle color.
  • setPlaceholder(int iconResId): Set a placeholder with the specific drawable resource. This uses the default circle color set with app:placeholderCircleColor.
  • setPlaceholder(int iconResId, @ColorInt int circleColor): Set a placeholder with the specific drawable resource and circle color.
  • setPlaceholder(Drawable icon): Set a placeholder with the specific drawable. This uses the default circle color set with app:placeholderCircleColor.
  • setPlaceholder(Drawable icon, @ColorInt int circleColor): Set a placeholder with the specific drawable and circle color.

Note: The String placeholderText doesn't automatically get filtered for the first letter. If you want to retrieve the first letter of a String converted to uppercase you can use the static retrieveLetter(String text) method of the CircleImageView.

4. Enjoy

Congrats! You've made it through the wiki. If you have any issues, bugs or feature requests please open a new issue.

Clone this wiki locally