Descripción general de los elementos de diseño vectoriales

Prueba hacerlo con Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a mostrar gráficos en Compose.
ImageVector →

Puntos clave

  • Un elemento de diseño vectorial es un gráfico vectorial definido en un archivo en formato XML como un conjunto de puntos, líneas y curvas, junto con sus datos de color asociados.
  • Los elementos de diseño vectorial son escalables, lo que significa que se puede cambiar su tamaño sin perder calidad de visualización. Esto los hace ideales para usarlos en apps para Android, ya que pueden ayudar a reducir el tamaño de tus archivos APK y mejorar el rendimiento.
  • Para crear elementos de diseño vectoriales en Android Studio, haz clic con el botón derecho en la carpeta de elementos de diseño de tu proyecto y selecciona New > Vector Asset. También puedes importar archivos SVG a Android Studio como elementos de diseño vectoriales.
Resumen generado por Google Bard el 24 de julio de 2023

Introducción

Un VectorDrawable es un gráfico vectorial definido en un archivo en formato XML como un conjunto de puntos, líneas y curvas, junto con sus datos de color asociados. La principal ventaja de usar un elemento de diseño vectorial es la escalabilidad de la imagen. Se puede escalar sin perder calidad de visualización, lo que significa que se puede cambiar el tamaño del mismo archivo para diferentes densidades de pantalla sin perder la calidad de la imagen. De esta manera, se obtienen archivos APK más pequeños y se reducen las tareas de mantenimiento del desarrollador. También puedes usar imágenes vectoriales para la animación con varios archivos en formato XML en lugar de varias imágenes para cada resolución de pantalla.

En esta página y en el video a continuación, se brinda una descripción general de cómo crear elementos de diseño vectoriales en XML. Android Studio también puede convertir archivos SVG al formato de elemento de diseño vectorial, como se describe en Cómo agregar gráficos vectoriales de varias densidades.

Android 5.0 (nivel de API 21) fue la primera versión que admitió oficialmente elementos de diseño vectoriales con VectorDrawable y AnimatedVectorDrawable, pero puedes admitir versiones anteriores con la biblioteca de compatibilidad de Android, que proporciona las clases VectorDrawableCompat y AnimatedVectorDrawableCompat.

Acerca de la clase VectorDrawable

VectorDrawable define un objeto de elemento de diseño estático. Al igual que en el formato SVG, cada gráfico vectorial se define como una jerarquía de árbol, que se compone de objetos path y group. Cada path contiene la geometría del contorno del objeto y group contiene detalles para la transformación. Todas las rutas de acceso se dibujan en el mismo orden en que aparecen en el archivo en formato XML.

Figura 1: Ejemplo de jerarquía de un recurso de elemento de diseño vectorial

La herramienta Vector Asset Studio ofrece una forma sencilla de agregar un gráfico vectorial al proyecto como un archivo en formato XML.

Ejemplo de XML

Este es un archivo en formato XML VectorDrawable de muestra que renderiza una imagen de una batería en modo de carga. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

Este XML renderiza la siguiente imagen:

Acerca de la clase AnimatedVectorDrawable

AnimatedVectorDrawable agrega animación a las propiedades de un gráfico vectorial. Puedes definir un gráfico vectorial animado como tres archivos de recursos separados o como un solo archivo en formato XML que defina todo el elemento de diseño. Analicemos ambos enfoques para comprenderlos mejor: Múltiples archivos en formato XML y Un solo archivo en formato XML.

Varios archivos XML

Si usas este enfoque, puedes definir tres archivos XML separados:

Ejemplo de varios archivos en formato XML

En los siguientes archivos en formato XML, se muestra la animación de un gráfico vectorial.

  • Archivo XML de VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   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="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • Archivo XML de AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
     <target
         android:name="vectorPath"
         android:animation="@anim/path_morph" />
</animated-vector>
  • Archivos XML de Animator que se usan en el archivo en formato XML de AnimatedVectorDrawable: rotation.xml y path_morph.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />
     
    <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>

Un solo archivo XML

Con este enfoque, puedes combinar los archivos XML relacionados en un solo archivo en formato XML a través del formato de paquete XML. En el momento de compilar la app, la etiqueta aapt crea recursos independientes y hace referencia a ellos en el vector animado. Este enfoque requiere las herramientas de compilación 24 o una versión posterior, y el resultado es retrocompatible.

Ejemplo de un solo archivo en formato XML 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

Solución de retrocompatibilidad con elementos de diseño vectoriales

Para admitir elementos de diseño vectoriales y elementos de diseño vectoriales animados en dispositivos que ejecutan versiones de la plataforma anteriores a Android 5.0 (nivel de API 21), o bien para usar las funciones fillColor, fillType y strokeColor en versiones anteriores a Android 7.0 (nivel de API 24), VectorDrawableCompat y AnimatedVectorDrawableCompat están disponibles a través de dos bibliotecas de compatibilidad: support-vector-drawable y animated-vector-drawable, respectivamente.

En Android Studio 1.4, se introdujo la compatibilidad limitada con elementos de diseño vectoriales mediante la generación de archivos PNG en el tiempo de compilación. Sin embargo, las bibliotecas de compatibilidad de elementos de diseño vectoriales y elementos de diseño vectoriales animados ofrecen flexibilidad y una amplia compatibilidad. Como se trata de una biblioteca de compatibilidad, puedes usarla con todas las versiones de la plataforma de Android, hasta Android 2.1 (nivel de API 7 y versiones posteriores). Para configurar tu app de modo que use bibliotecas de compatibilidad de vectores, agrega el elemento vectorDrawables a tu archivo build.gradle en el módulo de la app.

Usa el siguiente fragmento de código para configurar el elemento vectorDrawables:

Groovy

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Kotlin

// For Gradle Plugin 2.0+
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

Groovy

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities = []
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters "--no-version-vectors"
    }
}

Kotlin

// For Gradle Plugin 1.5 or below
android {
    defaultConfig {
        // Stops the Gradle plugin’s automatic rasterization of vectors
        generatedDensities()
    }
    // Flag notifies aapt to keep the attribute IDs around
    aaptOptions {
        additionalParameters("--no-version-vectors")
    }
}

Puedes usar VectorDrawableCompat y AnimatedVectorDrawableCompat en todos los dispositivos que ejecuten Android 4.0 (nivel de API 14) y versiones posteriores. La forma en que Android carga los elementos de diseño, no todos los lugares que aceptan un ID de elemento de diseño, como en un archivo en formato XML, admite la carga de elementos de diseño vectoriales. El paquete android.support.v7.appcompat agregó varias funciones para facilitar el uso de elementos de diseño vectoriales. En primer lugar, cuando usas el paquete android.support.v7.appcompat con ImageView o con subclases como ImageButton y FloatingActionButton, puedes usar el nuevo atributo app:srcCompat para hacer referencia a elementos de diseño vectoriales, así como a cualquier otro elemento de diseño disponible para android:src: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

Para cambiar los elementos de diseño durante el tiempo de ejecución, puedes usar el método setImageResource() como antes. Usar AppCompat y app:srcCompat es el método más infalible para integrar elementos de diseño vectoriales en tu app.

La biblioteca de compatibilidad 25.4.0 y versiones posteriores admiten las siguientes funciones:

  • Transformación de rutas de acceso (evaluador PathType): Se usa para transformar una ruta de acceso en otra.
  • Interpolación de rutas de acceso: Se usa para definir un interpolador flexible (representado como una ruta de acceso) en lugar de los interpoladores definidos por el sistema, como LinearInterpolator.

La biblioteca de compatibilidad 26.0.0-beta1 y las versiones posteriores admiten las siguientes funciones:

  • Moverse a lo largo de una ruta de acceso: El objeto de geometría puede moverse, a lo largo de una ruta de acceso arbitraria, como parte de una animación.

Ejemplo de varios archivos en formato XML con la biblioteca de compatibilidad

En los siguientes archivos XML, se muestra el enfoque de usar varios archivos XML para animar un gráfico vectorial.

  • Archivo XML de VectorDrawable: vd.xml 
  • <vector xmlns:android="http://schemas.android.com/apk/res/android"
   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="vectorPath"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
   </group>
</vector>
  • Archivo XML de AnimatedVectorDrawable: avd.xml 
  • <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/vd" >
     <target
         android:name="rotationGroup"
         android:animation="@anim/rotation" />
</animated-vector>
  • Archivo en formato XML de Animator que se usa en el archivo en formato XML de AnimatedVectorDrawable: rotation.xml 
  • <objectAnimator
   android:duration="6000"
   android:propertyName="rotation"
   android:valueFrom="0"
   android:valueTo="360" />

Un solo archivo XML

En el siguiente archivo en formato XML, se muestra el enfoque de usar un solo archivo en formato XML para animar un gráfico vectorial. En el momento de compilar la app, la etiqueta aapt crea recursos independientes y hace referencia a ellos en el vector animado. Este enfoque requiere las herramientas de compilación 24 o una versión posterior, y el resultado es retrocompatible.

Ejemplo de un solo archivo en formato XML que usa la biblioteca de compatibilidad 

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:rotation="45.0" >
                <path
                    android:name="vectorPath"
                    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:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>