153

Have you any idea how to make a circular progress bar like the one of Google Fit application? Like the image below.

enter image description here

Floern
  • 33,559
  • 24
  • 104
  • 119
Mohamed
  • 2,342
  • 4
  • 21
  • 32
  • 7
    I've actually made something like this recently. This might be a helpful starting point? https://github.com/daentech/CircularDemo – daentech Nov 30 '14 at 12:50
  • 1
    Anyone got an answer where the edges of the loading part are rounded like in the example? – Siebe Dec 01 '14 at 18:32
  • Refer here : http://stackoverflow.com/questions/23509065/showing-progress-in-the-circle – WannaBeGeek Dec 02 '14 at 16:50
  • 1
    @Siebe you can use the library that I mentioned in my answer .It can be customized to get loading part as you want. – WannaBeGeek Dec 02 '14 at 17:04
  • 2
    maybe this can point you in the right direction https://github.com/grmaciel/two-level-circular-progress-bar – gmemario Oct 13 '15 at 23:26
  • Sigh... Why did google did not even bother to add it on their official SDK? – Neon Warge Sep 14 '16 at 09:09
  • you can use something like this https://github.com/emre1512/CircleProgressBar – Zapdos Aug 04 '17 at 08:09
  • https://github.com/lopspower/CircularProgressBar and with it you can use: `app:cpb_corner_style="round"` for rounded corners – mtrakal Feb 22 '18 at 15:00

2 Answers2

342

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 value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

Stop Animation

progressBar.clearAnimation();

P.S. unlike examples above, it give smooth animation.

Micer
  • 8,731
  • 3
  • 79
  • 73
Murtaza Khursheed Hussain
  • 15,176
  • 7
  • 58
  • 83
129

You can try this Circle Progress library

enter image description here

enter image description here

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"/>
Community
  • 1
  • 1
Top Cat
  • 2,473
  • 3
  • 22
  • 34