VectorDrawable & AnimatedVectorDrawable

Transcript

1. VectorDrawable AnimatedVectorDrawable First step 2017/01/25 (Wed) @konifar / Quipper Ltd droid girls #3
2. @konifar
3. What is VectorDrawable?
4. VectorDrawable • Drawable described by SVG (Scalable Vector Graphics) format. • API Level 21~ : OS supports • ~API Level 21 : Compatible by Support Library 23.2~
5. 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,,,)
6. Vector path data • Like drawing in the canvas.
7. Vector path data  1. Move to the coordinate (x:38, y:24) 
8. Vector path data  2. Line to the coordinate (x:16, y:10) 
9. Vector path data  3. Line to the coordinate (x:16, y:38) 
10. Vector path data 4. Back to the first coordinate (x:38, y:24)  
11. width, height • Actual size of the image.
12. viewportWidth, viewportHeight • Canvas size for the path data.
13. Other attributes • Basically these attributes are aligned with SVG format.
14. Benefit of VectorDrawable
15. 1. Scalable with the high quality We can change the image size 
 without the degradation of image quality. 3BTUFS
    JNBHF 7FDUPS
    JNBHF
16. 2. Reduce apk size Since we don’t have to put many image files for each dpi, we can reduce apk size.
17. 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
18. 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/
19. )PX
    UP
    VTF
    4VQQPSU
    7FDUPS
    %SBXBCMF https://android-developers.googleblog.com/2016/02/ android-support-library-232.html
20. build.gradle Gradle Plugin 2.0+ Gradle Plugin 1.5
21. 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.
22. Activity • After Support Library 23.3~, you have to write this to enable VectorDrawableCompat in each Activities.
23. ImageView, ImageButton • Use “app:srcCompat” instead of “android:src”
 
 
 
 
 • Use “setImageResource()” to set an image programatically
24. 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
25. 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
26. Useful Tools
27. VectorAsset • File > New > VectorAsset • You can put VectorDrawable easily.
28. VectorAsset
29. VectorAsset
30. 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
31. Thanks!
32. Animated VectorDrawable • https://developer.android.com/reference/android/ graphics/drawable/AnimatedVectorDrawable.html • https://www.youtube.com/watch?v=wlFVIIstKmA
33. 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.
34. 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
35. 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
36. 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
37. Point 1 How to start animation?
38. 1. How to start animation? • AnimatedVectorDrawable is not like a StateListDrawable. • Actually we need to call start() method programmatically :(
39. 1. How to start animation?
40. Point 2 Caution for morphing
41. 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
42. 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
43. 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 ̋ ✕
44. Vector path M38,24
 L16,10
 L16,38
 z
45. Same shape M38,24 
 L38,24 
 L16,24 
 L16,10
 z
 M38,24 
 L38,24 
 L16,38 
 L16,24
 z
46. 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.”
47. 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)
48. It’s so hard :( • You can use VectAlign. This tool create vector path that allows morphing each vector paths.
 https://github.com/bonnyfone/vectalign
49. AndroidIconAnimator • You can simulate VectorDrawable Animation
 and download it from web!
 https://romannurik.github.io/AndroidIconAnimator/
50. Thanks again!
51. 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