Search code examples
androidmathviewandroid-custom-viewgeometry

add a circle at the edge of arc android?


how to add small circle at the edge of arc.
and it should be also move with arc edge in the clock direction.
right now i am successfully animate the arc using changing the sweep angle.
and black dot is remaining.

enter image description here

below is the code of getView and animation class

--- init method and implement constructor ----

 mRectF = new RectF(mWidth / 2 - 360, mHeight / 2 - 360, mWidth / 2 + 360, mHeight / 2 + 360);

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //draw circle background
    mPaint.setColor(getResources().getColor(R.color.timer_background_color));
    canvas.drawCircle(mWidth / 2, mHeight / 2, 360, mPaint);

    mPaint.setColor(getResources().getColor(R.color.actionbar_back_color));
    canvas.drawArc(mRectF, mStartAnagle, mSweepAngle, false, mPaint);
}

public class TimerAnimation extends Animation{

    public TimerAnimation (float startAngle, float sweepAngle, long duration) {
        mStartAnagle = startAngle;
        mSweepAngle = sweepAngle;
        setDuration(duration);
        setRepeatCount(Animation.INFINITE);
        setInterpolator(new LinearInterpolator());
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        if (!isComplete) {
            mSweepAngle = mSweepAngle + 6;
            if (mSweepAngle >= 360) {
                isComplete = true;
                mSweepAngle = 360;
            }
        } else {
            mStartAnagle = mStartAnagle + 6;
            mSweepAngle = mSweepAngle - 6;
            if (mStartAnagle >= 360)
                mStartAnagle = 0;
            if (mStartAnagle == 270 || mSweepAngle <= 0) {
                isComplete = false;
                mSweepAngle = 0;
            }
        }
        invalidate();
    }
}

Solution

  • Maybe you should use Path:

    Path path = new Path();
    // Set the starting position of the path to (0,0).
    path.moveTo(0, 0);
    path.arcTo(...); //draw your arc here
    path.circleTo(); //draw a small circle here at the end of arc
    

    Also maybe you should calc the arc's end position and use as a center for small circle.