Icono y Personalización de la Action Bar

Después de unos últimos días bastantes dedicados a la programación pura y dura, por ese cambio en la estructura de la Base de Datos que involucró un cambio bastante grande en toda la lógica de edición de Qdadas, quería inhibirme un poco de teclear código como un simio. Así que qué mejor que diseñar un primer logo de la app, y personalizar un poco algunos elementos propios de Android que la app utiliza, como: la Action Bar, las pestañas del PageAdapter de los fragments de una activity, etc.

Empecemos con el diseño del logo o icono. El logo quería que fuese algo sencillo y que recordará a la finalidad de la app ‘Quedar con tus amigos‘. Como he dicho una y mil veces, yo de diseño gráfico sé lo mismo que de tecnología termonuclear… así que no me iba a detener demasiado tiempo en ello. Sólo necesitaba un diseño que no fuera horrendo, más o menos aceptable, y que pudiera pasar desapercibido. Si hay algún diseñador gráfico en la sala y quiera participar en este proyecto, ¡Qué de un paso al frente!, ‘Qdemos needs you!‘ Mientras tanto tengo que ir tirando con mis pocos conocimientos en ese mundillo e intentar que la aplicación sea atractiva mire por dónde se mire. Una gran parte del éxito de una app es que le llame al usuario la atención por los ojos, eso es un corolario que tengo muy aprendido.

Así que lo primero que se me pasó por la cabeza fue que el icono fuese una Q, la Q de Qdemos!. Y ese fue mi punto de partida, buscar algún diseño con una Q que me inspirara para hacer la mía propia. El software que usé para crear el icono, fue el Gimp (no es por el concurso, sino porque es el que uso siempre). Así que con el Gimp abierto y Google Imágenes preparado con la primera búsqueda de la letra Q, me dispuse a diseñar algo que mejorara al tipico icono del Droide que traen por defecto las apps Android, y que tenia hasta ahora.

Buscando y mirando distintos diseños de Q por Google, me di cuenta de que lo que destaca en la Q es el rabito. Así que puse más enfasis en él y me fijé más en como la gente lo trataba, hasta que encontré una idea que me pareció muy buena, y era usar el rabito para representar una acción. Lo llevé a mi terreno y pensé que el rabito podía ser un pie de una persona. ¿Y que quiero representar con eso exactamente?, me estareis preguntando… pues ¡La acción de que una persona de el primer paso para Qdar con otra!, al fin y al cabo, la finalidad de la app es que una persona cree una Qdada para quedar físicamente con otra/s personas. Así que ya tenía elegido el diseño estructural, ahora me faltaba un color… y tiré por la vía rápida y elegí el azul, que suele gustar a todo el mundo y que se complementa bien con los colores de Facebook, que al fin y al cabo predominan en la app por la utilización de los botones y lista de amigos de su SDK. Ya habrá tiempo para rectificar… cuando el diseñador gráfico que me esté leyendo no pueda más y diga: ¡Basta ya, déjame a mi el diseño y dedícate a seguir programando!… la app cambiará jeje.

Con todo esto, el icono quedó como vemos a continuación (El tema de las resoluciones tampoco la controlé, porque el icono fue una creación de cogiendo esto de aquí y esto otro de allá, así que perdón si se observa pixelado).

Icono de Qdemos!

Icono de Qdemos!

Con el icono ya añadido al proyecto y funcionando en la app, el siguiente paso fue personalizar un poco elementos que se verían en cada pantalla, como el Action Bar. El diseño por defecto es una barra totalmente negra, así que muy sobrio para mi gusto =P.

Para esta personalización siempre hago uso de una herramienta web que permite diseñar online los colores y estilos de estos elementos y te generá todos los archivos necesarios para tu proyecto. Por lo que simplemente es añadirlos en el proyectos y modificar el estilo en el AndroidManifest. La herramienta en cuestión es: Android Action Bar Style Generator. Hay otro tipo de recursos y herramientas online que son bastante útiles para el diseño en Android, dejo aquí una recopilación de algunos de estos recursos: Android Assets Studio.

Pues bien, sólo me faltaba elegir el color que usaria, y el si le pondría algún tipo de textura. La textura desde el inicio sabía que sí: me gustan mucho las Action Bar con un rayado uniforme lateral, creo que le da un toque sutil a la par que elegante. Así que sólo faltaba elegir el color. Para elegir el color, debía conocer cuales eran los colores predominantes en la app, y junto a que lo iba a enfrentar. El color más importante sobre el que iba a resaltar la Action Bar era el propio azul del Icono, ya que el Icono va en la parte derecha de la Action Bar, así que sólo quedaba encontrar el color complementario al azul. Para ello, también hago uso de una herramienta web que te permite combinar colores y te dice que colores combinan mejor con que otros colores. Su nombre es: Color Scheme Designer, y es totalmente aconsejable.

Usando esta web, supe que el color complementario del azul es el amarillo. Por ello me decidí a poner en el Action Bar un amarillo-dorado que resaltara el azul de icono, y además también seleccioné un amarillo para la cenefa de selección de pestañas en los Pages Adapters de las activitys que manejan los fragments de las dintintas pantallas. Además en estas penstañas elegí como fondo un azul grisaseo que se complementara con el amarillo-dorado de la Action Bar y de la selección de pestañas. Por lo que el trabajo con la herramienta web me quedó de la siguiente manera:

personalizarAB

Herramienta Web para la Personalización del Action Bar

Finalmente, y tras descargar los archivos generador por dicha web, y mimetizarlos con los de mi proyecto, modificando el estilo descrito en el Manifest del mismo, obtuve como resultado un diseño final (Icono y Action Bar) como se muestra a continuación, viendo el diseño inicial y el diseño con personalización de ahora:

Action Bar sin Personalizar

Action Bar sin Personalizar

Screenshot_2014-01-29-13-54-11

Action Bar Personalizada

Y esto ha sido todo, como siempre os dejo con el Commit donde he añadido todo esto: Commit.

Anuncios

4 pensamientos en “Icono y Personalización de la Action Bar

  1. Hola Paco Martin oye estoy tratando de cambiarle el color a mi Action Bar y he visto tu tutorial y lo has logrado por favor podrias ayudarme soy nuevo en esto y no se como hacerlo no entiendo podrias describir los pasos que seguiste en el entorno

  2. Hola Paco,estoy tratando de cambiarle el color a mi Action Bar. ingrese a Android Asset Studio descargue la carpeta con todos los archivos luego de personalizar mi barra en la web, pero no logro colocarla dentro de la app, todo el layout queda blanco sin mostrar la action bar. lo que hago es reemplazar el Style.xml en values. trabajo con Android Studio. espero puedas ayudarme saludos.

    • Debes reemplazar todos los archivos que se hayan descargado… Y modificar el nombre en el Manisfest donde se indica el style que se usa. Hay un montón de gente en StackOverFlow que indican paso a paso como hacerlo :P… Echales un vistazo con una búsqueda rápida en Google 😉

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s