Scalable images and smaller APK, that’s VectorDrawable

Did you know you can get rid of lots of multiple PNGs in your APK? You can do that with Vector Drawables

Transcript

1. Scalable images
 and smaller APK,
 that’s VectorDrawable
2. Jorge E. Hernández
 Android Developer
3. Android O
5. <ImageView />
 
 
 

6. <ImageView
 android:id=“@+id/logo” /> 
 
 

7. <ImageView
 android:id=“@+id/logo”
 android:layout_width=“300dp”
 android:layout_height=“300dp” />

8. <ImageView
 android:id=“@+id/logo” android:layout_width=“300dp”
 android:layout_height=“300dp”
 android:src=“@drawable/android_o”/>
14. 9.3K 2.6K 1.7K 5.1K 2.8K 6.5K 3.8K
15. 32 K
16. 32 K 1 K
19. <ImageView
 android:id=“@+id/logo” android:layout_width=“300dp”
 android:layout_height=“300dp”
 android:src=“@drawable/android_o”/>
28. XML-based vector image format for 2D graphics with support for interactivity and animation. SVG
29. <a> <altGlyph> <altGlyphDef> <altGlyphItem> <animate> <animateMotion> <animateTransform> <circle> <clipPath> <color-profile> <cursor> <defs> <desc> <ellipse> <feBlend> feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feFlood feFuncA feFuncB
 feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence filter font font-face font-face-format font-face-name font-face-src font-face-uri foreignObject <g> glyph glyphRef>
 hkern <image> <line>
 <linearGradient> <marker> <mask> metadata missing-glyph mpath <path> <pattern> <polygon> <polyline> <radialGradient> <rect> script set <stop> style <svg> switch symbol <text> textPath title <tref> <tspan> <use> view vkern
30. <svg> <g>
 <path>
31. <vector> <group>
 <path>
32. <vector>
33. <vector
 android:viewportHeight="10"/>
34. <vector
 android:viewportHeight="10"
 android:viewportWidth="10"/>
35. <vector
 android:viewportHeight="10"
 android:viewportWidth="10"/>
36. <vector>
 <path android:pathData=“?"/>
 </vector>
37. <vector>
 <path android:pathData=“?"/>
 </vector>
38. <vector>
 <path android:pathData=“?"/>
 </vector>
39. M x,y
 Start a new path or subpath by moving to (x,y) L x,y
 Draw a line to (x,y) C x1,y1 x2,y2 x,y
 Draw a cubic bezier curve to (x,y) using control points (x1,y1) and (x2,y2). 
 Z
 Close the path by drawing a line back to the beginning of the current subpath.
40. <vector>
 <path
 android:pathData=“"/>
 </vector>
41. <vector>
 <path
 android:pathData=“M 2 1 L 9 5"/>
 </vector>
42. <vector>
 <path
 android:pathData=“M 2 1 L 9 5 L 2 9"/>
 </vector>
43. <vector>
 <path
 android:pathData=“M 2 1 L 9 5 L 2 9 Z"/>
 </vector>
44. <vector>
 <path
 android:fillColor=“@color/orange“ 
 android:pathData=“M 2 1 L 9 5 L 2 9 Z"/>
 </vector>
45. <vector>
 <path
 android:pathData=“M 4 1 L 4 9 M 8 1 L 8 9"/> </vector>
46. <vector>
 <path android:pathData=“?"/>
 </vector>
47. <path
 android:fillColor="#DCDEE0"
 android:pathData="
 M 9.5 5
 C 9.5 7.5 7.5 9.5 5 9.5
 C 2.5 9.5 0.5 7.5 0.5 4.9
 C 0.5 2.5 2.5 0.5 5 0.5
 C 7.5 0.5 9.5 2.5 9.5 5 "/>
48. <path
 android:fillColor="#edb306"
 android:pathData="
 M 100,50
 C 100,77.61 77.61,100 50,100
 C 22.39,100 0,77.61 0,50
 C 0,22.39 22.39,0 50,0
 C 77.61,0 100,22.39 100,50 Z"/>
49. <path
 android:fillColor="#ee9701"
 android:pathData="
 M 100,50.5
 C 99.73,77.72 77.72,99.73 50.5,100
 L 25,74.5
 L 74.5,25 Z "/>
50. <path
 android:fillColor="#eec748"
 android:pathData="
 M 85,50
 C 85,69.33 69.33,85 50,85
 C 30.67,85 15,69.33 15,50
 C 15,30.67 30.67,15 50,15
 C 69.33,15 85,30.67 85,50
 Z "/>
51. <path
 android:fillColor="#efb507"
 android:pathData="
 M 84.46,56.17
 C 81.9,70.56 70.56,81.9 56.17,84.46
 L 35,63.28
 L 63.28,35
 Z "/>
52. <path
 android:fillColor="#f0f1f2"
 android:pathData="M 70,50
 C 70,61.05 61.05,70 50,70
 C 38.96,70 30,61.05 30,50
 C 30,38.95 38.96,30 50,30
 C 61.05,30 70,38.95 70,50
 Z"/>
53. How to create Vector Drawables? Boxy SVG Inkscape Photoshop
54. How to create Vector Drawables? CorelDRAW Corel ConceptDraw PRO GNOME LibreOffice The Document Foundation Apache OpenOffice Apache Software Foundation Serif DrawPlus Serif Europe Edraw Max Embroidermodder Macromedia FreeHand Adobe Systems Adobe Illustrator Adobe Systems Inkscape OmniGraffle PhotoLine Sketch SketchUp Trimble Navigation SVG-edit Synfig Microsoft Visio Xara Photo & Graphic Designer Xara
55. How to create Vector Drawables?
56. How to create Vector Drawables? convert file.png file.pnm # PNG to PNM potrace file.pnm -s -o file.svg # PNM to SVG
57. Colt McAnlis Question time
59. What not to convert?
61. What to convert?
66. Questions
67. twitter.com
 github.com
 medium.com lalongooo Thanks!