Android Vector Drawable

En este tutorial, vamos a hablar de Android Vector Drawable. Además, los implementaremos en nuestra aplicación Android.

Android Vector Drawable

A menudo utilizamos PNG como nuestras imágenes dibujables. Para que las imágenes PNG funcionen para diferentes tamaños de pantalla, creamos múltiples activos PNG con diferentes tamaños y densidades. Posteriormente, las imágenes PNG ocupan espacio extra y conducen a grandes tamaños de APK de las aplicaciones Android.

¡Aquí es donde Vector Drawable viene a nuestro rescate! Son su reemplazo para las imágenes PNG.

Un VectorDrawable es un gráfico vectorial definido en un archivo XML como un conjunto de puntos, líneas y curvas junto con su información de color asociada.

Se pueden escalar según el tamaño de la pantalla sin pérdida de calidad. Además, se renderizan rápidamente en la pantalla. Los VectorDrawable son un archivo XML.

Puedes añadir un nuevo Vector Asset en tu carpeta drawable usando New | Vector Asset.

Así podemos crear Vector drawables de iconos de Material Design. El código del VectorDrawable tiene el siguiente aspecto:

Se establecen en la etiqueta vector. android:viewportWidth y android:viewportHeight se utilizan para establecer la anchura y la altura de los límites del dibujable. Dentro de estas dimensiones, el dibujable vectorial se dibuja en el lienzo.

path es la etiqueta que crea el dibujable. Dentro del trazado creamos líneas, curvas, arcos y establecemos el borde, el color de fondo. Hacemos así los comandos de path en el pathData.

Crear Path para activos vectoriales

Los comandos de path consisten en un alfabeto seguido de coordenadas. Imagine que la creación de rutas es como hacer una pintura. Los alfabetos en mayúsculas representan la posición absoluta. Las minúsculas representan la posición relativa.

• M – comando moveto. Es una forma de decir que mueva su lápiz a la coordenada dada en la vista. Ejemplo M 100 100 mueve un lápiz imaginario a la coordenada 100, 100 en el lienzo.
• L – comando line to. Se utiliza para dibujar una línea desde la posición actual a la posición especificada.
  Ejemplo : M 100 100, L 120 100 dibuja una línea horizontal.
• z – Se utiliza para cerrar un camino. Dibuja una línea desde la última posición hasta la primera. Ejemplo M 100 100 L 120 100 L 120 120 L 100 120 Z crea un cuadrado.
• C – Se utiliza para crear una curva bezier. Tenemos que especificar tres conjuntos de coordenadas después de esto. El primero y el segundo serían los dos puntos de control entre el punto inicial y el punto final.
• A – se utiliza para dibujar un arco. Después de un hay que especificar el siguiente formato: (rx ry eje x-rotación gran-arco-flag barrido-flag x y). rx ry y eje x son los dos radios especificados.

Creemos algún Vector Drawable interesante al azar en nuestra Aplicación Android utilizando los conocimientos anteriores.

Estructura del proyecto de ejemplo del dibujable vectorial de Android

Código del dibujable vectorial de Android

El código del layout activity_main.xml se da a continuación:

Veamos cada una de las implementaciones de Vector Drawables una por una.

ic_rectangle.xml

En el código anterior, hemos creado dos caminos. Cada uno de ellos es un triángulo rectángulo.

Al establecer esto en nuestro LinearLayout el fondo se vería como:

ic_w.xml

En el código anterior, estamos tratando de crear un símbolo W usando líneas.

Nota: En lugar de una ruta separada, podemos fusionar todas en un solo comando de ruta. Aunque se pueden utilizar varios trazados para tener una idea clara de lo que hace cada trazado.

ic_w_filled.xml
En el siguiente código, utilizaremos el comando z para cerrar los trazados y rellenar el color dentro de ellos:

ic_a.xml
Creemos la letra A utilizando trazados.

ic_c.xml

Las letras A y C vectorialmente dibujables se ven como:

ic_0.xml

Se hace un círculo usando dos arcos que luego se cierran.

Ahora para lo último. Vamos a crear un icono de muestra de JournalDev JD utilizando vector drawable.

Finalmente, la salida de nuestra aplicación se ve así:

Esto pone fin a este tutorial. Puedes descargar el proyecto final de Android VectorDrawable desde el siguiente enlace: