Summary of circular progress bar in Android custom View

Recently, I have developed an open source project for a circular progress bar. This is the first time I have used a custom View completely. Here is a summary of the project development ideas. Welcome to Star and Fork.

This project implements a total of three circular progress bar effects

1. CircleProgress: A circular progress bar that can simulate the effect of QQ Health Pedometer. It supports configuration of progress bar background color, width, starting angle, and supports progress bar gradient
2. DialProgress: Similar to CircleProgress, but supports scale
3. WaveProgress: Implements a circular progress bar with a water ripple effect. It does not support gradient and starting angle configuration. If you need this function, you can refer to CircleProgress to implement it yourself.

Let me post the renderings first. It will be easier to explain with pictures.

CircleProgress effect diagram

DialProgress and WaveProgress effects

Well, next, let’s talk about how to achieve the effect of the above custom progress bar.

Circular progress bar

The circular progress bar is the first progress bar effect implemented. It took me most of the day and it is not complicated to implement.

The idea can be divided into the following steps:

1. View Measurement
2. Calculate the parameters required to draw the View
3. Arc drawing and gradient realization
4. Drawing text
5. Implementation of animation effects

First, we need to measure the size of the drawn View, that is, rewrite the onMeasure() method. The code is as follows:

 @Override 
 
 protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { 
 
   super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 
   setMeasuredDimension(MiscUtil.measure(widthMeasureSpec, mDefaultSize), 
 
           MiscUtil.measure(heightMeasureSpec, mDefaultSize)); 
 
 }

Since the other two progress bar classes need to implement View measurement, the code is encapsulated here:

 /** 
 
 * Measuring View   
 
 * 
 
 * @param measureSpec 
 
 * @param defaultSize View 's default size 
 
 * @return The measured View size 
 
 */ 
 
 public   static   int measure( int measureSpec, int defaultSize) { 
 
 int result = defaultSize; 
 
 int specMode = View .MeasureSpec.getMode(measureSpec); 
 
 int specSize = View .MeasureSpec.getSize(measureSpec); 
 
  
 
   if (specMode == View .MeasureSpec.EXACTLY) { 
 
 result = specSize; 
 
   } else if (specMode == View .MeasureSpec.AT_MOST) { 
 
       result = Math. min (result, specSize); 
 
 } 
 
 return result; 
 
 }

For more information about View measurement, please refer to this blog: Usage of onMeasure in Android Custom View

Next, in onSizeChanged(), we calculate the parameters needed to draw the circle and text. Considering the screen rotation, we do not calculate directly in the onMeasure() method. Here is a sketch to explain the precautions in the drawing calculation process. Please forgive me if the picture is ugly.

In the figure, the outer blue rectangle is the View, the inner black rectangle is the circumscribed rectangle of the circle, and the blank space between the blue and black rectangles is the padding of the View. The two blue circles are actually one circle, representing the thickness of the circle. This is because when Android draws a circle or arc, the center of the circle's side width intersects with the circumscribed rectangle, so the padding and the intersection of the circle and the circumscribed rectangle must be considered during calculation.

By default, the width of the arc is not considered, and the resulting drawing effect is as follows:

 @Override 
 
 protected void onSizeChanged( int w, int h, int oldw, int oldh) { 
 
   super.onSizeChanged(w, h, oldw, oldh); 
 
   Log.d(TAG, "onSizeChanged: w = " + w + "; h = " + h + "; oldw = " + oldw + "; oldh = " + oldh); 
 
 //Find the maximum width of the arc and the background arc 
 
 float maxArcWidth = Math. max (mArcWidth, mBgArcWidth); 
 
 //Find the minimum value as the actual value 
 
 int minSize = Math. min (w - getPaddingLeft() - getPaddingRight() - 2 * ( int ) maxArcWidth, 
 
           h - getPaddingTop() - getPaddingBottom() - 2 * ( int ) maxArcWidth); 
 
 // Subtract the width of the arc, otherwise part of the arc will be drawn on the periphery 
 
 mRadius = minSize / 2; 
 
 //Get the relevant parameters of the circle 
 
 mCenterPoint.x = w / 2; 
 
 mCenterPoint.y = h / 2; 
 
 //Draw the arc boundary 
 
   mRectF. left = mCenterPoint.x - mRadius - maxArcWidth / 2; 
 
   mRectF.top = mCenterPoint.y - mRadius - maxArcWidth / 2; 
 
   mRectF. right = mCenterPoint.x + mRadius + maxArcWidth / 2; 
 
   mRectF.bottom = mCenterPoint.y + mRadius + maxArcWidth / 2; 
 
 //Calculate the baseline when drawing text 
 
 //Since the text's baseline, descent, ascent and other properties are only related to textSize and typeface, they can be calculated directly at this time 
 
 //If value, hint, and unit are drawn with the same brush or the text size needs to be set dynamically, they need to be calculated again after each update 
 
   mValueOffset = mCenterPoint.y - (mValuePaint.descent() + mValuePaint.ascent()) / 2; 
 
   mHintOffset = mCenterPoint.y * 2 / 3 - (mHintPaint.descent() + mHintPaint.ascent()) / 2; 
 
   mUnitOffset = mCenterPoint.y * 4 / 3 - (mUnitPaint.descent() + mUnitPaint.ascent()) / 2; 
 
 updateArcPaint(); 
 
 Log.d(TAG, "onSizeChanged: control size = " + "(" + w + ", " + h + ")"   
 
 + "Circle center coordinates = " + mCenterPoint.toString() 
 
 + ";Circle radius = " + mRadius 
 
 + ";Circle's circumscribed rectangle = " + mRectF.toString());

For more information about Chinese text drawing in Android, please refer to the following two articles:

1. Android custom View learning (Part 3) - Paint drawing text attributes

2. measureText() vs. getTextBounds()

Above, we have basically completed the calculation of all the parameters required for View drawing. The next step is to draw the arc and text.

Drawing an arc requires the use of Canvas

 // oval is of RectF type, i.e. the arc display area 
 
 // startAngle and sweepAngle are both float types, representing the arc start angle and arc degree respectively. 0 degrees at 3 o'clock, increasing clockwise 
 
 // If startAngle < 0 or > 360, it is equivalent to startAngle % 360 
 
 // useCenter: If true , the center of the circle will be included when drawing the arc, usually used to draw sectors 
 
 // Brush for drawing arcs 
 
 drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint);

In order to facilitate calculation, the Canvas rotate() method is used when drawing the arc to rotate the coordinate system.

 private void drawArc(Canvas canvas) { 
 
 // Draw the background arc 
 
 // Redraw from the end of the progress arc to optimize performance 
 
 canvas.save(); 
 
 float currentAngle = mSweepAngle * mPercent; 
 
   canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y); 
 
 // +2 is because there is a problem of the arc starting point having a tail when drawing 
 
   canvas.drawArc(mRectF, currentAngle, mSweepAngle - currentAngle + 2, false , mBgArcPaint); 
 
   canvas.drawArc(mRectF, 2, currentAngle, false , mArcPaint); 
 
 canvas.restore(); 
 
 }

Well, the ring has been drawn, so the next step is to implement the gradient of the ring. Here we use the SweepGradient class. SweepGradient can achieve the effect of radial gradient from the center, as shown below:

The SweepGradient class has two constructors.

 /** 
 
 * @param cx rendering center point x coordinate 
 
 * @param cy rendering center point y coordinate 
 
 * @param colors The color array rendered around the center, at least two color values 
 
 * @param positions The color array of relative positions, can be null . If it is null , the colors are evenly distributed along the gradient line. Generally, this parameter does not need to be set 
 
 / 
 
 public SweepGradient( float cx, float cy, int [] colors, float [] positions) 
 
  
 
 /** 
 
 * @param cx rendering center point x coordinate 
 
 * @param cy rendering center point y coordinate 
 
 * @param color0 starting rendering color 
 
 * @param color1 End rendering color 
 
 / 
 
 public SweepGradient( float cx, float cy, int color0, int color1)

Here we choose the first construction method. Since setting the gradient requires creating a new SweepGradient object each time, it is best not to update it in the onDraw method, but to set it during initialization to avoid frequent creation and memory jitter.

 private void updateArcPaint() { 
 
 // Set the gradient 
 
 int [] mGradientColors = {Color.GREEN, Color.YELLOW, Color.RED}; 
 
   mSweepGradient = new SweepGradient(mCenterPoint.x, mCenterPoint.y, mGradientColors, null ); 
 
   mArcPaint.setShader(mSweepGradient); 
 
 }

There is another thing worth noting here. The sketch is as follows

Assume that the gradient colors are as follows:

 int [] mGradientColors = {Color.GREEN, Color.YELLOW, Color.RED, Color.BLUE};

Because the SweepGradient gradient is 360 degrees, if you draw an arc of only 270 degrees, the blue part (the black shaded part in the figure) of the gradient will not be visible.

Next, it is time to draw the text. Text drawing has been explained in detail in the above-mentioned article, so I will not repeat it here. The code is as follows:

 private void drawText(Canvas canvas) { 
 
   canvas.drawText(String.format(mPrecisionFormat, mValue), mCenterPoint.x, mValueOffset, mValuePaint); 
 
  
 
 if (mHint != null ) { 
 
       canvas.drawText(mHint.toString(), mCenterPoint.x, mHintOffset, mHintPaint); 
 
 } 
 
  
 
 if (mUnit != null ) { 
 
       canvas.drawText(mUnit.toString(), mCenterPoint.x, mUnitOffset, mUnitPaint); 
 
 } 
 
 }

***, let's implement the animation effect of the progress bar. Here we use Android's attribute animation to implement progress updates.

 private void startAnimator( float start, float   end , long animTime) { 
 
   mAnimator = ValueAnimator.ofFloat(start, end ); 
 
   mAnimator.setDuration(animTime); 
 
   mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
 
 @Override 
 
 public void onAnimationUpdate(ValueAnimator animation) { 
 
           mPercent = ( float ) animation.getAnimatedValue(); 
 
           mValue = mPercent * mMaxValue; 
 
           if (BuildConfig.DEBUG) { 
 
               Log.d(TAG, "onAnimationUpdate: percent = " + mPercent 
 
                       + ";currentAngle = " + (mSweepAngle * mPercent) 
 
                       + ";value = " + mValue); 
 
 } 
 
 invalidate(); 
 
 } 
 
 }); 
 
 mAnimator.start(); 
 
 }

There are two points to note here:

1. Do not output Log in ValueAnimator.AnimatorUpdateListener, especially when animation is called frequently, because frequent output of Log will generate a large number of String objects and cause memory jitter. Of course, you can also use StringBuilder to optimize.

2. The most essential thing about invalidate() and postInvalidate() is that the former can only be used in UI threads, while the latter can be used in non-UI threads. In fact, postInvalidate() is also implemented using Handler.

For Android attribute animation, please refer to:

1. A complete analysis of Android Property Animation (Part 1)

2. Android Property Animation (Property Animation) Complete Analysis (Part 2)

Supplement: How to support color and color array in the same attribute

Considering the difference between setting a single color and a gradient for an arc, that is, a single color only needs to provide one color value, while a gradient needs to provide at least two color values, there are several solutions:

1. Define two properties, the gradient has a higher priority than the solid color.
2. Define a format as a string attribute, providing a color value in the form of #FFFFFF|#000000
3. Define a property with the format color|reference, where the reference property refers to an array of gradient colors.

The third solution is selected here and implemented as follows:

 <! -- Circular progress bar -->   
 
 < declare -styleable name = "CircleProgressBar" > 
 
 <! -- arc color, -->   
 
    <attr name = "arcColors" format= "color|reference" /> 
 
 </ declare -styleable> 
 
  
 
 <! --colors.xml-->   
 
 <color name = "green" >#00FF00</color> 
 
 <color name = "blue" >#EE9A00</color> 
 
 <color name = "red" >#EE0000</color> 
 
 <! -- gradient color array -->   
 
 < integer -array name = "gradient_arc_color" > 
 
   <item>@color/green</item> 
 
   <item>@color/blue</item> 
 
   <item>@color/red</item> 
 
 </ integer -array> 
 
  
 
 <! -- Used in layout files -->   
 
 <! -- Use Gradient -->   
 
 <com.littlejie.circleprogress.DialProgress 
 
    android:id= "@+id/dial_progress_bar"   
 
    android:layout_width= "300dp"   
 
    android:layout_height= "300dp"   
 
    app:arcColors= "@array/gradient_arc_color" /> 
 
 <! -- Use monochrome -->   
 
 <com.littlejie.circleprogress.DialProgress 
 
    android:id= "@+id/dial_progress_bar"   
 
    android:layout_width= "300dp"   
 
    android:layout_height= "300dp"   
 
    app:arcColors= "@color/green" />

Read the configuration in xml in the code:

 int gradientArcColors = typedArray.getResourceId(R.styleable.CircleProgressBar_arcColors, 0); 
 
   if (gradientArcColors != 0) { 
 
 try { 
 
 int [] gradientColors = getResources().getIntArray(gradientArcColors); 
 
 if (gradientColors.length == 0) { // If the gradient color array is 0, try to read the color value in monochrome 
 
 int color = getResources().getColor(gradientArcColors); 
 
               mGradientColors = new int [2]; 
 
               mGradientColors[0] = color; 
 
               mGradientColors[1] = color; 
 
 } else if (gradientColors.length == 1) { // If the gradient array has only one color, it is set to two identical colors by default 
 
               mGradientColors = new int [2]; 
 
               mGradientColors[0] = gradientColors[0]; 
 
               mGradientColors[1] = gradientColors[0]; 
 
 } else { 
 
               mGradientColors = gradientColors; 
 
 } 
 
       } catch (Resources.NotFoundException e) { 
 
           throw new Resources.NotFoundException( "the give resource not found." ); 
 
 } 
 
 }

Progress bar with scale

Earlier, I explained in detail how to draw CircleProgress. Now let’s talk about DialProgress.

To be honest, the implementation of DialProgress and CircleProgress is very similar, because there is only one tick mark between the two, but considering the expansion and the single responsibility of the class, the two are separated.

Here we mainly talk about the drawing of scales. The scale drawing mainly uses the save(), rotate() and restore() methods of the Canvas class. Of course, you can also use the translate() method to translate the coordinate system for easy calculation.

 /** 
 
 * Used to save the state of Canvas. After saving, you can call operations such as translation, scaling, rotation, shearing, and cropping of Canvas. 
 
 */ 
 
 public void save() 
 
  
 
 /** 
 
 * Rotate the image to a certain angle 
 
 * @param degrees rotation angle 
 
 * @param x The x-axis coordinate of the rotation center point 
 
 * @param y y-axis coordinate of the rotation center point 
 
 */ 
 
 public void rotate( float degrees, float x, float y) 
 
  
 
 /** 
 
 * Translate (x,y) pixel units on the current coordinates 
 
 * If dx <0, translate upward along the x-axis; dx >0 translate downward along the x-axis 
 
 * If dy <0, translate upward along the y axis; dy >0 translate downward along the y axis 
 
 */ 
 
 public void translate( float dx, float dy) 
 
  
 
 /** 
 
 * Used to restore the previously saved state of the Canvas. Prevent operations performed on the Canvas after save from affecting subsequent drawing. 
 
 */ 
 
 public void restore() 
 
 
 private void drawDial(Canvas canvas) { 
 
 int total = ( int ) (mSweepAngle / mDialIntervalDegree); 
 
 canvas.save(); 
 
   canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y); 
 
 for ( int i = 0; i <= total; i++) { 
 
       canvas.drawLine(mCenterPoint.x + mRadius, mCenterPoint.y, mCenterPoint.x + mRadius + mArcWidth, mCenterPoint.y, mDialPaint); 
 
       canvas.rotate(mDialIntervalDegree, mCenterPoint.x, mCenterPoint.y); 
 
 } 
 
 canvas.restore(); 
 
 }

For Canvas operations, please refer to this article: Android Custom View Advanced - Canvas Operations

Progress bar with water ripple effect

The implementation of the progress bar with water ripple effect requires the use of Bezier curves. The main difficulty lies in the calculation of the drawing area and the implementation of the wave effect. The rest of the logic is similar to the above two progress bars.

The Path class is used here, which is very important in Android 2D drawing. Path can not only draw simple graphics, but also draw these more complex graphics. You can also perform Boolean operations on multiple paths, similar to setting Paint's setXfermode(). For specific usage, please refer to this blog: Android Custom View Advanced-Path Basic Operations. I will not go into details here. I will summarize the knowledge of Android custom views when I have the chance, but I feel that it will take forever.

Continue to upload the schematic diagram, please call me a soul painter~

The black circle in the figure is the progress bar circle we want to draw, and the black curve is the wave in the initial state. The wave is drawn using a Bezier curve, where the odd-numbered points are the starting points of the Bezier curve and the even-numbered points are the control points of the Bezier curve. For example: 1-->2-->3 is a Bezier curve, 1 is the starting point, 2 is the control point, and 3 is the end point. From the figure, you can see that there is one wave inside the circle and one outside the circle (1-->5 and 5->9). The dynamic effect of the wave is achieved by translating the wave on the x-axis, that is, the blue solid line in the figure, so the complete animation effect of a wave requires two waves to achieve. Similarly, by controlling the offset of the y-axis, that is, the blue dotted line in the figure, the wave can rise and fall with the progress.

The calculation of the starting point and control point on the Bezier curve is as follows:

 /** 
 
 * Calculate the starting point and control point on the Bezier curve 
 
 * @param waveWidth The width of a complete wave 
 
 */ 
 
 private Point[] getPoint( float waveWidth) { 
 
   Point[] points = new Point[mAllPointCount]; 
 
 //Special treatment for the first point, i.e. the center of the array 
 
   points[mHalfPointCount] = new Point(( int ) (mCenterPoint.x - mRadius), mCenterPoint.y); 
 
 //Bezier curve points within the screen 
 
 for ( int i = mHalfPointCount + 1; i < mAllPointCount; i += 4) { 
 
 float width = points[mHalfPointCount].x + waveWidth * (i / 4 - mWaveNum); 
 
       points[i] = new Point(( int ) (waveWidth / 4 + width), ( int ) (mCenterPoint.y - mWaveHeight)); 
 
       points[i + 1] = new Point(( int ) (waveWidth / 2 + width), mCenterPoint.y); 
 
       points[i + 2] = new Point(( int ) (waveWidth * 3 / 4 + width), ( int ) (mCenterPoint.y + mWaveHeight)); 
 
       points[i + 3] = new Point(( int ) (waveWidth + width), mCenterPoint.y); 
 
 } 
 
 //Bezier curve points outside the screen 
 
 for ( int i = 0; i < mHalfPointCount; i++) { 
 
 int reverse = mAllPointCount - i - 1; 
 
       points[i] = new Point(points[mHalfPointCount].x - points[reverse].x, 
 
               points[mHalfPointCount].y * 2 - points[reverse].y); 
 
 } 
 
 return points; 
 
 }

Above, we have obtained the path points required to draw the Bezier curve. Next, we need to calculate the drawing area, that is, use the Path class.

The purple area is the entire area where the Bezier curve needs to be drawn.

The red area is the intersection of the purple area and the circle in the above figure, which is the area where the wave is to be displayed.

The code is as follows:

 //This method must be used in Android 19 and above (Path.op()) 
 
 @TargetApi(Build.VERSION_CODES.KITKAT) 
 
 private void drawWave(Canvas canvas, Paint paint, Point[] points, float waveOffset) { 
 
 mWaveLimitPath.reset(); 
 
 mWavePath.reset(); 
 
 //lockWave is used to determine whether the wave rises and falls with the progress bar 
 
 float height = lockWave ? 0 : mRadius - 2 * mRadius * mPercent; 
 
 //moveTo and lineTo draw the water wave area rectangle 
 
   mWavePath.moveTo(points[0].x + waveOffset, points[0].y + height); 
 
  
 
 for ( int i = 1; i < mAllPointCount; i += 2) { 
 
       mWavePath.quadTo(points[i].x + waveOffset, points[i].y + height, 
 
               points[i + 1].x + waveOffset, points[i + 1].y + height); 
 
 } 
 
   mWavePath.lineTo(points[mAllPointCount - 1].x, points[mAllPointCount - 1].y + height); 
 
 //No matter how it moves, the bottom of the intersection of the wave and the circular path is always fixed, otherwise the bottom will be empty when moving up 
 
   mWavePath.lineTo(points[mAllPointCount - 1].x, mCenterPoint.y + mRadius); 
 
   mWavePath.lineTo(points[0].x, mCenterPoint.y + mRadius); 
 
 mWavePath.close () ; 
 
   mWaveLimitPath.addCircle(mCenterPoint.x, mCenterPoint.y, mRadius, Path.Direction.CW); 
 
 // Take the intersection of the circle and the wave path to create the effect of the wave inside the circle 
 
   mWaveLimitPath.op(mWavePath, Path.Op. INTERSECT ); 
 
   canvas.drawPath(mWaveLimitPath, paint);

The above has achieved the dynamic effect of water waves. Of course, you can also configure whether the water waves rise and fall with the progress. In order to achieve a better effect, you can set a light-colored water wave and support setting the direction of the water wave (R2L and L2R). By setting the animation time of the light-colored wave and the dark-colored wave, the effect of the Yangtze River's back waves pushing the front waves can be achieved. Well, the effect is very natural~ You can imagine the realization of the wave from right to left and the calculation of the Bezier point.

Optimize the code for obtaining coordinate points:

 /** 
 
 * Get Bezier points from left to right or from right to left 
 
 * 
 
 * @return   
 
 */ 
 
 private Point[] getPoint(boolean isR2L, float waveWidth) { 
 
   Point[] points = new Point[mAllPointCount]; 
 
 //Special treatment for the first point, i.e. the midpoint of the array 
 
   points[mHalfPointCount] = new Point(( int ) (mCenterPoint.x + (isR2L ? mRadius : -mRadius)), mCenterPoint.y); 
 
 //Bezier curve points within the screen 
 
 for ( int i = mHalfPointCount + 1; i < mAllPointCount; i += 4) { 
 
 float width = points[mHalfPointCount].x + waveWidth * (i / 4 - mWaveNum); 
 
       points[i] = new Point(( int ) (waveWidth / 4 + width), ( int ) (mCenterPoint.y - mWaveHeight)); 
 
       points[i + 1] = new Point(( int ) (waveWidth / 2 + width), mCenterPoint.y); 
 
       points[i + 2] = new Point(( int ) (waveWidth * 3 / 4 + width), ( int ) (mCenterPoint.y + mWaveHeight)); 
 
       points[i + 3] = new Point(( int ) (waveWidth + width), mCenterPoint.y); 
 
 } 
 
 //Bezier curve points outside the screen 
 
 for ( int i = 0; i < mHalfPointCount; i++) { 
 
 int reverse = mAllPointCount - i - 1; 
 
       points[i] = new Point((isR2L ? 2 : 1) * points[mHalfPointCount].x - points[reverse].x, 
 
               points[mHalfPointCount].y * 2 - points[reverse].y); 
 
 } 
 
 //Reverse the order of the Bezier point array from right to left for subsequent processing 
 
 return isR2L ? MiscUtil.reverse(points) : points; 
 
 }

So far, the ideas related to custom circular progress bar have been fully described. All the codes have been uploaded to Git. Welcome to Star and Fork. Portal: CircleProgress.

https://github.com/MyLifeMyTravel/CircleProgress