SVG a Elementos de diseño vectoriales: La Mejor Manera de Personalizar los Iconos de Android

Garret Cole
Garret Cole

Seguir

Oct 21, 2016 · 2 min de lectura

Una de las formas más populares de manejo de iconos personalizados en el desarrollo de Android proyecto es el uso de vectores dibujables. Se trata de archivos XML que describen la ruta en la que se puede representar un elemento de diseño en tiempo de ejecución dentro de la aplicación Android. Para obtener el elemento de diseño vectorial, puede convertir un archivo SVG a este formato. Recientemente, esto se ha hecho más fácil con las últimas actualizaciones de Android Studio. Sin embargo, si eres como algunos de nosotros que estamos acostumbrados a la antigua canalización, puedes convertir SVG en elementos de diseño vectoriales con esta práctica herramienta.

La ventaja obvia de usar elementos de diseño vectoriales es el tamaño de la huella de tu APK. La diferencia en el tamaño de una aplicación con vectores frente a imágenes es bastante significativa. En lugar de tener varias imágenes empaquetadas para cada resolución de PPP que admite la aplicación, tiene un solo archivo de texto moderadamente pequeño con la ruta de la imagen como su contenido.

Cuando se utilizan imágenes normales como PNGs para los iconos, es fácil determinar la resolución nativa inspeccionando las dimensiones de la imagen con respecto a su cubo de PPP. Es aún más fácil con los elementos de diseño vectoriales, pero hay dos alturas y anchos declarados diferentes dentro del XML. Tiene ancho y ancho de la ventana. El ancho de la ventana es en realidad el tamaño que el activo se va a dibujar dentro de esa ventana. Cuando dibuja el camino en su interior, se limitará al tamaño de esa ventana. El otro «ancho» es el ancho real que el desarrollador trataría como su tamaño DPI nativo cuando se infla en una vista.

<vector android:height="24dp" android:viewportHeight="22.0"android:width="24dp" android:viewportWidth="15.0"

Una vez que tengas tu elemento de diseño vectorial, puedes expandir las variaciones de su apariencia creando otro XML para cada variación a la que quieras tener acceso en tus recursos de Android. Si bien esto también se puede hacer para imágenes raw, es un poco más fácil trabajar con ellas cuando desea usar una máscara de bits o cambiar el estado de color de un icono sin tener que reemplazar una serie de activos.

Luminance es un gran conjunto de iconos para aquellos que desean experimentar con iconos. Todos los iconos son de uso gratuito y están disponibles en formato SVG.

De nuevo, para resumir esta canalización con la que jugar:

  1. Descargue Luminance y elija un icono que desee usar en formato SVG.
  2. Coloque el SVG en Android SVG en VectorDrawable y conviértalo en un XML de elementos de diseño vectoriales de Android.
  3. Coloque el XML en el directorio res / drawable.
  4. Úselo en ImageView, ImageButtons o en cualquier otro lugar en el que desee usar un activo de diseño.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.