With new, exciting mobile devices coming out
every day with new screen sizes and resolutions,
it can be difficult making sure your images look
best on every new device that hits the stores.
Hi.
I'm Tenghui from the Android UI Tokyo team,
and I'm here to help you make your graphics look their best
by telling you all the new vector graphics support
we have added in Android 5.0, Lollipop.
So what are vector graphics, and why would you want to use them?
A normal bitmap represent images as a set of pixels in a grid.
But with vector graphics, you can represent an image
by describing the object geometrically.
This means you can describe an image
as a set of points, lines, and curves,
along with all the associated color information.
So how does this help you?
The major advantage for vector graphics is image scalability.
Take a look at this bitmap images.
It looks fine on a low-res screen with a size of 100x100.
But if you would put it on the high-res screen
with a size of 400x400-- while we can scaled it out,
you can see how it ends up looking blurry.
So what many developers end up doing
is creating multiple versions of each image
for different display resolutions.
This means more time to create extra access,
and more space taken up by the APK and on the device.
But with vector images, you only need to create an image once,
as an XML file.
And it can scale beautifully for all different DPIs
for different devices.
This not only save space, but also simplify maintainance.
You can also use vector images for animation.
Instead of having multiple series
of images for all different DPIs,
now all you need is just several XML files.
Prior to the Lollipop release, if you ever
wanted to draw anything using vector representation,
you had to manually do it all in Java code, which
was cumbersome.
In Lollipop, we have two new classes
to support vector graphics as our drawable resources.
VectorDrawable, and AnimatedVectorDrawable.
VectorDrawable defines a static drawable object,
while AnimatedVectorDrawable can add animations
to the properties of VectorDrawable.
They are both subclasses of Drawable,
and they are both represented by XML files.
Let's take a look at the XML structure
of the VectorDrawable.
Similar to the XVG format, each VectorDrawable
can be represented as a tree hierarchy.
Geometry is defined in a path text, which
are all the leaves of this tree.
All the path descriptions and joint attributes
are inside this tech.
All path will be joined in the same order
as they appear in the XML file.
Transformations are defined in a group tag which
are the internal nodes of the tree.
Know that for each path object, its transformation
is inherited from all its ancestor groups'
transformation, applied in the order from the top
to the bottom.
Here's how it looks like in the XML file.
You can clearly see the tree structure
with those highlighted texts.
Feel free to see more details in the link, as shown below.
Now let's switch to the AnimatedVectorDrawable.
First, here is the diagram of its structure.
On the top, the AnimatedVectorDrawable's XML
is essentially a little bit of glue
which connects the VectorDrawable's XML,
on the bottom left, with the object animator's XML
files over there on the bottom right,
which describe the animations for the properties
of a VectorDrawable.
To actually glue those two things up,
AnimatedVectorDrawable uses names
to find a target object inside the VectorDrawable, like the G1
here.
Notice that the target object to be animated
can be either a group, a path, or a [INAUDIBLE]
and they must be uniquely named.
Then, we can apply the specified object animator,
like the a.xml in this example to the target
object we just find by name.
Inside the object animator, we need
to specify the property name to animate,
like the rotation in this example,
and the values for animation.
Now, let's take a look at an example
of an AnimatedVectorDrawable.
First, before adding the animations,
the image on the left shows how the static VectorDrawable
looks, and its XML code is on the right hand side.
If we add an animation of the group's rotation property,
like this, then we can get the rotation animations, like this.
If we add animation to the path's color attributes,
like this, then we can change the color
of the sun from orange to red, like this.
Moreover, if we animate a path data attributes,
like this, notice the value time now is set to the path time.
Then, we can change the shape of the sun
as a path morphing in this cute animation.
Now let's talk about some of the trade offs and performance
aspects of these new classes.
VectorDrawable has performance implications.
With that in mind, my suggestions are first,
simplify the vector representation of an object.
For example, avoid using many opt-to commands
in the path data.
Second, limit image size of your VectorDrawable.
Because these Drawables are first
drawn into bitmaps then uploaded to the texture on the GPU,
larger bitmaps means more memory and more time to upload.
Practically, I would recommend using VectorDrawable
for icons and buttons with reasonable sizes.
For example, less than 200x200 DP.
Third, don't update the attributes
of the VectorDrawable unless necessary.
When there's no changes to the attributes like width, height,
or alpha, our framework will be able to keep a cached bitmap
without redrawing the path or reuploading texture to the GPU.
For AnimatedVectorDrawable, caching won't help here.
So keep your animations short and sweet.
Additionally, animating the path data attributes
or the [INAUDIBLE] path attributes
are heavy operations.
Try to see if you can use transformation only
for your animation to avoid those heavy operations.
One last question you might have is,
how do I create an XML file for the VectorDrawable?
Our tool team is hard at work on building new tools
to help you generate these XML files.
In the meantime, it's actually possible to create them
by hand with just a little work.
First, you can use any joint program
that can export SVG to create your images.
Then, with a little cutting and pasting,
you can get the contents into your XML files.
The VectorDrawable and AnimatedVectorDrawables
are awesome classes that can help
you to build a better-looking, smaller app in an easier way.
Please follow these links for more details
on how to use them.
Thank you.