intive Argentina Blog

4 herramientas para crear recursos gráficos en Android

Una de las tareas más desafiantes a las que me enfrento como desarrolladora de aplicaciones para dispositivos Android es la creación de recursos gráficos para las distintas configuraciones de pantalla.

recursos-graficos-android---apps

En la gran oferta actual de dispositivos de esta tecnología, existen pantallas de todo tipo, que varían tanto en tamaño físico como en resolución. Los últimos datos disponibles en los Dashboards (la página de referencia en la que Google informa el estado actual del ecosistema) nos brindan estadísticas para saber cuáles son las prioridades a la hora de desarrollar:

Sin título

A veces, dependiendo del proyecto y la audiencia de nuestra aplicación, es posible reducir la cantidad de «buckets» o configuraciones para las que vamos a crear recursos gráficos, pero lo usual es tener que contar con al menos tres o cuatro versiones de las imágenes. Si tenemos suerte de trabajar con un diseñador gráfico dedicado que maneje herramientas especializadas, el problema está solucionado. Pero si no contamos con esa posibilidad, estas son cuatro herramientas para generar recursos gráficos en Android, que pueden hacer más fácil la vida del desarrollador:
1 – Android Asset Studio

Android Asset Studio es una herramienta online creada por Roman Nurik, un desarrollador y diseñador de Google. Incluye un editor de imágenes 9-patch (que veremos en más profundidad en otro artículo) y varias herramientas para crear distintos tipos de íconos para nuestra aplicación.

AndroidAssetStudioHome

En esta herramienta se pueden generar los recursos de los tamaños correctos para los íconos de lanzamiento de la aplicación, incluyendo los nuevos «accesos directos» que se agregaron en Android Nougat, los íconos para las notificaciones que se muestran en la barra de estado, y para la action bar o toolbar. También existe una opción más abierta, para crear íconos en general.

En todos los casos, podemos armar los recursos basándonos en cualquiera de las siguientes opciones:

a. Utilizar una imagen propia
b. Elegir un ícono de estilo Material desde una paleta de Clipart.
c. Escribir un texto corto. Esta última opción permite seleccionar cualquiera de las fuentes disponibles en Google Fonts.

Una vez elegido el origen de nuestro ícono, podemos modificarlo con opciones que varían según el tipo seleccionado, pero que pueden incluir: padding, tamaño y color.

AndroidAssetStudioIconPalette

Además, Android Asset Studio incluye una versión «preview» de un editor de íconos animados, que nos permite crear animaciones sencillas basadas en imágenes vectoriales. Una vez creada la imagen, se puede exportar el archivo XML para utilizar como Vector Drawable o como Animated Vector Drawable, dos opciones muy interesantes disponibles a partir de la versión 21 de la API de Android (Lollipop).

2 – Android Studio

Android Studio incluye dos asistentes simples para la creación de recursos gráficos: uno para íconos y otro para «drawables» vectoriales.

Opción 1) Para íconos
La opción para crear íconos es muy similar a las de Android Asset Studio, pero sólo permite tres tipos de íconos: de lanzamiento, para Action Bar y para notificaciones.
Si se está realizando una aplicación que debe dar soporte a las versiones más antiguas de Android, este asistente cuenta con una ventaja en el caso de los íconos para notificaciones: produce los archivos con distintos estilos y colores para las versiones más viejas del sistema operativo, mientras que Android Asset Studio sólo genera íconos para versiones posteriores a Android Honeycomb.

AndroidStudioNotificationIcons

Opción 2) Para Vector Drawables
El asistente para Vector Drawables importa un archivo .svg o .psd, o bien permite seleccionar un ícono de Material Design y exportarlo en formato XML.

AndroidStudioVectorDrawable

3 – Android Drawable Importer

Android Drawable Importer es un excelente plugin para Android Studio que nos ofrece varias opciones a la hora de generar recursos.

Opción 1) Icon Pack Drawable Importer
«Icon Pack Drawable Importer» permite seleccionar un ícono, ya sea Material o de estilos anteriores, y generar los recursos para íconos de cuatro dimensiones (medidas en dp) determinadas, solamente en blanco o negro.

Opción 2) Vector Drawable Importer
En este caso sólo se permite elegir un ícono Material y el resultado que se obtiene es un archivo XML para su uso como Vector Drawable.

Pero son realmente las otras dos opciones que nos da este plugin -y que desarrollaremos a continuación- las que lo diferencian de las herramientas anteriores:

Opción 3) Batch Drawable Import
Esta alternativa permite seleccionar varias imágenes y procesarlas como un lote para generar los recursos necesarios. Por cada imagen, el plugin permite indicar el «bucket» original de la imagen, las configuraciones de destino y el tipo de algoritmo para las reducciones y ampliaciones que sean necesarias.

AndroidStudioPluginBatch

Opción 4) Multisource-Drawable
Esta opción es ideal para cuando contamos con la imagen en varios tamaños pero cada una de las versiones viene con un nombre diferente, o no tiene la estructura de directorios correcta. Ésta es una situación habitual cuando los desarrolladores Android «heredamos» recursos generados para el desarrollo en iOS, y recibimos los archivos con los agregados «@2x» y «@3x». Esta herramienta nos permite seleccionar las imágenes que queremos utilizar para cada densidad, y exportarlas con el nombre y la estructura correctos.

AndroidStudioPluginMulti

4 – gimp-android-xdpi

El plugin para GIMP gimp-android-xdpi es una herramienta Open Source, que permite abrir una imagen con el editor y exportar las distintas versiones directamente en la carpeta «res» del proyecto Android.

Además de seleccionar las configuraciones de destino, este plugin de GIMP permite elegir si se desea exportar la imagen en la estructura de directorios «drawable» o «mipmap» (este último recomendado para los íconos de lanzamiento), y también si se desea obtener archivos .gif, .png o .jpg. A diferencia de las herramientas anteriores, este plugin permite seleccionar el ancho destino de la imagen, medido en píxeles independientes de la densidad (“dp»), lo que permite optimizar el tamaño final de los archivos resultantes.

GIMPPlugin

Esta herramienta no permite generar recursos para los que sería necesario ampliar la imagen. Si la combinación de tamaño original y tamaño destino no es posible, muestra un mensaje de error dentro de GIMP.

Una nota personal a modo de cierre

En este artículo describí cuatro herramientas que, con similitudes y diferencias, permiten acelerar la creación de recursos gráficos para el desarrollo de aplicaciones Android.

Mi favorita en lo personal es el plugin para GIMP, ya que puedo combinar la posibilidad de elegir la medida en “dp” con la herramienta de AngryTools para calcular equivalencias y lograr resultados muy agradables a la vista sin ocupar espacio extra en el apk final.

Sin embargo, cada uno de estos métodos puede ser útil en distintas ocasiones, y mantengo todos en mi “caja de herramientas”. ¿Conocen alguna otra opción? ¡No duden en recomendarla en los comentarios!

 

 

Marina Cuello

Marina Cuello es Senior Android Developer en intive – FDV. Recibida de Analista en Sistemas de Información en la Universidad Nacional de la Matanza, además estudió en el programa “Universidad Virtual” en Ciencias Sociales y Humanidades de la Universidad Nacional de Quilmes. Ávida lectora y cinéfila, en su tiempo libre Marina escribe literatura infantil y juvenil, hace muñecos de trapo y juega un poco de todo (videojuegos y juegos de mesa, también) con su hijo, su novio y sus amigos.

1 comentario