Android Custom View Drawing Circular Avatar

Android custom View drawing circular avatar Introduction:

When doing APP application development, user avatars are definitely indispensable, but more than 90% of the required avatars are round. So, how to realize the circular avatar by customizing the View, then, this blog post will tell you not only the implementation process. There will be unexpected gains!
final effect
International practice, let's first look at the final rendering

Custom RoundImageView inherits from ImageView
public class RoundImageView extends ImageView {

public RoundImageView(Context context) {
public RoundImageView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

I wonder if you have noticed that whenever we inherit from View, the system will prompt us to override and rewrite 4 constructors. Here we only override three, and then start to initialize in each constructor. So, is it right? All the constructors will be called every time, and if not, when will these three constructors be called? Let's verify it with an example.
Using a custom View is nothing more than two cases, the first is to use it directly in the xml layout, and the other is to create a new one in the Activity. Below we use the above two methods respectively, in order to facilitate the observation of our three construction methods Add a line to print each.

First, we use it directly in xml, run and print as follows:
com.example.roundimageview D/ RoundImageView : RoundImageView : constructor with two parameters
Then we in the Activity, new a RoundImageView
roundImageView = RoundImageView ( this@MainActivity )
roundImageView = RoundImageView ( this@MainActivity , null)
roundImageView = RoundImageView ( this@MainActivity , null, 0)

Android custom View drawing circular avatar.The run print log is as follows:

Android custom View drawing circular avatar.Conclusion: When a custom View is used in xml, it uses the second constructor. When it is used in Activity, the constructor with several parameters is called by passing in several parameters during instantiation.
Implementing the idea of a circular avatar
I always think that the difficulty of customizing a View lies in its realization idea. Usually, when we encounter a problem, it is not that Google is not available, but that we do not know how to Google the problem at all. If we know the cause of the problem , In fact, the problem has been solved, the most afraid of is not knowing why the problem occurred.
The idea of realizing the circular avatar can be represented by a simple diagram.

Android custom View drawing circular avatar.The rectangular area is the complete picture, and the circular area is the avatar area we finally display, so it is very simple, the circular area intersects the rectangular area, and the union area? Draw a circle in the rectangle that is tangent to the length or width of the rectangle, and the diameter of the circle is the shorter side of the length or width.
Coding implementation
•Get the bitmap of the original avatar
First of all, we need to get the bitmap of the set avatar, we can get the set image resources directly through the API,
drawable = this.getDrawable ();

Android custom View drawing circular avatar.Then convert the image resource to bitmap
First of all, we judge whether the drawable is empty. If it is empty, it means that the user has not set it, and throws an exception that the resource is not found.
if (drawable == null) {
throw new Resources.NotFoundException ("Image resource not set");

If it is not empty, we create a bitmap with the same size as the image resource and draw the bitmap. The code is as follows:
bitmap = Bitmap.createBitmap ( drawable.getIntrinsicWidth (), drawable.getIntrinsicHeight (),
Canvas canvas = new Canvas(bitmap);
drawable.setBounds (0, 0, drawable.getIntrinsicWidth (),
drawable.getIntrinsicHeight ());
drawable.draw (canvas);

•draw circular bitmap
Through the above code, we get the original bitmap image, and then we need to draw a circular bitmap, similar to the above, first create a bitmap with the same size as the bitmap
circleBitmap = Bitmap.createBitmap ( bitmap.getWidth (), bitmap.getHeight (), Bitmap.Config.ARGB_8888);

We draw a rectangle the size of the bitmap
Paint paint = new Paint();
Rect rect = new Rect (0, 0, bitmap.getWidth (), bitmap.getHeight ());
canvas.drawRect ( rect, paint );
RectF rectF = new RectF ( rect );

Set the radius of the circle to the shorter side
float roundRa = 0.0f;
if ( bitmap.getWidth () > bitmap.getHeight ()) {
roundRa = bitmap.getHeight() / 2.0f;
} else {
roundRa = bitmap.getWidth() / 2.0f;

canvas.drawARGB(0, 0, 0, 0);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawARGB sets the drawing clipping to transparent, and the PorterDuffXfermode class in paint.setXfermode is very powerful. We will explain it in a separate article later.
Finally, we can redraw the bitmap
canvas.drawBitmap (bitmap, rect , rect , paint);

The complete code for the drawing part is as follows:
* Get the bitmap of circular cropping
* @param bitmap original bitmap
private Bitmap getCircleBitmap (Bitmap bitmap) {
circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(circleBitmap);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
RectF rectF = new RectF(rect);
float roundRa = 0.0f;
if (bitmap.getWidth() > bitmap.getHeight()) {
roundRa = bitmap.getHeight() / 2.0f;
} else {
roundRa = bitmap.getWidth() / 2.0f;
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(rectF, roundRa, roundRa, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return circleBitmap;

Android custom View drawing circular avatar.Set the final bitmap
getting bitma , we can reset it directly to display
setImageBitmap ( getCircleBitmap (bitmap));

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00

phone Contact Us