Animated icons on Android
How to improve the user experience using animated icons with vector drawables on Android
According to Material Design specs:
Animation can exist within all components of an app and at all scales, from finely detailed icons to key transitions and actions.
A menu icon that smoothly changes to an arrow serves dual functions: to inform the user and delight them when animation is used in ways beyond the obvious.
But before we dig into the animated icons, we need to understand some important things…
Bitmap x Vector
A bitmap represents an image by a series of colored pixels. Whereas a vector image is represented by geometric shapes (lines, curves) using colors.
But where can this be useful?
The main utility of a vector image is allowing to scale without losing definition.
A bitmap that was created to a 100x100 resolution, has a great view at the same resolution. But if we need to view that same image at a bigger resolution, 500x500 for instance, it will have to be scaled and your view will not be good.
To solve that, we have an option to create a lot of versions of that bitmap for each screen density, causing the APK (Android Package) size to increase more and more.
With vector images, we just need create the graphic once and it will be adjusted to the various densities, avoiding the APK size increase and simplifying the maintenance.
And where do the animated icons come in?
Through the vector characteristics, we can create animations that apply transformations on images, without distortions, and still increase the possibilities of those transformations.
VectorDrawable
Since Android API 21 (today we have a Support Library that backports to Android API 7 and above), we can create vector images easily by the VectorDrawable.
To do this we need define a drawable XML file like this:
The content of pathData attribute must be in a pattern specified to SVG (Scalable Vector Graphics) and it’s called path.
At this sample we are using just two types of commands:
- moveto, represented by M and set a new starting point.
- lineto, represented by L and draws a line from previous point to a new one.
AnimatedVectorDrawable
With AnimatedVectorDrawable we can animate the properties of a VectorDrawable, and to do that, we basically need three XML files:
- A VectorDrawable <vector> in res/drawable/ folder
- One or more ObjectAnimator <objectAnimator> or AnimatorSet <set> in res/anim/ folder
- And a AnimatedVectorDrawable <animated-vector> in res/drawable/ folder
It’s possible to animate attributes of a <group>, <path>, or own <vector> element.
Elements <group> are used to group paths or subgroups that need to be group animated.
- When we define a VectorDrawable we need use a attribute android:name and define a unique name to elements we want to animate, so we can reference them from Animator definitions. example:
- The <group> element defines a group called “rotation”.
- Whereas the element <path>, defines the geometric shapes to be drawn which name is “menu”.
2.1. Animation definitions are represented by ObjectAnimator or AnimatorSet objects.
- In this example, the Animator rotates the target by 180 degrees with a duration of 500 milliseconds.
2.2. The second Animator, transforms a path from a shape to another. Both paths need to be compatibles to the transformation: They must have the same count of commands as well as the same count of parameters per command.
3. The AnimatedVectorDrawable definitions are used to link the VectorDrawable into its animations.
Update
We can define VectorDrawable, ObjectAnimator and AnimatedVectorDrawable at one single file as well. See at this Gist. Thank you Ravi Shanker
The AnimatedVectorDrawable is loaded as a normal Drawable, however, you must call the start() method to start the animation:
Once properly configured, we will get the icon animating this way (the animation duration has been extended to 2 seconds):
Performance
The VectorDrawable has some implications on performance:
- Avoid using unnecessary commands. Simplifies your path.
- Limit the dimension of VectorDrawable. Those Drawables are first drawn into bitmaps then they are uploaded to textures into GPU (Graphics Processing Unit). Therefore, large bitmaps use more memory and take longer to upload. It is recommended to use VectorDrawables for icons and small buttons under 200dp.
- Update the attributes of a VectorDrawable only when necessary. When there is no change in width, height or opacity (alpha), the framework will be able to maintain a bitmap cache without redrawing the path or uploading the texture into the GPU. For AnimatedVectorDrawable, this cache approach will not help. So, keep your animations short and simple y.
Check it out the sample project on github:
https://github.com/andremion/Android-Animated-Icons
Use animated icons in moderation, keep your application beautiful to provide a better user experience.
Some references and good articles on the topic:
This article was originally published in Portuguese:
Read more related articles:
Have fun ;)
