• Alex Tarragó

Trabajando con VectorDrawables en Android utilizando Sketch

Actualizado: oct 17


Para trabajar desarrollando apps para smartphones, necesitamos tener en cuenta muchas variables, sobre todo al desarrollar apps para Android.

Una de las características, buenas para los usuarios, y no tan buena para los desarrolladores, es el gran número de dispositivos disponibles en esta plataforma. Este gran número de dispositivos cuenta con un gran número de tamaños de pantallas y resoluciones, así que hay que tener eso en cuenta a la hora de diseñar los recursos para nuestras apps.

Los recursos vectoriales se utilizan para poder mostrar imágenes en cualquier pantalla y resolución con una pérdida mínima de calidad. Hace un tiempo la única manera de conseguir esto era crear tantas versiones de las imágenes como resoluciones queríamos soportar para nuestra aplicación.

Otra de las ventajas de utilizar recursos vectoriales es la disminución drástica del tamaño de la APK final.

VectorDrawable en Android es la forma que tendremos de representar recursos vectoriales. Según la documentación de Android:

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

Utilizando Sketch para crear nuestros VectorDrawables

El punto de partida para obtener un recurso vectorial compatible con Android es un archivo SVG (Scalable Vector Graphics o Gráficos Vectoriales Escalables). No obstante, no todas las funcionalidades compatibles con archivos SVG son compatibles para nuestro XML.

Para poder empezar a crear nuestros recursos vectoriales, primero hemos de tener en cuenta la siguiente pregunta: ¿Cuándo es necesario?

1. Cuándo el gráfico no sea muy complejo

Es cierto que el tamaño de nuestro APK se verá reducido considerablemente, pero no todo son ventajas. Si el archivo es muy complejo, será mejor lanzar una imagen pre-renderizada y no un gráfico vectorial. El gráfico vectorial deberá cargar, leer y mostrar el archivo XML. Así que para gráficos simples es perfecto, para imágenes más complejas será mejor seguir utilizando el método convencional.

2. Nuestra imagen no tiene ni patrones ni degradados VectorDrawables no da soporte a estas características así que, si tus recursos contienen patrones o degradados, es mejor que sigas utilizando el método convencional.

3. Tu gráfico no contiene texto que quieras traducir Puedes añadir textos a tus gráficos vectoriales siempre que estos se conviertan a formas. Ten en cuenta la localización en tu app, si añades texto a tus gráficos, estos no se podrán traducir.

Empecemos…


1. Crearemos una mesa de trabajo acorde con nuestro gráfico. Es importante definir el tamaño correcto para tu mesa de trabajo. El tamaño que definas será el que tendrá tu gráfico, asegúrate de dejar los márgenes y todos los espacios que desees.





6. Exporta tu archivo SVG Selecciona tu mesa de trabajo (o artboard) y haz clic en Make Exportable, selecciona la opción SVG y guarda tu archivo en el escritorio.

Convierte tu SVG a VectorDrawable

Android Studio cuenta con un conversor SVG > XML, pero aún le falta un poco de trabajo para ser una opción a considerar. Utilizaremos una esta herramienta online y seguiremos los pasos a continuación.

1. Subiremos el archivo que deseemos convertir. Ej. ic_search.svg


Por último, descargaremos el archivo XML y comprobaremos en nuestro proyecto si todo ha ido bien.

Si necesitas diseñar una app llámanos al 93 408 90 30 o ponte en contacto con nosotros.

Dribba, the mobile agency. Agencia de desarrollo de tecnologías mobile en Barcelona y Zurich. Desarrollamos apps nativas iOS y Android, para multinacionales y startups de todo el mundo. Consulta nuestros servicios tanto en desarrollo, diseño como consultoría mobile y tecnológica.

3 vistas

WE CREATE DIGITAL EXPERIENCES  THROUGH MOBILE.

BCN

Torrent de l'Olla 218

08012 Barcelona

+34 93 408 90 30

ZRH

Shilquai 131

8005 Zürich

+41 77 979 83 87

Dribba es Partner de Barcelona Tech City
Dribba es Partner de Cataluya Mobile

© 2012-2020 Dribba Development & Consulting SL.

Dribba, the mobile agency y el logo de Dribba son marcas registradas de Dribba S.L.