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.
2. Activa la opción»Redondear: Píxeles completos» Asegúrate de activar la opción «Round: Full Pixels» al crear tus elementos vectoriales.
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.
4. Convertir a «Outlines» Cuando tengas texto, líneas segmentadas o elementos similares, necesitaras convertir dichos elementos en outlines.
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», …
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
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.