Android implements custom round progress bar _android

Source: Internet
Author: User

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"?>

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

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


customizing views

Import Android.annotation.SuppressLint;
Import Android.content.Context;
Import Android.content.res.TypedArray;
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,;
 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
 ///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://"

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= ""
  xmlns:tools= "http:// "
  xmlns:liu=" Http:// "
  android:layout_width= "match_parent"
  android:layout_height= "match_parent"
  tools:context= ". Mainactivity ">

    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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.