How to create a Circle Animation in Android?

Question

I'm trying to create an animation which gets a percentage value (0-100) and stretches a thick line in a curve according to the value, where 100% is a full circle, 50% is half a circle and so on.

I've added a view to be my starting line:

<View
    android:id="@+id/testAnimationView"
    android:layout_width="30dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:background="#FF000000" />

I've tried creating a ScaleAnimation on the View but it seems I only succeed to make a "straight line" animation where the X and Y are stretched to create a bigger square, but it's not what I need..

How can I create an animation which starts with a very thin line and stretches it to a circle with the percentage value?

Something like that, but not always spinning like the regular progress bar, but one which will animate from its current percent location to the given percentage value (for example from 33% to 50%) and then stops. — CodeMonkey, Feb 20 '17 at 15:36
Hope this helps : http://stackoverflow.com/questions/29381474/how-to-draw-a-circle-with-animation-in-android — hiashutoshsingh, Feb 20 '17 at 16:26

score 1 · Answer 1 · answered Feb 21 '17 at 08:30

1

try integrating samples projects in your code

https://github.com/lzyzsd/CircleProgress

https://github.com/lopspower/CircularProgressBar

answered Feb 21 '17 at 08:30

Ajay Venugopal

1,544
1
17
30

score 1 · Answer 2 · answered Feb 21 '17 at 14:44

as Ajay Venugopal said you can use CircularProgressBar.java from https://github.com/lopspower/CircularProgressBar/blob/master/circularprogressbar/src/main/java/com/mikhaellopez/circularprogressbar/CircularProgressBar.java

The only change you have to do in CircularProgressBar.java is:

Line 64:

foregroundPaint.setStyle(Paint.Style.FILL);

Line 75:

canvas.drawArc(rectF, startAngle, angle, true, foregroundPaint);

in your layout

<CircularProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cpb_background_progressbar_color="#b6bbd8"
        app:cpb_background_progressbar_width="10dp"
        app:cpb_progressbar_color="#3f51b5"
        app:cpb_progressbar_width="20dp"
        android:id="@+id/progressBar" />

then in your MainActivity.java

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        final CircularProgressBar circularProgressBar = (CircularProgressBar) findViewById(R.id.progressBar);
        circularProgressBar.setProgressWithAnimation(65, 4000);

}

How to create a Circle Animation in Android?

2 Answers2