How to create circular ProgressBar in android? [closed]
It's easy to create this yourself
In your layout include the following ProgressBar
with a specific drawable (note you should get the width from dimensions instead). The max value is important here:
<ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="150dp" android:layout_height="150dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:max="500" android:progress="0" android:progressDrawable="@drawable/circular" />
Now create the drawable in your resources with the following shape. Play with the radius (you can use innerRadius
instead of innerRadiusRatio
) and thickness values.
circular (Pre Lollipop OR API Level < 21)
<shape android:innerRadiusRatio="2.3" android:shape="ring" android:thickness="3.8sp" > <solid android:color="@color/yourColor" /> </shape>
circular ( >= Lollipop OR API Level >= 21)
<shape android:useLevel="true" android:innerRadiusRatio="2.3" android:shape="ring" android:thickness="3.8sp" > <solid android:color="@color/yourColor" /> </shape>
useLevel is "false" by default in API Level 21 (Lollipop) .
Start Animation
Next in your code use an ObjectAnimator
to animate the progress field of the ProgessBar
of your layout.
ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that valueanimation.setDuration(5000); // in millisecondsanimation.setInterpolator(new DecelerateInterpolator());animation.start();
Stop Animation
progressBar.clearAnimation();
P.S. unlike examples above, it give smooth animation.
You can try this Circle Progress library
NB: please always use same width and height for progress views
DonutProgress:
<com.github.lzyzsd.circleprogress.DonutProgress android:id="@+id/donut_progress" android:layout_marginLeft="50dp" android:layout_width="100dp" android:layout_height="100dp" custom:circle_progress="20"/>
CircleProgress:
<com.github.lzyzsd.circleprogress.CircleProgress android:id="@+id/circle_progress" android:layout_marginLeft="50dp" android:layout_width="100dp" android:layout_height="100dp" custom:circle_progress="20"/>
ArcProgress:
<com.github.lzyzsd.circleprogress.ArcProgress android:id="@+id/arc_progress" android:background="#214193" android:layout_marginLeft="50dp" android:layout_width="100dp" android:layout_height="100dp" custom:arc_progress="55" custom:arc_bottom_text="MEMORY"/>