VectorDrawables

A little workshop

El Repo

https://github.com/silmood/Vektr

¿ Qué es?

"Render at runtime"

Nuestra implementación: VectorDrawables

No más imagenes por cada densidad de pantalla

Nuestra implementación: VectorDrawables

Copia este gist en un archivo llamado vector_android.xml

http://bit.ly/1QTyw99

Nuestra implementación: VectorDrawables

Definiendo nuestro primer vector

<vector>

<group>

<path>

Nuestra implementación: VectorDrawables

Especificaciones basicas del SVG

<path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />
M = move to

L = line to

Z = close path

AnimatedVectorDrawables

Añadiendo animaciones

<animated-vector>
<objectAnimator>
translateX
translateY
rotationX
rotationY
scaleX
scaleY
pivotX
pivotY
<objectAnimator
        android:propertyName="translateX"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="10"
        android:repeatMode="reverse"
        android:repeatCount="infinite"
        android:duration="250" />
<target>

Transformando una vector

M4,4 L20,12 L20,12 L4,20 z
M4,4 L20,4 L20,20 L4,20 z
android:propertyName="pathData"

Vector Drawables workshop

By Petter Hdz

Vector Drawables workshop

  • 600