title: Android : draw arc without resetting the previous drawn circle
body: <p>I am trying to draw a circle which will represent time and after each complete circle, I want to change the color to indicate to the user that the next time unit has started and draw over the previous circle color rather than reset as shown in the example below.</p>
  
  <p>I am trying to draw a circle using Draw Arc method in the following way </p>
  
  <pre><code>canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
  </code></pre>
  
  <p>The sweep angle is controlled by an Object Animator :</p>
  
  <pre><code>outerCircleAnimator = ObjectAnimator.ofFloat(timeView, TimeView.SET_SWEEPWANGLE, 0, 360);
  </code></pre>
  
  <p>With the following code, I am able to achieve the following 
  <a href="https://i.stack.imgur.com/yd5NO.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yd5NO.gif" alt="enter image description here"></a></p>
  
  <p>The following is my View class :</p>
  
  <pre><code>public class TimeView extends View {
  
  final protected Paint bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  final protected Paint fgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  final protected Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  private RectF mRect = new RectF();
  private float sweepAngle;
  private float radiusInDPI = 100;
  private float radiusInPixels;
  private float strokeWidthInDPI = 4;
  private float stokeWidthInPixels;
  private float dpi;
  private int heightByTwo;
  private int widthByTwo;
  
  public TimeView(Context context) {
      super(context);
      init();
  }
  
  public TimeView(Context context, AttributeSet attrs) {
      super(context, attrs);
      init();
  }
  
  public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      init();
  }
  
  @Override
  public void onSizeChanged(int w, int h, int oldw, int oldh) {
      super.onSizeChanged(w, h, oldw, oldh);
      heightByTwo = h / 2;
      widthByTwo = w / 2;
      mRect = new RectF(w / 2 - radiusInPixels, h / 2 - radiusInPixels, w / 2 + radiusInPixels, h / 2 + radiusInPixels);
  }
  
  private void init() {
      DisplayMetrics metrics = getResources().getDisplayMetrics();
      dpi = metrics.density;
      radiusInPixels = dpi * radiusInDPI;
      stokeWidthInPixels = dpi * strokeWidthInDPI;
      bgPaint.setStrokeWidth(stokeWidthInPixels);
      bgPaint.setStyle(Paint.Style.STROKE);
      bgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));
  
      fgPaint.setStrokeWidth(stokeWidthInPixels);
      fgPaint.setStyle(Paint.Style.STROKE);
      fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
  
      textPaint.setTextSize(24 * 3);
      textPaint.setStyle(Paint.Style.STROKE);
      textPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
  
  
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
     // canvas.drawCircle(widthByTwo, heightByTwo, radiusInPixels, bgPaint);
      canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
  }
  
  
  public static final Property&lt;TimeView, Float&gt; SET_SWEEPWANGLE =
          new Property&lt;TimeView, Float&gt;(Float.class, "outerCircleRadiusProgress") {
              @Override
              public Float get(TimeView object) {
                  return object.getSweepAngle();
              }
  
              @Override
              public void set(TimeView object, Float value) {
                  object.setSweepAngle(value);
              }
          };
  
  public float getSweepAngle() {
      return sweepAngle;
  }
  
  public void setSweepAngle(float sweepAngle) {
      Log.v("Testing", "Sweep angle is " + sweepAngle + " " + (sweepAngle + 270));
      this.sweepAngle = sweepAngle;
      postInvalidate();
  }
  
  public void setColor(boolean change) {
      if (change) {
          fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.mint_green));
      } else {
          fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
      }
  }
  </code></pre>
  
  <p>}</p>