Trabajando con VectorDrawables en Android utilizando Sketch.

18 de Junio de 2018 por Dribba

Trabajando con VectorDrawables en Android utilizando Sketch.

18 de Junio de 2018 por Dribba

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…

Crea tu mesa de trabajo en Sketch

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.

Asegurate de configurar bien tus elementos
2. Activa la opción»Redondear: Píxeles completos»
Asegúrate de activar la opción «Round: Full Pixels» al crear tus elementos vectoriales.

Usa la opción Flatten
3. Utiliza «Flatten» 
VectorDrawables no soporta las rotaciones de tus elementos, así que necesitaras utilizar la opción «Flatten» antes de exportar tu gráfico.

Dibuja tu elementos vectorial
4. Convertir a «Outlines»
Cuando tengas texto, líneas segmentadas o elementos similares, necesitaras convertir dichos elementos en outlines.

Pon nombre para utilizarlos más tarde
5. No utilices nombres genéricos
Asigna nombres correctos para cada capa de tu archivo. No utilices nombres genéricos como «Rectangle 4», «Shape 4», …

Exporta tu archivo en SVG

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

Activa las opciones pertinentes
2. Haremos clic en «Remove empty groups without attributes», esto hará que nuestro archivo XML sea más eficiente.
3. Haremos clic en «Word-wrap pathData», esto hará que Android Studio no nos genere avisos innecesarios.
4. Haremos clic en «Import IDs from SVG as name».

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.

Notícias relacionadas