Now it is time to draw our first animated shape. Let’s say we need to draw a rectangle that smoothes morphs to circle. To do that we will precede with regular round rectangle drawing, but instead of hardcoding rectangle corner radius we will animate it from 0 to (rectangle width / 2). So our onDraw method will look like this:

The next step is very similar to what we done above with ValueAnimator — all you need is to update radius variable.

Rectangle to circle

But here is one more thing: all the drawing is frame by frame process, what means that if we want to animate our shape we will need to redraw it as new animated value comes out.

That’s why it is required to call invalidate() to make view redraw with new animated value.

On the gif file, you can see how it is going to look like.

That was it, a single animated property makes our shape transforming smoothly from square to circle! But what if we need to draw more complex shapes and animate multiple properties at once? Lets take a look on it without getting far from already made animation.

What we gonna add is a rotation. So to make a smooth morphing from square to circle with shape rotating around itself, we will need to animate at least two values at the same time, and ValueAnimator does support this out of the box.

By setting PropertyValuesHolder as values to ValueAnimator we can animate as much values at the same time as we need, so this is pretty handy in more complex animations, that you will probably use it your further projects.

By adding canvas.rotate(…) method just before drawing a rectangle, you should be able to achieve something like this.

canvas.rotate(rotate, viewWidth, viewHeight);

Interpolator

The time interpolator is used in calculating the elapsed fraction of this animation. The interpolator determines whether the animation runs with linear or non-linear motion, such as acceleration and deceleration.

In material design Google recommends to avoid linear animations, instead to use natural easing curves. Acceleration and deceleration changes should be smooth across the duration of an animation so that movement doesn’t appear mechanical.

Google took care of us and included various number of different interpolators in Android, so it should be enough for most cases.

Note: the default value is AccelerateDecelerateInterpolator

set Interpolator to ValueAnimator

Analytics chart

Inspired by Creative Jeff

Let’s get a bit further on and try to create live analytics chart, that potentially could be used in many projects. This is quite common situation when you receive such gif file from your designer to implement something similar.

If you are new in Android, don’t be scary of it — it’s not as complicated as it may seem at a first glance.

We will try to analyse it and catch every part of it, so we can clearly understand what does it consist of and what exactly we have to animate. Moreover this is completely open source project, so you can look more closely on it if you want.

You can also find many of this kind charts on GitHub as cool, customisable libraries, that are quite popular between developers, but as we are only learning this technics, we will try to make our own one!

Take a closer look

While developing a custom view, it is important to separate the whole view into some pieces to simplify it and understand what exactly we need to draw, so let’s take a closer look at this analytics chart.