vector_drawables

Android Support Library (III) – VectorDrawables

Una de los principales inconvenientes de la fragmentación de dispositivos que existe en Android, es el uso de imágenes. Tienes que tener tantas imágenes como resoluciones quieras utilizar, haciendo que la aplicación sea más pesada ya que el número de imágenes se triplica o cuadriplica. Gracias a las nuevas versiones de las librerías de soporte podemos utilizar los ficheros SVG.


¿Qué es SVG?

(Scalable Vector Graphics o Gráficos Vectoriales Redimensionables)
Son ficheros xml que contienen la información para pintar una imagen. Estos ficheros nacieron en 1996 y en el 2001 en una recomendación de la W3C. Una de las grandes diferencias que podemos encontrar es que no se pixelan, es decir, por mucho que manipules el fichero, la imagen no se verá distorsionada.

vector_vs_png
Diferencia entre SVG y PNG

 


Uso de imágenes vectoriales en Android

Para comenzar, tendremos que añadir la librería de soporte si no la tuviéramos añadida y además incluir unas líneas en el fichero “build.gradle” de la aplicación para poder utilizar este tipo de imágenes.

Si utilizamos gradle 2.0 o superior:

defaultConfig {
    ...
    vectorDrawables.useSupportLibrary = true
    ...
}

Si utilizamos una versión anterior:

android {  
    defaultConfig {
        generatedDensities = []  
    }  
    
    aaptOptions {  
        additionalParameters "--no-version-vectors"  
    }  

}  

El siguiente paso que tenemos que dar es la creación del fichero que contendrá nuestra imagen vectorial. Android no utiliza los ficheros “SVG” sino una conversión de ellos, VectorDrawables, los cuales son ficheros “XML” con los datos de la imagen. Para crear estos ficheros desde un “SVG” tenemos varias opciones.

  • Herramienta online de conversión de SVG a VectorDrawable. http://inloop.github.io/svg2android/
  • Dentro de Android Studio tenemos la posibilidad de crear nuestros VectorDrawables desde un fichero SVG. Para ello tenemos que ir a “New”->”Vector Asset” y seguir los pasos del wizard.

También podemos obtener los ficheros xml de páginas web. En el caso del ejemplo que voy a mostrar, he utilizado recursos de https://materialdesignicons.com/, ya que ofrece descargar el fichero en el formato que deseemos. Una vez obtenido el fichero e insertado en nuestro directorio “res->drawable”, tan solo tenemos que inicializar el ImageView de esta manera.

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

Animar un vectorial en Android

Animar una imagen vectorial es bastante sencillo. Tenemos que tener 3 elementos:

  • Fichero que contenga la animación del vectorial dentro del directorio “res->animator”.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

        <objectAnimator android:duration="250" android:propertyName="translateY" android:repeatCount="infinite" android:repeatMode="reverse" android:valueFrom="0" android:valueTo="-5" android:valueType="floatType" />

</set>
  • Fichero de la imagen vectorial. En el deberemos indicar un grupo que será el que queramos animar.
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24">

        <group android:name="element">

                <path android:fillColor="#000" android:pathData="M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8A1.5,1.5 0 0,0 19,9.5V16.5A1.5,1.5 0 0,0 20.5,18A1.5,1.5 0 0,0 22,16.5V9.5A1.5,1.5 0 0,0 20.5,8M3.5,8A1.5,1.5 0 0,0 2,9.5V16.5A1.5,1.5 0 0,0 3.5,18A1.5,1.5 0 0,0 5,16.5V9.5A1.5,1.5 0 0,0 3.5,8M6,18A1,1 0 0,0 7,19H8V22.5A1.5,1.5 0 0,0 9.5,24A1.5,1.5 0 0,0 11,22.5V19H13V22.5A1.5,1.5 0 0,0 14.5,24A1.5,1.5 0 0,0 16,22.5V19H17A1,1 0 0,0 18,18V8H6V18Z"/>

        </group>
</vector>
  • Fichero que haga de enlace entre la imagen vectorial y la animación. Éste será nuestro vector-drawable. En él indicaremos el grupo que queremos animar de la imagen vectorial y que animación queremos darle.
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android_vd">

    <target android:name="element" android:animation="@animator/pulse_top"/>

</animated-vector>

 

Para utilizarlo tendremos que indicar al ImageView el atributo app:srcCompat como hicimos anteriormente. Para comenzar la animación, tendremos que recoger la imagen desde código y comenzar la animación.

ivAnimated = (ImageView) findViewById(...);
Drawable drawable = ivAnimated.getDrawable();
if (drawable instanceof Animatable) {
    ((Animatable) drawable).start();
}

Puedes ver un ejemplo completo en GITHUB


One Comments

  • Webserveis

    16 de enero de 2017

    Falta complementar que en las actividades se debe especificar
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

    Reply

Deja un comentario

5 + 9 =