Crear un Menú personalizado en Android

Hola a todos,

Os voy a poner un pequeño manual de como podeis personalizar controles para android. Creo que es muy interesante la personalizacion, ya que es la encargada de dar unos rasgos propios a cada app y diferenciarse del resto. De esta forma podrás crear tu propio tema.

Por ejemplo yo para mi juego he optado por un tema tipo madera, y he creado un menu con 4 botones, a los que le he dado una imagen para su posicion natural del boton, otra imagen para cuando esta pulsado y lo he diseñado todo ello bajo cualquier resolucion posible.

La clave esta en crear inicialmente una textura o pequeña imagen para cada uno de los botones, yo por ejemplo cree estas dos:

Boton en reposo

Boton en Reposo

 

Boton posicion pulsado

Boton posicion pulsado

 

Una vez que tengamos la textura o el mini-boton, tenemos que pensar que ahora necesitamos decirle a android que seccion es la que tiene que estirar y que seccion no puede estirar para no deformarlo. Aqui entra en juego la aplicacion Draw 9-patch, que viene integrada con la SDK de android. La podras encontrar en: ..android-sdk-windows\tools\draw9patch.bat

Su funcionamiento es muy sencillo, unicamente tenemos que seleccionar la zona que queremos darle la propiedad de estiramiento. Haciendo click en la parte derecha, izquierda, arriba y abajo, la aplicación busca la intersección entre todos los lados y selecciona la zona de estiramiento. Es mucho más difícil de explicar que de probar, así que os recomiendo que lo probéis 😀

Captura de pantalla sobre el programa draw9patch

Mas info sobre esta aplicacion: http://developer.android.com/guide/developing/tools/draw9patch.html

Una vez que hayamos finalizado la seleccion, guardamos el fichero en formato PNG, y el programa lo nombra como nombreDado.9.png

Las imagenes ya estan preparadas para utilizarse y se escalaran de manera correcta. Os pongo un ejemplo de como he definido los botones en el XML de la interfaz:

Imagen del codigo XML generado para la interfaz de android

Por ultimo os dejo una captura del resultado final de mi Menu personalizado:

Imagen del resultado final

This entry was posted in Android. Bookmark the permalink.

2 Responses to Crear un Menú personalizado en Android

  1. Excelente info! siento que eso podría hacer más optima una aplicación al tener imágenes de menor tamaño 😀

  2. necora11 says:

    Hola Esteban,
    me ha gustado mucho la info… no conocia el Draw 9-patch.
    Imagino que colocas los dos archivos png (pulsado y si pulsar) en todas las subcarpetas drawable (l,m,h,xh,xxh) para que se escale adecuadamente ¿correcto?.
    ¿Dónde has definido que tipo de fuente que usas para los botones?
    Igual es obvio pero estoy empezando con esto del android y estoy un poco verde.
    Un saludo

Leave a Reply

Your email address will not be published. Required fields are marked *