5

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();
    }
}
3
  • can you send me how you implemented this, the complete code Apr 1, 2019 at 7:53
  • @mohdkhalidSiddiqui github.com/moinkhan-in/MProgressBar
    – Moinkhan
    Apr 1, 2019 at 7:56
  • i want 3 arcs on view (like three stages of growth), as i slide on arc anticlockvise the color of the arc should change, and i should be able to jump from one arc to another. Any solution for that ? Apr 1, 2019 at 9:01

2 Answers 2

3

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.

0
2

Step 1: Calculate the position of the black dot

Suggest the central position is (centerX, centerY), the position of black dot is (x,y), then,

x = radius * cos(mStartAnagle+mSweepAngle) + centerX;
y = radius * sin(mStartAnagle+mSweepAngle) + centerY;

Step 2: Draw the black dot

Suggest the dot image is R.drawable.dot ,

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.dot) 
                             .copy(Bitmap.Config.ARGB_8888, true);
canvas.drawBitmap(bitmap, x, y, null);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.