CircularImageView

A checkable Android ImageView implementation that draws circular images with support for optional placeholder text. CircularTextView works with Picasso (tested with picasso:2.5.2) & Glide (tested with glide:3.6.1).

Download sample application from Google Play

Download

Download the latest version from releases.

Or get it using Gradle:

dependencies {
compile 'com.subinkrishna:circularimageview:1.2.2'
}

Or Maven:

<dependency>
<groupId>com.subinkrishna</groupId>
<artifactId>circularimageview</artifactId>
<version>1.2.2</version>
</dependency>

Usage

XML:

<com.subinkrishna.widget.CircularImageView
android:id="@+id/image"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/c2"app:ci_borderWidth="2dp"app:ci_borderColor="@android:color/white"app:ci_placeholderBackgroundColor="@android:color/black"app:ci_placeholderText="CV"app:ci_placeholderTextSize="22sp"app:ci_placeholderTextColor="@android:color/white"app:ci_shadowRadius="5.0"app:ci_shadowColor="#999999" />

Java:

CircularImageViewimageView = findViewById(R.id.image);
imageView.setBorderColor(Color.WHITE);
imageView.setBorderWidth(TypedValue.COMPLEX_UNIT_DIP, 2);
imageView.setPlaceholder("CV", Color.BLACK, Color.WHITE);
imageView.setPlaceholderTextSize(TypedValue.COMPLEX_UNIT_SP, 22);
imageView.setShadowRadius(5.0f);
imageView.setShadowColor(0xFF999999);

Custom Attributes

• ci_borderWidth (default: 0)
• ci_borderColor (default: #FFFFFFFF)
• ci_placeholderText
• ci_placeholderTextSize (default: 0)
• ci_placeholderTextColor (default: #FF000000)
• ci_placeholderBackgroundColor (default: #FFDDDDDD)
• ci_checked (default: false)
• ci_checkedStateBackgroundColor (default: #FFBBBBBB)
• ci_shadowRadius (default: 0)
• ci_shadowColor (default: #FF666666)

Java Methods

• setBorderWidth(int unit, int size)
• setBorderColor(@ColorInt int color)
• setPlaceholder(String text)
• setPlaceholder(String text, @ColorInt int backgroundColor, @ColorInt int textColor)
• setPlaceholderTextSize(int unit, int size)
• setCheckedStateBackgroundColor(@ColorInt int backgroundColor)
• setImageAlpha(int alpha)
• allowCheckStateAnimation(boolean allowAnimation)
• setShadowRadius(float radius)
• setShadowColor(@ColorInt int shadowColor)
• allowCheckStateShadow(boolean allowShadow)

Methods implemented from android.widget.Checkable

• isChecked()
• setChecked(boolean checked)
• toggle()

Samples

#1 Using Picasso

XML:

<com.subinkrishna.widget.CircularImageView
android:id="@+id/image1"android:layout_width="100dp"android:layout_height="100dp" />

Java:

CircularImageViewi1 = (CircularImageView) findViewById(R.id.image1);
Picasso.with(this)
.load("https://raw.githubusercontent.com/subinkrishna/CircularImageView/master/art/cat_original.jpg")
.placeholder(R.drawable.placeholder)
.centerCrop()
.resize(200, 200)
.into(i1);

#2 Using Glide - Error handling

Placeholder image is shown in the sample since Glide tried to load an image from an invalid URL.

XML:

<com.subinkrishna.widget.CircularImageView
android:id="@+id/image2"android:layout_width="100dp"android:layout_height="100dp"app:ci_placeholderBackgroundColor="@android:color/holo_orange_light"app:ci_placeholderTextSize="42sp"app:ci_placeholderTextColor="#FFF"app:ci_placeholderText="CV" />

Java:

CircularImageViewi2 = (CircularImageView) findViewById(R.id.image2);
Glide.with(this)
.load("http://invalid.url")
.asBitmap()
.error(R.drawable.placeholder)
.into(i2);

#3 Local asset

<com.subinkrishna.widget.CircularImageView
android:id="@+id/image3"android:layout_width="100dp"android:layout_height="100dp"android:src="@drawable/c1"app:ci_borderWidth="3dp"app:ci_borderColor="@android:color/holo_blue_dark"/>

#4 Placeholder text with custom border & background

Placeholder text is shown along with custom border & background when no bitmap is loaded.

<com.subinkrishna.widget.CircularImageView
android:id="@+id/image5"android:layout_width="100dp"android:layout_height="100dp"app:ci_placeholderBackgroundColor="@android:color/holo_orange_light"app:ci_placeholderTextSize="42sp"app:ci_placeholderTextColor="#FFF"app:ci_placeholderText="CV"/>

Changelog

You can find the changelog here.

Limitations & known issues

• CircularImageView doesn't resize bitmaps to match the view size.
• No support for animations. Please use DrawableTypeRequest.asBitmap() to make CircularImageView to work with Glide.

Using vectors/XML drawable resources

As of now, XML drawable resources need to be set using setImageBitmap().

finalBitmapbitmap = getBitmap(context, resId, width, height);
image.setImageBitmap(bitmap);
// Converts the drawable resource to BitmappublicstaticBitmapgetBitmap(Contextcontext,
intresId,
intw,
inth) {
Drawabledrawable = AppCompatDrawableManager.get().getDrawable(context, resId);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
drawable = (DrawableCompat.wrap(drawable)).mutate();
}
Bitmapbitmap = (w > 0) && (h > 0)
? Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
: null;
if (null != bitmap) {
finalCanvascanvas = newCanvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
}
returnbitmap;
}

License

Copyright (C) 2016 Subinkrishna Gopi
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.