Slide 1
Slide 1 text
VectorDrawable
AnimatedVectorDrawable
First step
2017/01/25 (Wed)
@konifar / Quipper Ltd
droid girls #3
Slide 2
Slide 2 text
@konifar
Slide 3
Slide 3 text
What is
VectorDrawable?
Slide 4
Slide 4 text
VectorDrawable
• Drawable described by SVG (Scalable Vector
Graphics) format.
• API Level 21~ : OS supports
• ~API Level 21 : Compatible by Support Library
23.2~
Slide 5
Slide 5 text
SVG (Scalable Vector Graphics)
• Described the image by vector path data
https://www.w3.org/TR/SVG/
• Familiar with the web app.
• Supported by many design tools.
(Illustrator, Sketch etc,,,)
Slide 6
Slide 6 text
Vector path data
• Like drawing in the canvas.
Slide 7
Slide 7 text
Vector path data
1. Move to the coordinate (x:38, y:24)
Slide 8
Slide 8 text
Vector path data
2. Line to the coordinate (x:16, y:10)
Slide 9
Slide 9 text
Vector path data
3. Line to the coordinate (x:16, y:38)
Slide 10
Slide 10 text
Vector path data
4. Back to the first coordinate (x:38, y:24)
Slide 11
Slide 11 text
width, height
• Actual size of the image.
Slide 12
Slide 12 text
viewportWidth, viewportHeight
• Canvas size for the path data.
Slide 13
Slide 13 text
Other attributes
• Basically these attributes are aligned with SVG
format.
Slide 14
Slide 14 text
Benefit of
VectorDrawable
Slide 15
Slide 15 text
1. Scalable with the high quality
We can change the image size
without the degradation of image quality.
3BTUFSJNBHF 7FDUPSJNBHF
Slide 16
Slide 16 text
2. Reduce apk size
Since we don’t have to put many image files for each
dpi, we can reduce apk size.
Slide 17
Slide 17 text
3. Animatable
As MaterialDesign recommends, we can add the animation
to the images. Such as rotation, move, transform.
https://material.io/guidelines/motion/creative-customization.html#creative-customization-
icons
Slide 18
Slide 18 text
Caution
• From a performance point of view, Google
recommends that we limit a vector image to a
maximum 200 x 200 dp.
https://developer.android.com/studio/write/vector-asset-studio.html
• VectorDrawables use a Bitmap cache, but the first
rendering speed is not so fast.
We shouldn't use too complex vector image.
https://upday.github.io/blog/vector_drawables_optimisation/
Slide 19
Slide 19 text
)PXUPVTF
4VQQPSU7FDUPS%SBXBCMF
https://android-developers.googleblog.com/2016/02/
android-support-library-232.html
Slide 20
Slide 20 text
build.gradle
Gradle Plugin 2.0+
Gradle Plugin 1.5
Slide 21
Slide 21 text
build.gradle
• Actually, we don’t have to add “support-vector-
drawable” to dependencies.
Because appcompat contains it.
• But I think it’s good to add it because appcompat
might change current dependencies.
Slide 22
Slide 22 text
Activity
• After Support Library 23.3~, you have to write this
to enable VectorDrawableCompat in each Activities.
Slide 23
Slide 23 text
ImageView, ImageButton
• Use “app:srcCompat” instead of “android:src”
• Use “setImageResource()” to set an image
programatically
Slide 24
Slide 24 text
TextView, Button
• Create“StateListDrawable” and use it to set
“drawableLeft” or “drawableRight”.
• Do you want to know why does this work? Please see this!
http://qiita.com/takahirom/items/c6f5a3204210d1e95c70
ic_play_48dp_state.xml
Slide 25
Slide 25 text
ImageView
ImageButton
Use “app:srcCompat” attribute.
Toolbar menu icon
Bottom navigation icon
Navigation drawer icon
Use VectorDrawable directly.
TextView
Button
Create StateListDrawable and use it instead of
VectorDrawable.
• VectorDrawableରԠ·ͱΊ (Japanese)
http://qiita.com/konifar/items/bf581b8f23dea7b30f85
Slide 26
Slide 26 text
Useful Tools
Slide 27
Slide 27 text
VectorAsset
• File > New > VectorAsset
• You can put VectorDrawable easily.
Slide 28
Slide 28 text
VectorAsset
Slide 29
Slide 29 text
VectorAsset
Slide 30
Slide 30 text
vector-drawable-previewer
• It’s difficult to review VectorDrawable on the
browser. This chrome extension shows
VectorDrawable graphically.
https://github.com/jmatsu/vector-drawable-previewer
Slide 31
Slide 31 text
Thanks!
Slide 32
Slide 32 text
Animated
VectorDrawable
• https://developer.android.com/reference/android/
graphics/drawable/AnimatedVectorDrawable.html
• https://www.youtube.com/watch?v=wlFVIIstKmA
Slide 33
Slide 33 text
What is AnimatedVectorDrawable?
We can animate VectorDrawable by using
ObjectAnimator and AnimatorSet.
1. Change colors, position.
2. Rotate icon.
3. Morph to other icon shape.
Slide 34
Slide 34 text
Introduction
1. Put arrow and stop vector drawable xml.
2. Create animator xml.
3. Create AnimatedVectorDrawable xml.
res/drawable/ic_play.xml
res/drawable/ic_pause.xml
Slide 35
Slide 35 text
Introduction
1. Put arrow and stop vector drawable xml.
2. Create animator xml.
3. Create AnimatedVectorDrawable xml.
animator/anim_play_to_pause.xml
animator/anim_pause_to_play.xml
Slide 36
Slide 36 text
Introduction
1. Put arrow and stop vector drawable xml.
2. Create animator xml.
3. Create AnimatedVectorDrawable xml.
drawable/avd_play_to_pause.xml
drawable/avd_pause_to_play.xml
Slide 37
Slide 37 text
Point 1
How to start animation?
Slide 38
Slide 38 text
1. How to start animation?
• AnimatedVectorDrawable is not like a
StateListDrawable.
• Actually we need to call start() method
programmatically :(
Slide 39
Slide 39 text
1. How to start animation?
Slide 40
Slide 40 text
Point 2
Caution for morphing
Slide 41
Slide 41 text
2. Caution for morphing
• Actually we can not animate no matter what kind of
VectorDrawable.
• Official document says that
“Note that the paths must be compatible for
morphing. In more details, the paths should have
exact same length of commands, and exact same
length of parameters for each commands.”
https://developer.android.com/reference/android/graphics/drawable/
AnimatedVectorDrawable.html
Slide 42
Slide 42 text
Can I morph or not?
• M38,24 L16,10 L16,38z
M12 10 L20 10 L20 38 L12 38z M28 10 L36 10 L36
38 L28 38z
• M38,24 L38,24 L16,24 L16,10z M38,24 L38,24
L16,38 L16,24z
M12,10 L20,10 L20,38 L12,38z M28,10 L36,10
L36,38 L28,38z
Slide 43
Slide 43 text
Can I morph or not?
• M38,24 L16,10 L16,38z
M12 10 L20 10 L20 38 L12 38z M28 10 L36 10 L36
38 L28 38z
• M38,24 L38,24 L16,24 L16,10z M38,24 L38,24
L16,38 L16,24z
M12,10 L20,10 L20,38 L12,38z M28,10 L36,10
L36,38 L28,38z
̋
✕
Slide 44
Slide 44 text
Vector path
M38,24
L16,10
L16,38
z
Slide 45
Slide 45 text
Same shape
M38,24
L38,24
L16,24
L16,10
z
M38,24
L38,24
L16,38
L16,24
z
Slide 46
Slide 46 text
M38,24
L38,24
L16,24
L16,10
z
M38,24
L38,24
L16,38
L16,24
z
M12,10
L20,10
L20,38
L12,38
z
M28,10
L36,10
L36,38
L28,38
z
Official document says that
“Note that the paths must be compatible for morphing.
In more details, the paths should have exact same
length of commands, and exact same length of
parameters for each commands.”
Slide 47
Slide 47 text
M38,24
L38,24
L16,24
L16,10
z
M38,24
L38,24
L16,38
L16,24
z
M12,10
L20,10
L20,38
L12,38
z
M28,10
L36,10
L36,38
L28,38
z
10 commands length and exactly same
commands (Alphabet)
Slide 48
Slide 48 text
It’s so hard :(
• You can use VectAlign. This tool create vector path
that allows morphing each vector paths.
https://github.com/bonnyfone/vectalign
Slide 49
Slide 49 text
AndroidIconAnimator
• You can simulate VectorDrawable Animation
and download it from web!
https://romannurik.github.io/AndroidIconAnimator/
Slide 50
Slide 50 text
Thanks again!
Slide 51
Slide 51 text
Note
• Plaid uses AnimatedVectorDrawable effectively. We
can learn a lot from it.
https://github.com/nickbutcher/plaid
• VectAlign is awesome tool to create vector path that
allows morphing each vector paths.
https://github.com/bonnyfone/vectalign
• Documentation and introduction video.
https://developer.android.com/reference/android/graphics/drawable/
AnimatedVectorDrawable.html
https://www.youtube.com/watch?v=wlFVIIstKmA