Animation / Drawable / Material Design / ProgressBar

Indeterminate – Part 4

Indeterminate ProgressBars are a useful tool for communicating to our users that an operation is in progress when we cannot predict how long it is likely to take. Previously on Styling Android we’ve covered how to create a backwardly compatible approximation of the material styled horizontal indeterminate ProgressBar but we haven’t looked at the circular form – in this series we’ll create an approximation of the material circular indeterminate ProgressBar which will be backwardly compatible to API 11 (Honeycomb).

In the previous article we created a custom Drawable which is capable of drawing an arc and has setters to control the start and end points of the arc and the overall rotation. The next logical set is to create a set object Animators which will change these values over time and therefore create the animations that we require.

Before we look at the code I should point out that I’m not a big lover of utility classes which only contain static methods – they do not represent actual objects so do not have a clear role in pure Object Oriented code. However I have used one in this case purely to separate the Animator construction away from the Drawable itself to compartmentalise things and (hopefully!) make the code easier to follow.

This is simple enough, we’re creating three different Animators and adding them to an AnimatorSet to play them together.

These are the two Animators which will control the start and end points of the arc. The value of the SWEEP_DURATION constant has been copied directly from the AOSP code that we looked at to try and match it as closely as possible. The methods to create the Interpolators are placeholders for the moment – we’ll do something far more interesting with them in a moment.

Next we have the rotation animator:

Once again, the value of ROTATION_DURATION is copied from the AOSP implementation. In this case we’re going to stick with a LinearInterpolator because we want a uniform rotation.

We now need to update the createAnimator() method in IndeterminateDrawable:

If we run this we get a short, rotating line:

The start and end points are moving together because of they are both using identical LinearInterpolators. The reason for the short segment being drawn despite the start and end values being the same is the square caps that we set on our Paint object in the Drawable – this will case the ends to be rendered slightly beyond the length of the arc being drawn.

We can improve this by using different interpolators for the start and end animators:

So the start point Animator will start fast end slow down as it gets towards the end, and the end Animator will start slow and accelerate as it approaches the end:

That’s getting closer, but we can do better!

Before we move on it’s just worth seeing what things look like if we disable the rotation – it helps understand what these two interpolators do together, and also shows what the rotation animator is doing for us:

In the final article in this series we’ll work more on the Interpolators which are the special sauce which brings everything together.

The source code for this article is available here.

© 2016, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0 Indeterminate – Part 4 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

Leave a Reply

Your email address will not be published. Required fields are marked *