Customize the view's circular progress bar

This section describes the custom view-circular progress bar idea: According to the previously described custom view content can be expanded; 1: New class inherits from View2: Add Custom View Property 3: Override OnDraw (Canvas canvas) 4: Implementation function below code 1. Custom View Code: public class CustomView extends view {//background ring color Private int circlecolor;//progress bar color & font color (for aesthetics, So design font color and progress bar color values consistent) private int secondcirclecolor;//progress bar & background ring width private float stroke_width;//progress value private float progress;//Total Progress value, default is 100private float totalprogress;//font size private float textsize;//fill mode private int style_type;public CustomView (Context context) {super (context);} Public CustomView (context context, AttributeSet Attrs) {Super (context, attrs); TypedArray array=context.obtainstyledattributes (Attrs, R.styleable.customview); Circlecolor=array.getcolor ( R.styleable.customview_circlecolor, Color.Black); Secondcirclecolor=array.getcolor (R.styleable.CustomView_ Secondcirclecolor, color.red); Stroke_width=array.getdimension (R.styleable.customview_stroke_width, 2);p rogress= Array.getfloat (r.styleable.customview_progress, 0); Totalprogress=array.getfloat (r.styleable.customview_ totalprogress, 100);Textsize=array.getdimension (r.styleable.customview_textsize, +); Style_type=array.getint (R.styleable.CustomView _style_type, 0);} Public CustomView (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);} public void Setcirclecolor (int color) {circlecolor=color;} public int Getcirclecolor () {return circlecolor;} public void Setsecondcirclecolor (int color) {secondcirclecolor=color;} public int Getsecondcolor () {return secondcirclecolor;} public void Setstrokewidth (float width) {stroke_width=width;} public float Getstrokewidth () {return stroke_width;} public void setprogress (float progress) {this.progress=progress;postinvalidate ();//Refresh Interface}public float getprogress () { return this.progress;} public void settotalprogress (float totalprogress) {this.totalprogress=totalprogress;} public float gettotalprogress () {return this.totalprogress;} public void Settextsize (float textSize) {this.textsize=textsize;} public float GetTextSize () {return this.textsize;} @Overrideprotected void OnDraw(Canvas canvas) {Super.ondraw (canvas);//First Progress Round final Paint paint_background=new paint ();p Aint_background.setantialias (true);p Aint_ Background.setstrokewidth (stroke_width);p Aint_background.setstyle (Style.stroke);p Aint_background.setcolor ( Circlecolor);//second Progress Round final paint paint_progress=new paint ();p Aint_progress.setantialias (true);p Aint_ Progress.setstrokewidth (Stroke_width); if (style_type==0) {Paint_progress.setstyle (style.stroke);} else if (style_type==1) {Paint_progress.setstyle (style.fill_and_stroke);} Paint_progress.setcolor (Secondcirclecolor);//Paint textfinal Paint paint_text=new paint ();p Aint_text.setantialias (True ); if (style_type==0) {paint_text.setcolor (secondcirclecolor);} else if (style_type==1) {paint_text.setcolor (circlecolor);} Paint_text.settextsize (textSize);p aint_text.settextalign (Align.center), if (GetWidth ()!=getheight ()) {throw new IllegalArgumentException ("Height and width must be equal");//control width and height}ELSE{RECTF circle_background=new rectf (); circle_background.left= GetLeft () +stroke_width;circle_background.right=getRight ()-stroke_width;circle_background.top=gettop () +stroke_width;circle_background.bottom=getbottom ()-stroke_ Width;canvas.drawarc (Circle_background, -90, N, False, Paint_background); RECTF circle_progress=new RECTF (); Circle_progress.left=getleft () +stroke_width;circle_progress.right=getright ()- Stroke_width;circle_progress.top=gettop () +stroke_width;circle_progress.bottom=getbottom ()-stroke_width;if ( progress>totalprogress) {throw new IllegalArgumentException ("The current progress value cannot be greater than the total progress value");} Else{if (style_type==0) {Canvas.drawarc (circle_progress, -90, progress/totalprogress*360, False, paint_progress);} else if (style_type==1) {Canvas.drawarc (circle_progress, -90, progress/totalprogress*360, True, paint_progress);}} Canvas.drawtext ((int) progress+ "/" + (int) totalprogress, getLeft () +getwidth ()/2, GetTop () +getheight ()/2+TEXTSIZE/4, Paint_text);}}} 2:attr Property <?xml version= "1.0" encoding= "Utf-8"?><resources> <!--declare-styleable: declaring style type; attr name= "" Declares the property name; format= "Property Type"--<declare-styleable Name= "Customedittext" > <attr name= "linecolor" format= "color"/> <attr name= "Lineheight" format= "Dimension"/> </declare-styleable> <declare-styleable name= "CustomView" > <attr name= "Stroke _width "format=" Dimension "/> <attr name=" circlecolor "format=" color "/> <attr name=" Secondcirclec Olor "format=" color "/> <attr name=" Progress "format=" float "/> <attr name=" totalprogress "format= "Float"/> <attr name= "textSize" format= "Dimension"/> <attr name= "Style_type" > < Enum name= "Stroke" value= "0"/> <enum name= "Stroke_and_fill" value= "1"/> </attr> </d Eclare-styleable></resources>3:xml layout file <relativelayout xmlns:android= "http://schemas.android.com/apk /res/android "xmlns:tools=" Http://schemas.android.com/tools "android:layout_width=" Wrap_content "Android:layout_h eight= "Wrap_content" > <coM.anqiansong.views.customview xmlns:circle= "Http://schemas.android.com/apk/res/com.anqiansong.androidcustomview "Android:id=" @+id/customview "android:layout_width=" 50DP "android:layout_height=" 50DP "Androi D:layout_centerinparent= "true" circle:circlecolor= "#000000" circle:secondcirclecolor= "#ff0000" circle        : stroke_width= "2DP" circle:totalprogress= "circle:progress=" circle:style_type= "Stroke" /></relativelayout> when circle:style_type= "Stroke" in an XML file

When you circle:style_type= "Stroke_and_fill" in an XML file

4:activity call public class Mainactivity extends Actionbaractivity {customview customview;private float progress=0;@ overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); customview= (CustomView) Findviewbyid (R.id.customview); handler.sendemptymessagedelayed (0 , 1000);} Handler handler=new Handler () {public void Handlemessage (Android.os.Message msg) {if (msg.what==0) {if (progress>100) {return;} Else{customview.setprogress (Progress);p rogress+=2;handler.sendemptymessagedelayed (0, 100);}};};}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Customize the view's circular progress bar