¿Cómo agregar activos vectoriales en Android Studio?

Vector Assets en Android Studio ayuda a agregar íconos de materiales e importar gráficos vectoriales escalables y archivos de documentos de Adobe Photoshop en su proyecto como recursos dibujables vectoriales .

¿En qué se diferencia Vector Asset de Image Asset?

Image Asset Studio nos ayuda a crear diferentes tipos de íconos con diferentes densidades y nos muestra exactamente dónde se colocarán en nuestro proyecto. Incluye herramientas para ajustar nuestros íconos y agregar fondos, todo mientras muestra el resultado en un panel de vista previa, para que aparezcan exactamente como pretendíamos. Vector Asset Studio ayuda a agregar un gráfico vectorial a nuestro proyecto como un archivo XML que describe la imagen.

Problema al usar PNG

El formato PNG seguramente puede manejar fotos de alta resolución. El formato PNG es un formato web sin pérdidas. Por lo tanto, el tamaño de los archivos tiende a ser muy grande. Si queremos trabajar con fotos en la web, siempre debemos intentar continuar con JPEG. Y el problema principal para imprimir un archivo .png es su perfil de color inherente. Los colores de las imágenes pueden resultar un poco apagados ya que la impresora tiene que interpretar un lenguaje de color diferente. Cada activo PNG que utilizamos tiene una determinada densidad específica. Por lo tanto, tenemos que lidiar con diferentes versiones de la misma imagen para diferentes tamaños de pantalla. Para deshacernos de tales problemas, usamos activos vectoriales. 

Mapa de bits vs Vector

Existen las siguientes diferencias entre mapa de bits y vector:

1. El mapa de bits usa píxeles, mientras que el vector usa formas geométricas.
2. Las imágenes de mapa de bits son comparativamente más grandes que las imágenes vectoriales.
3. El tipo de mapa de bits es adecuado para fotografías, mientras que el tipo de vector es adecuado para logotipos, imágenes prediseñadas e iconos.
4. Cambiar el tamaño de las imágenes afecta la resolución en el caso de las imágenes de mapa de bits, cuya resolución se conserva en las imágenes vectoriales.
5. Las imágenes de mapa de bits se pueden editar con la fotografía de Adobe, mientras que las imágenes vectoriales se pueden editar con Adobe Illustrator.

Beneficios de los activos vectoriales

La escalabilidad de la imagen es la principal ventaja de usar el vector dibujable. Se puede cambiar el tamaño del mismo archivo para diferentes tamaños de pantalla sin pérdida de calidad de imagen, lo que da como resultado archivos APK más pequeños y menos mantenimiento por parte del desarrollador. También podemos usar imágenes vectoriales para la animación. 

¿Cómo se renderizan los recursos vectoriales?

Los activos vectoriales se compilan primero en formato binario en tiempo de compilación y luego en tiempo de ejecución. A continuación, se necesita la aplicación para cargar esto, generar un objeto modelo a partir de un código binario y realizar algunas operaciones de lienzo para dibujar las rutas individuales a la pantalla. 

Formatos vectoriales

Existen los siguientes formatos de archivos vectoriales: 

1. .ai: abreviatura de Adobe Illustrator que se usa comúnmente para imprimir medios y gráficos digitales.
2. .eps: abreviatura de Encapsulated PostScript que no admite transparencia como lo hace el formato .ai.
3. .pdf: abreviatura de   formato de documento portátil que se crea para el intercambio de documentos entre plataformas.
4. .svg: el formato de gráficos vectoriales escalables se basa en XML. Es útil para la web, donde se puede indexar, buscar y programar.

Implementación paso a paso

Paso 1: haga clic con el botón derecho en dibujable > Nuevo > Activo vectorial 

Después de hacer clic en Vector Asset , se abre un nuevo cuadro de diálogo que se muestra a continuación.

Paso 2: haga clic en Clip Art y busque los iconos y haga clic en el botón Aceptar

Paso 3: cambia el color del icono

El color del icono se puede cambiar agregando directamente el código de color o ajustando el color usando el brillo y luego haciendo clic en el botón Elegir .

Paso 4: haga clic en Siguiente 

Paso 5: ahora haga clic en el botón Finalizar

Paso 6: el ícono se crea en la carpeta dibujable como se muestra en la imagen