VectorDrawables & AnimatedVectorDrawables: Trabalhando com vetores de forma eficiente no Android

--
Slides of a talk held in GDG DevFest Nordeste 2016, that happened on October 22th, in Maceió, AL. The talk was about how to work with VectorDrawables and AnimatedVectorDrawables on Android in an efficient way.

Transcript

1. VectorDrawables & AnimatedVectorDrawables TRABALHANDO COM VETORES DE FORMA EFICIENTE NO ANDROID #DevFestNordeste2016 WALMYR CARVALHO
2. @WALMYRCARVALHO
4. ANDROID MEETUP RJ Organizador ANDROID DEV BR Admin
6. COMO COSTUMA SER?
7. “-Walmyr, precisamos adicionar um ícone no projeto” - DESIGNER, Querido
9. xxxhdpi xxhdpi xhdpi hdpi
10. Certo, e como fica isso num app com 30+ assets?
12. Outra coisa muito comum é o uso de icon fonts!
13. Iconify github.com/JoanZapata/android-iconify
16. Resumindo: Dá pra melhorar!
17. COMO DEVERIA SER?
18. O ideal é que a nossa pasta res tenha a seguinte estrutura:
19. anim: resources de animação, transições etc drawable: vetores, selectors, drawables etc layout: layouts de activities, fragments, views etc mipmap: somente ícones de launcher values: strings, booleans, plurals, etc
20. Vamos usar vetores!
22. Tá, mas o que é um vetor?
23. Desenho Vetorial pt.wikipedia.org/wiki/Desenho_vetorial
24. "Desenho vetorial é o uso de primitivas geométricas como pontos, linhas, curvas e formas ou polígonos para representar imagens em computação gráfica."
25. Beleza, mas qual deles eu uso no Android?
26. SVG?
28. O suporte a SVG no Android sempre foi meio nebuloso, algumas libs “resolviam”, mas… ¯\_(ツ)_/¯
29. O formato de um arquivo SVG é mais ou menos assim:
30. cross.svg <svg class="icon icon—plus" viewBox="0 0 5 5” xmlns=“http://www.w3.org/2000/svg"> 
 <path d="M2 1 h1 v1 h1v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
 </svg>
31. Handmade SVG | CodePen goo.gl/CMv9Ek
32. VectorDrawable!
33. O VectorDrawable é uma classe que surgiu no Lollipop e nos permite criar um Drawable através de um vetor (como o SVG, por exemplo).
34. O jeito mais simples de se criar VectorDrawables é com a ajuda do Vector Asset Studio, ferramenta built-in no Android Studio!
38. Feito isso, teremos um asset similar a esse:
40. res/drawable/ic_close.xml <?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:width="24dp"
 android:height="24dp"
 android:viewportHeight="24"
 android:viewportWidth="24">
 
 <path
 android:fillColor="#FFFFFF"
 android:pathData="M19 6.41L17.59 5 12 10.59 6.41
 5 5 6.41 10.59 12 5 17.59 6.41
 19 12 13.41 17.59 19 19 17.59
 13.41 12z" />
 <path
 android:fillColor="#00FFFFFF"
 android:pathData="M0 0h24v24H0z" />
 </vector>
41. VectorDrawable | Android Developers goo.gl/IG7qre
42. Add Multi-Density Vector Graphics | Android Developers goo.gl/VBu3dX
43. AnimatedVectorDrawable
44. O AnimatedVectorDrawable permite que um VectorDrawable seja animado através de propriedades como ObjectAnimator ou AnimatorSet.
45. É possíve definir AnimatedVectorDrawables em um ou mais arquivos XML:
46. rotation.xml <objectAnimator
 android:duration="6000"
 android:propertyName="rotation"
 android:valueFrom="0"
 android:valueTo="360" />
47. path_morph.xml <set xmlns:android="http://schemas.android.com/apk/res/android">
 <objectAnimator
 android:duration="3000"
 android:propertyName="pathData"
 android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
 android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
 android:valueType="pathType"/>
 </set>
48. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable=“@drawable/vectordrawable">
 <target
 android:name="rotationGroup"
 android:animation="@anim/rotation" />
 <target
 android:name="v"
 android:animation="@anim/path_morph" />
 </animated-vector>
49. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" >
 <aapt:attr name="android:drawable">
 <vector
 android:height="64dp"
 android:width="64dp"
 android:viewportHeight="600"
 android:viewportWidth="600" >
 <group
 android:name="rotationGroup"
 android:pivotX="300.0"
 android:pivotY="300.0"
 android:rotation="45.0" >
 <path
 android:name="v"
 android:fillColor="#000000"
 android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
 </group>
 </vector>
 </aapt:attr>
 
 <target android:name="rotationGroup"> *
 <aapt:attr name="android:animation">
 <objectAnimator
 android:duration="6000"
 android:propertyName="rotation"
 android:valueFrom="0"
 android:valueTo="360" />
 </aapt:attr>
 </target>
 
 <target android:name="v" >
 <aapt:attr name="android:animation">
 <set>
 <objectAnimator
 android:duration="3000"
 android:propertyName="pathData"
 android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
 android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
 android:valueType="pathType"/>
 </set>
 </aapt:attr>
 </target>
 </animated-vector>
51. AnimatedVectorDrawable | Android Developers goo.gl/0z2Qys
52. NEW: Android Icon Animator romannurik.github.io/AndroidIconAnimator/
53. Support Library
54. A versão 23.2 da Support Library trouxe o primeiro suporte a vetores, através das bibliotecas de suporte support-vector-drawable e animated-vector-drawable
55. Como eu configuro o meu projeto?
56. app/build.gradle defaultConfig {
 applicationId "com.example.vectortest"
 minSdkVersion 15
 targetSdkVersion 23 
 versionCode 1
 versionName "1.0"
 
 vectorDrawables.useSupportLibrary = true
 }
57. res/drawable/ic_close.xml <ImageView
 android:id="@+id/icon"
 android:layout_width="@dimen/image_width"
 android:layout_height="@dimen/image_height"
 app:srcCompat=“@drawable/ic_close" />
58. Vamos testar?
59. DEMO
60. LINKS ÚTEIS
61. AppCompat - Age of the Vectors | Chris Banes (Google) goo.gl/3a5uwI
62. Vector for All | Mark Allison (GDE) goo.gl/2r94Pv
63. Delighting Details - Animated Vector Drawables | Marcos Damasceno (GDE) goo.gl/Jy7U3M
64. SVG to VectorDrawable inloop.github.io/svg2android/
65. SVGOMG jakearchibald.github.io/svgomg/
66. DÚVIDAS?
67. FALA COMIGO, PLS! @WALMYRCARVALHO
68. SLACK | ANDROID DEV BR SLACK.ANDROIDDEVBR.ORG
69. GOOGLE DEVELOPER GROUPS developers.google.com/groups
70. MUITO OBRIGADO!