Pro Yearly is on sale from $80 to $50! »

VectorDrawable & AnimatedVectorDrawable

35e08efcf39d692f540047fb756eb4e3?s=47 konifar
January 25, 2017

VectorDrawable & AnimatedVectorDrawable

35e08efcf39d692f540047fb756eb4e3?s=128

konifar

January 25, 2017
Tweet

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. 3BTUFSJNBHF 7FDUPSJNBHF
  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. )PXUPVTF 4VQQPSU7FDUPS%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