Android Custom Circular Progress Bar Effect

This article example for everyone to share the Android custom round progress bar effect of the specific code, for your reference, the specific content is as follows

1 Control RoundProgress

package listview.tianhetbm.p2p.ui;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import listview.tianhetbm.p2p.R;

/**
 * @date:2015/9/14
 * @author:dongxiaogang
 * @description:  Custom round progress bar 
 */
public class RoundProgress extends View {
    private Paint paint = new Paint();

    private int roundColor;
    private int roundProgressColor;
    private int textColor;
    private float textSize;
    private float roundWidth;
    private int max = 100;

    private int progress = 50;

    public RoundProgress(Context context) {
        this(context, null);
    }

    public RoundProgress(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);
        // The color of the ring 
        roundColor = ta.getColor(R.styleable.RoundProgress_roundColor, Color.RED);
        // Color of ring progress 
        roundProgressColor = ta.getColor(R.styleable.RoundProgress_roundProgressColor, Color.GREEN);
        // Color of Intermediate Progress Percentage literal string 
        textColor = ta.getColor(R.styleable.RoundProgress_textColor, Color.GREEN);
        // Font size of string for intermediate progress percentage 
        textSize = ta.getDimension(R.styleable.RoundProgress_textSize, 15);
        // Width of the ring 
        roundWidth = ta.getDimension(R.styleable.RoundProgress_roundWidth, 5);
        ta.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
// No. 1 1 Step: Draw 1 The outermost circle 
        paint.setColor(roundColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        int center = getWidth() / 2;
        int radius = (int) (center - roundWidth / 2-45);
        //canvas.drawCircle(center, center, radius, paint);
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        canvas.drawArc(oval, 135, 270, false, paint);
        // No. 1 2 Step: Draw the text in the middle 
        float textWidth = paint.measureText(progress + "%");
        paint.setColor(textColor);
        paint.setTextSize(textSize);
        paint.setStrokeWidth(0);
        canvas.drawText(progress + "%", center - textWidth / 2, center + textSize / 2, paint);

        // No. 1 3 Step: 
        /**
         *  Parameter interpretation: 
         * oval Draws the rectangular range outline contained in the arc circle 
         * 0 Angle of Start 
         * 360 * progress / max : Scanned angle 
         * false : Does it contain the center of the circle 
         * paint Brush when drawing arc 
         */
        //RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        paint.setColor(roundProgressColor);
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(oval, 135, 270 * progress / max, false, paint);
        Log.e(" Test angle ",(270 * progress / max)+"");

        Paint mp=new Paint();
        mp.setAntiAlias(true);
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.tiger);
        int bitmapHeight = bitmap.getHeight()/2;
        int bitmapWidth = bitmap.getWidth()/2;
        //canvas.translate(-center, center);
        float y=0f,x=0f;
//        if(270 * progress / max<=45){
            y = (float) (center-bitmapWidth - (radius) * Math.cos((270 * progress / max+225)*Math.PI/180));
            x = (float) (center-bitmapWidth + (radius) * Math.sin((270 * progress / max+225)*Math.PI/180));
//        }
    //canvas.translate(center, center*2);
    Log.e(" Test angle ", y + "-----" + x);
    canvas.drawBitmap(bitmap, x, y, mp);


    }
    public void setProgress(int progress){
        this.progress = progress;
        if(progress>100){
            this.progress = 100;
        }
        postInvalidate();
    }
}

2 xml Layout File

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <listview.tianhetbm.p2p.ui.RoundProgress

        android:layout_marginTop="30dp"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginLeft="10dp"
        app:roundColor="@color/back_blue"
        app:roundProgressColor="@color/back_orange"
        android:id="@+id/ce"
        app:roundWidth="10dp"
        app:textSize="18sp"
        app:textColor="@color/record_red"
        />
</RelativeLayout>

3 activity (main code)

 super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_three);
        ButterKnife.bind(this);
        new Thread(){
           @Override
           public void run() {
               while (progress<80){
                   progress+=1;
                   ce.setProgress(progress);
                   try {
                       Thread.sleep(50);
                   } catch (Exception e) {
                       e.printStackTrace();
                   }

               }
           }
}.start();