Android
VectorDrawable y AnimatedVectorDrawable

Básico VectorDrawable

Un VectorDrawable debe constar de al menos una etiqueta <path> define una forma

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>
</vector>

Esto produciría un triángulo negro:

Utilizando

Un <clip-path> define una forma que actúa como una ventana, y solo permite que partes de un <path> muestren si están dentro de la forma <clip-path> y eliminen el resto.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <clip-path
        android:name="square clip path"
        android:pathData="M6,6 h12 v12 h-12 z"/>
    <path
        android:name="triangle"
        android:fillColor="#FF000000"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

En este caso, <path> produce un triángulo negro, pero <clip-path> define una forma cuadrada más pequeña, y solo permite que parte del triángulo se muestre a través de:

etiquetas

Una etiqueta <group> permite ajustar la escala, la rotación y la posición de uno o más elementos de un VectorDrawable :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
    <path
        android:pathData="M0,0 h4 v4 h-4 z"
        android:fillColor="#FF000000"/>

    <group
        android:name="middle square group"
        android:translateX="10"
        android:translateY="10"
        android:rotation="45">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>

    <group
        android:name="last square group"
        android:translateX="18"
        android:translateY="18"
        android:scaleX="1.5">
        <path
            android:pathData="M0,0 h4 v4 h-4 z"
            android:fillColor="#FF000000"/>
    </group>
</vector>

El código de ejemplo anterior contiene tres etiquetas <path> idénticas, y todas describen cuadrados negros. El primer cuadrado no está ajustado. El segundo cuadrado está envuelto en una etiqueta <group> que lo mueve y lo gira en 45 °. El tercer cuadrado está envuelto en una etiqueta <group> que lo mueve y lo estira horizontalmente en un 50%. El resultado es el siguiente:

Una etiqueta <group> puede contener múltiples etiquetas <path> y <clip-path> . Incluso puede contener otro <group> .

AnimatedVectorDrawable básico

Un AnimatedVectorDrawable requiere al menos 3 componentes:

• Un VectorDrawable que será manipulado.
• Un objectAnimator que define qué propiedad cambiar y cómo
• El propio AnimatedVectorDrawable que conecta el objectAnimator al VectorDrawable para crear la animación.

Lo siguiente crea un triángulo que cambia su color de negro a rojo.

The VectorDrawable , nombre de archivo: triangle_vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:name="triangle"
        android:fillColor="@android:color/black"
        android:pathData="M0,24 l12,-24 l12,24 z"/>

</vector>

El objectAnimator , nombre de archivo: color_change_animator.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="2000"
    android:repeatCount="infinite"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_red_light"/>

El AnimatedVectorDrawable , nombre de archivo: triangle_animated_vector.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/triangle_vector_drawable">

    <target
        android:animation="@animator/color_change_animator"
        android:name="triangle"/>

</animated-vector>

Tenga en cuenta que <target> especifica android:name="triangle" que coincide con <path> en VectorDrawable . Un VectorDrawable puede contener múltiples elementos y la propiedad android:name se usa para definir a qué elemento se dirige.

Resultado:

Utilizando trazos

El uso del trazo SVG facilita la creación de un Vector dibujable con una longitud de trazo unificada, según las pautas de Diseño de materiales :

Los pesos de trazo consistentes son clave para unificar la familia de iconos del sistema en general. Mantenga un ancho de 2dp para todas las instancias de trazo, incluidas las curvas, los ángulos y los trazos interiores y exteriores.

Entonces, por ejemplo, esta es la forma en que crearía un signo "más" utilizando los trazos:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
    <path
        android:fillColor="#FF000000"
        android:strokeColor="#F000"
        android:strokeWidth="2"
        android:pathData="M12,0 V24 M0,12 H24" />
</vector>

• strokeColor define el color del trazo.

• strokeWidth define el ancho (en dp) del golpe (2dp en este caso, como lo sugieren las directrices).

• pathData es donde describimos nuestra imagen SVG:

• M12,0 mueve el "cursor" a la posición 12,0

• V24 crea una línea vertical a la posición 12, 24

etc., consulte la documentación de SVG y este útil tutorial "Ruta SVG" de w3schools para obtener más información sobre los comandos de ruta específicos.

Como resultado, obtuvimos este signo más sencillo:

Esto es especialmente útil para crear un AnimatedVectorDrawable , ya que ahora está operando con un solo trazo con una longitud unificada, en lugar de una ruta por lo demás complicada.

Compatibilidad de vectores a través de AppCompat

Algunos requisitos previos en el build.gradle para que los vectores funcionen hasta API 7 para VectorDrawables y API 13 para AnimatedVectorDrawables (con algunas advertencias actualmente):

//Build Tools has to be 24+
buildToolsVersion '24.0.0'

defaultConfig {
    vectorDrawables.useSupportLibrary = true
    generatedDensities = []
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:24.1.1'
}

En su layout.xml :

<ImageView
    android:id="@+id/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    appCompat:src="@drawable/vector_drawable"
    android:contentDescription="@null" />