4

Hi I want to create a circle loader that animates from 0 to a variable int and fills in based on that number. For example, for the range 0 to 100, if the progress is 50 half the circle will be filled. How can I firstly create the shapes programmatically and then animate it?

something similar to this?

enter image description here

fersarr
  • 3,399
  • 3
  • 28
  • 35
Luke Batley
  • 2,384
  • 10
  • 44
  • 76

1 Answers1

3

One way you can do this, is by drawing a circle on a canvas. You then use a custom dashed effect with the circle's stroke. Then, you animate the values of this dash effect, so that the circle's outline appears to grow around the circumference.

It looks like you can use the DashPathEffect to create the stroke patterns you need. Here is a StackOverflow answer showing how to use this.

You could then use an ObjectAnimator to animate the change in dash pattern.

--- EDIT ---

I just found a more complete answer on StackOverflow that describes in more detail how to use these two classes to animate a path.

Community
  • 1
  • 1
Levi Lindsey
  • 1,049
  • 1
  • 10
  • 17