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 opcioŐĀ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 maŐĀ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