Tram Ho

Working with customers is always a difficult challenge for developers. Many customers want a nice and complex interface for their application, so that their application becomes impressive as well as retain many users. Therefore, many people want to build their application that looks really different, unlike any other application, that has a unique interface with motion effects or images that make users not want to switch to the application. differs from the same function.

So, what is the answer to this problem? It must be a custom view.

In this article, we will focus on some techniques that allow creating effects for the view, making them more responsive as well as looking more natural.


Before drawing anything, we need to understand how a custom view creates its effect: ValueAnimator. In Android, this class provides a simple timing engine for moving effects. This timing engine calculates the effect values ​​and installs them into the required objects.

When drawing anything in Android, we need to work with lots of numbers. So basically what ValueAnimator does is provide us with constantly changing numbers, and using these numbers while drawing custom views will create a smoother effect. Try an example of installing a simple effect, with values ​​from 0 to 100 as follows:

In the example above, we set the duration of the effect to 2 seconds, which means the value will be increased from 0 to 100 in 2 seconds. Now, we will create the effect. Suppose we create an effect that makes a square turn into a circle. To do this, we will use an angled square, but instead of hard fixing its cornor radius, we will change this value from 0 to (edge ​​length / 2). So in the onDraw () method, we will write the following:

The next step will be similar to what we did above with ValueAnimator, all we need to do is update the conor radius value. However, there is a problem: if we want to effect our image, we need to redraw it every time the value is updated.

That’s why we need to call the invalidate () method to make the view redraw with the new value. The result we obtained is This is a simple effect that makes the square turn into a circle. However, when we want to draw more complex shapes with many effects at the same time, what should we do?

Suppose, we need to add a rotation effect, make the square rotate and turn a circle, we need to create an effect with two values ​​at the same time, but ValueAnimator does not support such. Instead, we can use PropertyValuesHolder as the value passed to ValueAnimator, from which we can create multiple applications with many values ​​at the same time as we want, as in complex effects.

Add the canvas.rotate () method before starting to draw the square

We get the results:


Time interpolator is used in calculating the elapsed time of effects. Interpolator will decide when an animation will run with linear or linear effects, such as increasing the speed or deceleration of the effect. In material design, Google recommends that we avoid linear effects, instead using natural curves when creating the effect. Acceleration and deceleration should be performed smoothly throughout the effect for best performance. Here is a comparison example using linear and nonlinear effects: The SDK provided by Google has provided us with most of the necessary interpolators in Android, and in most cases can meet the needs. Note: The default value of Interpolator is AccelerateDecelerateInterpolator


Let’s move on with a view that can often be required in many projects: a graph. When you first look at the image above, you will probably find it difficult to create such a view. But actually it is not too complicated. We will analyze each part of this view in detail, so that we can clearly understand what makes this view and the things we need to create.

Analysis custom view

When we create a custom view, it is important to split the view into simple parts and figure out how to draw them, so we will analyze the above view into a smaller part. As you can see, the graph above is made up of two main parts: the background and a graph line above. The background is made up of lines and numbers, so there’s nothing complicated with this part. The next part of it, is a graph line with effects.

The only difference here from the examples above is that we need to create many different lines that appear in order. First, look at a line and determine the values ​​to draw it.

In Android, a line is drawn by defining the starting point (X; Y) and the ending point (X; Y). In our example, we will only specify the ending coordinates, while the starting coordinates will retain. In addition, at each end (except the end) we will add a small circle at the end. This circle will appear with an alpha effect.

In a nutshell, to draw a line with a small circle at its end, we will need three values: the coordinates (X; Y) of the end point and the alpha color of the alpha effect.

Note: The values ​​are being hardcode for demo

Next, the graph we need to draw has many connecting lines, so we will need ValueAnimator as mentioned above to be able to specify the properties for each line, from which we can create a ValueAnimator set. to create graphs.

After that, we need to make a bunch of ValueAnimators again in the right order, so we’ll use AnimatorSet.

This class will allow us to implement a set of Animator objects in a predetermined order. Animators can be done together, either in sequence, or at a specific delay. With AnimatorSet, we can control the Animator and let them perform in any order we want

Note: AnimatorSet will perform with the time equal to the total time of the Animator it contains.

Doing with AnimatorSet will give us the lines as we wish.


Through the examples above, hopefully you understand more about creating a custom view in Android, which will help make your application more unique and suitable for special requirements. The article cannot avoid shortcomings, hope you can contribute the comments below so I can add more. You can also refer to the ChartView project on GitHub to learn more about creating a complete graph.


Project about graphs:

Share the news now

Source : Viblo