[MUSIC PLAYING]
NICK BUTCHER: Hi, everyone.
My name is Nick Butcher.
I'm a designer and engineer at Google,
and I'm also a vector addict.
And I've got five minutes to tell you some about-- about
some of the advanced features of Vector Drawables,
Android's vector format supports, so let's get started.
So I posit that most assets in your applications
should be vectors these days.
Vectors are awesome.
They're sharp on every single density display.
They're very small.
They compress well, so they don't blow your ADK.
But they're also extremely flexible,
and I want to talk about this a bit
today so you can get the most out
of vectors to realize these benefits as widely as possible.
So most vectors in your app probably
look something like this.
They have some paths, and they're probably
hard-coding a color, something like this fill or stroke here.
Maybe you're using a color resource like this.
But there's actually a lot more you can do here,
which I want to talk about.
The first thing is using theme colors.
So you can use theme colors in two ways, really.
The first is by applying a theme color as a tint.
This will tilt the entire drawable
based on the current theme.
So here, I'm using the theme attribute ColorControlNormal,
which is the normal color for icons,
and as such, you can have one single asset which displays
in different themes, say a light screen or a dark screen,
and it gets tinted to be the right color.
You no longer have to worry what color asset you
got from your designers in the SVG,
that they've got exactly the right shade of gray
that you need.
It'll be tinted at runtime, so it is always correct.
You can also use theme colors directly in the fill or stroke.
So in this example here, I'm going to use color primary.
So say you have different screens in your app--
say, a sports app which uses a theme for a given team.
You can reference that theme color,
so you can have a single drawable, which
just parts of it get colored based on the theme, which
can be useful.
Cool, that was theme colors.
Next up, ColorStateLists.
So in vector support I'm resting ColorStateLists,
you can do some fun stuff.
So in this example, and on press state, we're changing color,
or perhaps you have a list app, where
when a row item is selected, you could have it change
the rendering using that state.
You could do this with a normal stateless
drawable and two drawables and flip between them.
But if, say, the rendering is 99% the same,
you just want change the stroke here,
this saves some duplication.
You define it like this, like a regular ColorStateList
in your color resources and refer to it, as you would,
like a color resource.
And last, my favorite feature is gradients.
So vectors support three different types of gradients--
linear, radial, and sweep--
which you define like this.
So a linear gradient has a start and end x, y coordinates.
A radial has a center and a radius,
and a sweep just has a center point.
I've so far been using the shorthand of start, end,
or even center colors to define gradients,
but you can actually get much more fine grained
and embed these item tags inside it to define individual color
stops.
So here, I'm going for a specific color
at 72% of the way through.
Like ColorStateLists, you define gradients in a color resource
directory, or you can use the inline resource syntax
to embed it inside the vector definition itself.
And at build time, AAPT will actually
extract that to a color resource and insert a reference to it
for you, which is handy.
So gradients have been super handy in building apps.
Here's an illustration from a [INAUDIBLE] IO app, which
if we'd made it as a gradient, would
be-- with gradient support, would have been 1/5
the size of the [INAUDIBLE] we had to ship
and sharp everywhere.
It's really useful for things like adaptive icons
because, unfortunately, vectors don't support drop shadows,
but you can fake it a lot of the time using gradients.
Or if you need to build something like a customized
spinner, this is really trivial to achieve
using a radial gradient.
So gradients only support certain shapes,
like this linear, radial, and sweep, but paths in vectors
can be transformed, like rotated and so on.
So in this example, I wanted to create this oval shaped shadow
beneath the jetpack Droid.
So I did this by drawing a circle with a radial gradient,
and then using the scale y feature
to transform it to produce the effect that I was after.
If the gradient you define doesn't fill the entire shape
you're drawing to, you can use the Tile mode to control how
it fills the rest of the area.
So in this example, the default mode of Clamp,
it just continues the color outwards.
If you use a repeat mode, it'll repeat between the gradient,
going back--
continuing it.
Or a mirror mode will go back and forth through the gradient.
You can also use gradients which don't
go through different colors, so by using
the same color between two stops and having the next stop
start the same point, you can have these solid color blocks.
Why would you want a gradient that doesn't do that?
Well, you can have some fun with some pretty cool effects.
So this example of a rainbow is with one single shape
using a radial gradient with these solid color stops.
You can do something like a loading spinner,
or you can combine it with a tile mode
to make some kind of pattern support.
So this is the gradient over this area,
and the pattern-- the tile mode repeats
it to give you a pattern, and you
can have some fun doing something
like animating it to produce this kind of loading effect.
So hopefully, I've shown you that vectors are sharp, small,
and extremely flexible, so you can use them everywhere.
As a final example, I want to show you what you can build.
This is a single animated vector drawable
drawn by the amazing Virginia [INAUDIBLE],,
and I had the pleasure of animating it.
So this is one vector drawable, extremely small, extremely
sharp in every display.
You can have some fun with them.
So that's Vector Drawables.
Thanks very much.
[MUSIC PLAYING]