Delighting Details - Animated Vector Drawables

Source code for the examples presented https://github.com/marcospaulo/DroidconNYC2016-AVD

Vector Drawables are available since Lollipop and are now part of the Support Library. They bring a whole new range of possibilities when it comes to animation that can delight your users in many ways. In this talk we're gonna go through what we can do to animate our vector drawables, how to implement them and support them in a wide range of android versions. We're gonna take a look at how we can do animations with path data as well as trimPath, how to choreograph them to achieve your desired animation. Finally, I'm gonna show how we can play with Vectors on sketch without being a rockstar design so we can create the vectors we need to achieve our animations. I'm gonna show how we can get a SVG from google's material design website and easily change it in Sketch to achieve a very animations using the concepts presented at the beginning.

Transcript

1. Delighting Details - Animated Vector Drawables An overview Marcos Damasceno @marcospaulosd
2. http://life.mirego.com/
3. Early Days
4. ShapeDrawables <?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/ res/android"
 android:shape="rectangle">
 <solid android:color="#007bb6"/>
 <corners android:bottomRightRadius="4dp"
 android:bottomLeftRadius="4dp"
 android:topLeftRadius="4dp"
 android:topRightRadius="4dp"/>
 </shape> Early Days
5. ShapeDrawables Early Days StateDrawables TransitionDrawables
6. Nowadays
7. Nowadays VectorDrawables Introduced with Lollipop Similar to SVG but a bit limited Vector drawables automatically scales to the density of the device
8. Nowadays VectorDrawables <?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:width="48dp"
 android:height="48dp"
 android:viewportHeight="48"
 android:viewportWidth="48">
 
 <group
 android:name="group"
 android:pivotX="24"
 android:pivotY="24">
 <path android:pathData="M 0 0 L 48 0 L 48 48 L 0 48 Z" />
 <path
 android:name="play"
 android:fillColor=“#FFFFFF"
 android:pathData="M 20 15 L 32 24 L 32 24 L 20 33 Z" />
 
 </group>
 
 </vector>
9. SVG
10. SVG XML language, used to draw graphics It supports gradient, rotations, filter effects, animations and so on. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/> </svg>
11. SVG XML language, used to draw graphics It supports gradient, rotations, filter effects, animations and so on. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/> </svg>
12. SVG <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
13. SVG There are 5 line commands for drawing paths. Each command draw a straight line between 2 points <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
14. SVG <path d="M10 10 H 90 V 90 H 10 L 10 10"/> There are 5 line commands for drawing paths. Each command draw a straight line between 2 points M - Move to L - Line To Z - Close Path H - Horizontal Line V - Vertical Line
15. SVG M is always the first command in a path data, it means “Move To”, M - Move to <path d="M10 10
16. SVG M is always the first command in a path data, it means “Move To”, M - Move to <path d="M10 10
17. SVG <path d="M10 10 M is always the first command in a path data, it means “Move To”, M - Move to
18. SVG <path d="M10 10 H draws a horizontal line M - Move to <path d="M10 10 H 90 H - Horizontal Line
19. SVG V draws a vertical line M - Move to H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90
20. SVG L draws a line from the last point until a coordenat x or y M - Move to H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90 L - Line To <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
21. SVG We could even simplify using H 10 and then asking it to close the path M - Move to H - Horizontal Line V - Vertical Line <path d="M10 10 <path d="M10 10 H 90 <path d="M10 10 H 90 V 90 L - Line To <path d="M10 10 H 90 V 90 H 10 L H 10 Z"/> Z - Close Path
22. SVG <path d="M10 10 H 90 V 90 H 10 L H 10 Z" x />
23. SVG <path d="M10 10 H 90 V 90 H 10 L H 10 Z" fill="#EBCD57" x />
24. SVG <path d="M10 10 H 90 V 90 H 10 L H 10 Z" fill="#EBCD57" stroke="#C02F1D" x />
25. SVG <path d="M10 10 H 90 V 90 H 10 L H 10 Z" fill="#EBCD57" stroke="#C02F1D" x /> <path
 android:strokeColor=“#C02F1D”
 android:fillColor=“#EBCD57"
 android:pathData=“M10 10 H 90 V 90 H 10 L H 10 Z" /> Vector Drawable
26. Vector Drawable: Properties <group> android:rotation android:pivotX android:pivotY android:scaleX android:scaleY android:translateX android:translateY <path> android:pathData android:fillColor android:strokeColor android:strokeWidth android:strokeAlpha android:fillAlpha android:trimPathOffset android:trimPathStart android:trimPathEnd
27. Vector Drawable: Properties <path> android:pathData android:trimPathOffset android:trimPathStart android:trimPathEnd
28. Animated Vector Drawables https://www.youtube.com/watch?v=jQvSXghFwxw
29. Animated Vector Drawables It allow us to apply animations for some properties of a Vector Drawable Animating all properties are natively available on Lollipop+ and available for Kitkat and before via VectorDrawableCompat. The only exception is PathData animation which is not available for Kitkat and before
30. Animated Vector Drawables Properties we will cover TrimPathOffset PathData TrimPathEnd TrimPathStart
31. Animated Vector Drawables TrimPathOffset TrimPathEnd TrimPathStart
32. Animated Vector Drawables TrimPathStart The fraction of the path to trim from the start, in the range from 0 to 1.
33. Animated Vector Drawables TrimPathEnd The fraction of the path to trim from the end, in the range from 0 to 1.
34. Animated Vector Drawables TrimPathOffset Shift trim region (allows showed 
 region to include the start and end), 
 in the range from 0 to 1.
35. Animated Vector Drawables TrimPathOffset TrimPathEnd TrimPathStart LIVE DEMONSTRATION
36. Animated Vector Drawables Working with the vector LIVE DEMONSTRATION
37. Animated Vector Drawables final vector drawable file <vector …
 <path
 android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 <path
 android:name="body"
 android:pathData="M5,21 …18.34 5,21 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 <path
 android:name="line"
 android:pathData="M14,13 … 5,21"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"/>
 </vector>
38. Animated Vector Drawables To create an Animated Vector Drawable we need to have at least three components <vector <animated-vector <objectAnimator
40. Set the vector to the initial position <vector …
 <path
 android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0"
 android:trimPathOffset="0.5" />
 </vector> ic_profile_outilined.xml
41. Set the vector to the initial position <vector …
 <path
 android:name="head"
 android:pathData="M14,5…L14,5 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0"
 android:trimPathOffset="0.5" />
 </vector> ic_profile_outilined.xml
42. Set the vector to the initial position <vector …
 <path
 android:name="body"
 android:pathData="M5,21 …18.34 5,21 Z"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0" />
 </vector> ic_profile_outilined.xml
43. Set the vector to the initial position <vector …
 <path
 android:name="line"
 android:pathData="M14,13 … 5,21"
 android:strokeColor=“#FFFFFF"
 android:strokeWidth="2.2"
 android:trimPathEnd="0" />
 </vector> ic_profile_outilined.xml
44. Set Up Animations <set 
 <objectAnimator
 android:duration="600"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:interpolator=“@android: interpolator/accelerate_cubic"
 android:valueTo="1"/>
 </set> reveal_profile_head_icon_animation.xml
45. Interpolators are important With interpolator No Interpolator
46. reveal_connection.xml <set android:ordering="sequentially">
 <objectAnimator
 android:duration="200"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="500"
 android:interpolator= "@android:interpolator/linear"
 android:valueTo="1"/>
 
 <objectAnimator
 android:duration="300"
 android:propertyName="trimPathStart"
 android:valueFrom="0"
 android:startOffset="300"
 android:interpolator=
 "@android:interpolator/decelerate_cubic"
 android:valueTo="1"/>
 </set> Set Up Animations
47. reveal_connection.xml <set android:ordering="sequentially">
 <objectAnimator
 android:duration="200"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="500"
 android:interpolator= "@android:interpolator/linear"
 android:valueTo="1"/>
 
 <objectAnimator
 android:duration="300"
 android:propertyName="trimPathStart"
 android:valueFrom="0"
 android:startOffset="300"
 android:interpolator=
 "@android:interpolator/decelerate_cubic"
 android:valueTo="1"/>
 </set> Set Up Animations
48. reveal_body.xml <set>
 <objectAnimator
 android:duration="600"
 android:propertyName="trimPathEnd"
 android:valueFrom="0"
 android:startOffset="800"
 android:valueTo="1"/>
 </set> Set Up Animations
49. avd_ic_profile.xml <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@drawable/ic_player" >
 <target
 android:name="body"
 android:animation="@anim/reveal_player_body_icon_animation" />
 <target
 android:name="head"
 android:animation="@anim/reveal_player_head_icon_animation" />
 
 <target
 android:name="line"
 android:animation="@anim/reveal_connection" />
 </animated-vector> Set Up Animations
50. Making the animation alive ImageView icProfile = (ImageView) findViewById(R.id.ic_profile); 
 final AnimatedVectorDrawable avdProfile = (AnimatedVectorDrawable) icProfile.getDrawable(); 
 icProfile.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 avdProfile.start();
 }
 });
52. Animated Vector Drawables Properties we will cover TrimPathOffset PathData TrimPathEnd TrimPathStart
53. Animated Vector Drawables PathData
54. Animated Vector Drawables PathData Same concept <vector <animated-vector <objectAnimator
55. Animated Vector Drawables Vectors: ic_play.xml ic_stop.xml avd_play_to_stop.xml avd_stop_to_play.xml Animated Vector XML:
56. Animated Vector Drawables Animator gets tricky. ic_play.xml <path
 android:name="play"
 android:fillColor="@android:color/white"
 android:pathData="M 20 15 L 32 24 L 20 33 Z" /> ic_stop.xml <path
 android:name="stop"
 android:fillColor="@android:color/white"
 android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" />
57. Animated Vector Drawables Animator gets tricky. from: to: android:pathData="M 20 15 L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" />
58. Animated Vector Drawables Animator gets tricky. from: android:pathData="M 20 15 L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" /> to: android:pathData="M 20 15 L 32 24 L 20 33 Z” /> L 32 24
59. Animated Vector Drawables Animator gets tricky. from: android:pathData="M 20 15 L 32 24 L 20 33 Z” /> android:pathData="M 16 16 L 32 16 L 32 32 L 16 32 Z" /> to: L 32 24
60. Animated Vector Drawables anim_play_to_stop_xml: <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
 
 <objectAnimator
 android:duration="300"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:propertyName="pathData"
 android:valueFrom="M 20 15 L 32 24 L 32 24 L 20 33 Z"
 android:valueTo="M 16 16 L 32 16 L 32 32 L 16 32 Z"
 android:valueType="pathType" />
 
 </set>
61. Animated Vector Drawables anim_stop_to_play_xml: <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android">
 
 <objectAnimator
 android:duration="300"
 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
 android:propertyName="pathData"
 android:valueFrom="M 16 16 L 32 16 L 32 32 L 16 32 Z"
 android:valueTo="M 20 15 L 32 24 L 32 24 L 20 33 Z"
 android:valueType="pathType" />
 
 </set>
62. Animated Vector Drawables OMG! <animated-vector/>, <vector/> and a <animator/>?
 TooMuchFilesException!
63. XML bundle format For the rescue Available since Build Tools 24 Let you merge the 3 xml files in one only 
 using the aapt namespace
64. AnimatedStateListDrawable Available for Marshmallow+ <animated-selector android:constantSize="true">
 <item
 android:id="@+id/playing"
 android:state_checked="true"
 android:drawable="@drawable/ic_stop" />
 
 <item
 android:id="@+id/stopped"
 android:drawable="@drawable/ic_play" />
 
 <transition
 android:fromId="@id/stopped"
 android:toId="@id/playing"
 android:drawable="@drawable/avd_play_to_stop" />
 
 <transition
 android:fromId="@id/playing"
 android:toId="@id/stopped"
 android:drawable="@drawable/avd_stop_to_play" />
 
 </animated-selector> Set up transition for 
 changing states easily
65. Animated Vector Drawables allow us to delight our users 
 and to put the attention to the user in the right place And they’re awesome.
66. Marcos Damasceno @marcospaulosd Thank You