Android implements the picture avatar control of dynamic ring

Look at the renderings first:

Now most apps will inevitably use round avatars, so today I'll share a fancy round avatar control used alone and surrounded by ring animation. This control is implemented on the basis of the round avatar control, but draw some circles of different sizes around it to achieve the effect shown in the figure.

The basic principle of the round avatar is to convert the set resource file into a bitmap, then turn the bitmap into a paint renderer through the bitmapshader class, and then use canvas. In ondraw() drawCircle(rx,ry,radius,paint); Draw a circle on the canvas, and this circle forms a round head.

The resource file set by Src in XML can get the drawable image in the setimagedrawable (drawable) method of ImageView, and then convert the drawable to bitmap

After obtaining the bitmap object, you can double the size of the bitmap and draw it on the canvas, so that there is a place to draw the surrounding ring.

The following is to draw the circle around the picture, that is, draw two circles on the periphery of the picture, one with a large radius, a light color, and one with a small radius and a dark color. Then, through the delay operation of the handler, constantly change the radius size and color depth of the two circles, and redraw them

The handler constantly changes the rate of change of the radius and the color of the brush

Each time handlemessage() is executed, it will trigger (invalidate()) view redrawing. Redrawing will continue in OnDraw. Just change the radius of each circle

Calculate the radius of each circle according to the change rate given in the handler

In this way, when constantly sending messages to the handler, it will constantly trigger redrawing and constantly change the size of the peripheral circle to form the animation effect shown in the figure above. The following four methods are to control the different states displayed by the ring

Well, the dynamic avatar is basically realized here. The code entering and exiting the animation will not be posted for analysis. If you find a bug or have any comments, you are welcome to leave a message.

Complete source code

reference resources: https://github.com/hdodenhof/CircleImageView

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.