Well this time the control is small...very small and doesn't have any special features but I needed it and so I thought it might be a good idea to create it.
If you own an Android phone you might know the Material Design Circular Progress Indicator (indeterminate) which looks like this...
Like last weeks friday fun component the problem with this control is not obvious. In principle it's a simple arc where the arcs angle extend accelerates until it gets near to the arcs start, then it decelerates and the arc start angle accelerates. This happens in a combination with a rotation of the whole arc which gives us the nice effect.
I've tried different approaches before I came to the conclusion that an animated dashed arc might be the solution.
To be honest it was a lot of trial and error before I got the parameters right (at least good enough for this control).
After I've found a set of parameters that worked out I realized that the whole thing is dependend on the current size of the control. Means if you increase the size of the circle the dash array needs to be updated otherwise you will suddenly see more than one line moving around. Because it tooks some time to figure out the right parameters for one size I've decided to go with the easy approach...simply scaling the circle instead of really resizing it.
To make sure the circle always stays in the center of the pane I've exchanged the Pane (that I usually use) with a StackPane which does the centering for me. With this approach I'm able to create the circle and resize it properly. The progress indicator will switch to the indeterminate state if the progress is < 0. You can simply call .setProgress(ProgressIndicator.INDETERMINATE) to achieve that. If the progress is between 0 - 1 the circle will be replaced by an arc that shows the current progress. I did not add animation to the standard progress (0 - 1) which could be done by yourself if you like...simply animate the progress between 0 and 1 :)
So here is the result and because it doesn't make sense to show you a screen shot I've recorded a little video...
Another tiny blogpost finished...now enjoy your weekend and if you are interested in the code you can find it on github as always...
sources on github
Oh and don't forget...keep coding... :)
Brilliant ! Thank you so much for all your great work making these nifty controls.
ReplyDelete