Android implements custom round progress bar _android

Today stumbled on a circular progress, think of yourself to achieve one, the following figure:

The basic idea is this:

1. Draw a solid circle first

2. Draw a white solid square, covering the solid circle

3. The percentage character of the current progress being plotted dynamically at the center of the circle

4. Draw a hollow circle with the same color as the previous solid circle

5. Gradually changing the current percentage

6. According to the percentage, gradually change the size of the square, gradually reduce the square of the bottom of the y axis coordinates, and constantly redraw until it reaches 100%

First look at the custom properties

The new attrs.xml content in the values directory is as follows:

Defines the background color of the drawing circle, and the radius of the circle drawn

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>

  <attr name= "circlecolor" format= "Color" ></attr>
  <attr name= "half" format= "Dimension" ></attr>

  <declare-styleable name= " Mycircleimage ">
    <attr name=" Circlecolor "></attr>
    <attr name=" half "></attr>
  </declare-styleable>

</resources>

customizing views

Import Android.annotation.SuppressLint;
Import Android.content.Context;
Import Android.content.res.TypedArray;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.text.TextPaint;
Import Android.util.AttributeSet;
Import Android.util.Log;

Import Android.view.View;
 public class Circlepro extends View {private Paint Paint; private int circleback;//circle background color private int mschedual = 0;//used to control dynamic variation of float circlehalf; The radius of the circle string percent = "";//The string that draws the percentage @SuppressLint ("recycle") public Circlepro (the context, AttributeSet attrs,
 int defstyleattr) {Super (context, attrs, defstyleattr);
 Paint = new paint ();
 TypedArray array = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.mycircleimage, defstyleattr,0);
 @SuppressWarnings ("unused") int leng = Array.Length (); Gets the custom attribute, where note is R.styleable.mycircleimage_circlecolor instead of r.attr.circlecolor circleback = Array.getcolor ( R.styleable.mycircleimage_circlecolor,color.green);
 Circlehalf = Array.getdimension (R.STYLEABLE.MYCIRCLEIMAGE_HALF,200.F);

 System.out.println (Circleback); /** * This constructor parameter, when referencing the view in a layout file, must override the constructor * @param context * @param attrs/public Circlepro, ATT Ributeset attrs) {This (context, attrs, 0);/Call own constructor}/** * @param text * @param textsize * @return *
 /public float gettextwidth (String text,float textsize) {textpaint textpaint = new Textpaint ();
 Textpaint.settextsize (TEXTSIZE);
 return Textpaint.measuretext (text);

 @Override protected void OnDraw (Canvas Canvas) {//TODO auto-generated Method Stub Super.ondraw (Canvas);
 float height = getheight ();
Float width = getwidth ();

 float circlehalf = (float) (WIDTH*0.7/2);
 Paint.setcolor (Circleback);
 Paint.setantialias (TRUE);
 Paint.setstyle (Paint.Style.FILL); Canvas.drawcircle (width/2,height/2,circlehalf, paint);//Draw Solid Circle if (mschedual <= 100) {//, draw a solid rectangle if the current progress is less than 100 paint.set
  Color (Color.White); Canvas.drawrect (width/2-CIRCLEHALF,HEIGHT/2-CIRCLEHALF,WIDTH/2+CIRCLEHALF,HEIGHT/2+CIRCLEHALF-MSCHEDUAL*CIRCLEHALF/50, paint);
 ///Draw the current progress of the string Paint.setcolor (Color.Black);
 Paint.settextsize (30.F);
 Percent = mschedual+ "%"; Canvas.drawtext (Percent, Width/2-gettextwidth (percent,30)/2,height/2+paint.gettextsize () *3/8, paint);//The height of the font =
 Paint.gettextsize () *3/4//Draw hollow round paint.setcolor (circleback);
 Paint.setstyle (Paint.Style.STROKE);

 Canvas.drawcircle (width/2,height/2,circlehalf, paint);
  if (Mschedual < 100) {//Change the current progress value and redraw the mschedual++;
 Invalidate ();
 }
 }
}

In Activity_main.xml, you need to use custom attributes to add namespaces first: xmlns:liu= "Http://schemas.android.com/apk/res/com.example.androidcirclepro"

Where Liu is a custom prefix, arbitrarily named, Com.example.androidcirclepro is the package name of our application

ACTIVITY_MAIN.XMLN contents are as follows:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
  xmlns:tools= "http:// Schemas.android.com/tools "
  xmlns:liu=" Http://schemas.android.com/apk/res/com.example.androidcirclepro "
  android:layout_width= "match_parent"
  android:layout_height= "match_parent"
  tools:context= ". Mainactivity ">

  <com.example.androidcirclepro.circlepro
    android:layout_width=" Match_parent "
    android:layout_height= "Match_parent"
    liu:half= "90DP"
    liu:circlecolor= "#fff0f0"
    />

</ Relativelayout>

So this is a custom circular progress bar to complete, is not very simple.