Cómo aplicar estilos a los controles de Android

Buenas, la semana pasada vimos como crear nuestra primera aplicación Android, la cual era muy básica. Os dejé trasteando con los controles de Android y viendo qué es lo que ofrecía esta plataforma en ese aspecto.




Los controles de Android son muy similares a los que podéis encontrar en cualquier otro lenguaje como HTML, nos podemos encontrar etiquetas, cajas de texto, botones, checkbox, los diferentes tipos de layouts...

Normalmente cuando empezamos un proyecto nuevo se tiende a descuidar un poco más el diseño, pero si nos paramos un poco a definir el estilo base que tendrá, cuando llegue el momento en el que el diseñador nos diga todos los cambios será mucho más fácil aplicarlos. Os ahorrará muchísimo código duplicado y aportará claridad a vuestro código.

Vimos en nuestra aplicación holamundo que el control TextView debía tener como mínimo los atríbutos layout_width y layout_height, pues bien, a parte de esto, al tratarse de una etiqueta puede tener otros atríbutos como el color, el tamaño, el tipo de letra.


Tipo de letra
Android por defecto permite muy pocos tipos de letra, pero es posible añadir el que nosotros queramos. El proceso implica hacer la asignación mediante código, pero será un tema a tratar más adelante.


Ahora imaginaros que en vez de tener una etiqueta, tenemos 100. Tenemos que asignar estos atributos en las 100 etiquetas. Por otra parte, imaginemos que se trata de una aplicación que es imprescindible entregar en dos días y al diseñador se le ocurre la feliz idea de cambiarle el color, tamaño sí o sí. Perderemos un tiempo valioso haciendo estos cambios.

Afortunadamente, hemos sido precavidos y al final utilizamos un estilo. Los estilos nos permiten evitar este tipo de situaciones a parte de otras menos comprometedoras. Para trabajar con ellos debemos crear un archivo llamado styles.xml en la carpeta values dentro de res. En este archivo declaramos cada uno de los estilos que vamos a aplicar a nuestros controles de la siguiente forma dentro de la etiqueta principal resources:


<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Label">
     <item name="android:layout_width">wrap_content</item>
     <item name="android:layout_height">wrap_content</item>
     <item name="android:textColor">#fff</item>
     <item name="android:textSize">10dp</item>    
</style>
</resources>


Lo primero que hacemos es definir en la etiqueta style el name de nuestro estilo "Label" que aplicaremos en todas nuestras etiquetas. Después, dentro de esta, definimos cada uno de los parámetros, el ancho y alto de la etiqueta, color y tamaño de la fuente. En la etiqueta definimos el atributo style de la siguiente forma:


<TextView android:id="@+id/lbl" style="@style/Label" />


Se trata de un concepto muy similar al de las hojas de estilo CSS en HTML. El cual nos simplificará de una forma considerable el código y ayudará a hacer más rápidos los cambios de diseño.

Otra de las formas de hacer más bonita nuestra aplicación es con los 9patch. Está técnica lo que hace es aplicar a un elemento una imagen de fondo la cual ajustará su tamaño al contenedor solamente donde hemos indicado, impidiendo de esta forma que se deforme y quede muy feo el control. El resto de la imagen de fondo se mantendrá igual sin modificar su tamaño. Esta técnica nos permitirá crear fondos que crecerán todo lo que deseemos sin que se deformen. Crearemos por así decirlo un parche en la imagen para rellenar todo lo que se necesite.

Vamos a hacer rapidamente un fondo para un LinearLayout con esta técnica. Primero con GIMP crearemos un fondo como el que veis en la siguiente imagen, también podeís dejar volar vuestra imaginación y crear el que más os guste, una vez este listo lo guardamos en formato png. No importa que para un primer ejemplo no os quede perfecto. Una vez hecho, abrimos el programa para crear el 9patch, para ello desde un terminal ejecutamos: draw9patch.






Una vez abierto el programa vamos a File -> open 9-patch y buscamos la imagen que acabamos de crear. El programa básicamente lo que va a hacer es ampliar la imagen 1 píxel de contorno para que indiquemos ahí cuales serán las áreas que se van a quedar igual y cuáles crecerán. Iremos pinchando sobre los bordes de la imagen a la vez que se pintarán píxeles de color negro los cuales nos definirán el área de contenido y los parches estirables. Podemos ver como quedarán las áreas en la parte de la derecha. Una vez terminemos de editar esto, guardamos la imagen. 
Esta imagen la copiamos en la carpeta drawable de nuestro proyecto, si no la hemos copiado desde Eclipse, hacemos botón derecho sobre la carpeta drawable y hacemos un Refresh para que eclipse la incluya en el proyecto.


draw9patch
Podemos guardar con el mismo nombre de la imagen ya que el programa añadirá a nuestra imagen antes de la extensión png “9.”, quedando un archivo llamado imagen.png así: imagen.9.png


Ahora vamos a utilizar nuestra imagen en un LinearLayuot (vale cualquier tipo de layout). Para ello en nuestro archivo main.xml en el LinearLayout definimos el atributo background y le decimos que su imagen de fondo es “@drawable/imagen”, suponiendo que nuestra imagen se llame imagen.png. Podemos aplicar esto a cualquier otro elemento.


Ahora podéis ir añadiendo progresivamente cualquier elemento y ver como va creciendo el fondo. También podéis definir varios layout con este background dentro del layout principal con diferentes tipos de controles y ver como se comportan según el tamaño. El caso es que experimentéis vosotros mismos cómo funciona esta técnica para que la sepáis aplicar y utilizar en vuestra aplicación como más os guste. Por último, deciros que yo la estoy aplicando directamente en el control, pero lo mejor es que acabéis incluyendolo en vuestro archivo de styles.


<LinearLayout android:id="@+id/lyt" android:background="@drawable/imagen" />


El último efecto que voy a explicar hoy es el de un botón que al pulsarlo cambia su imagen de fondo con lo que el usuario puede ver que ha pulsado correctamente el botón, es el efecto que tenemos en la aplicación android nosinmiubuntu. Para ello creamos otra vez con GIMP dos imágenes iguales pero con diferente color de fondo. Las guardamos en drawable y les llamamos: button_on.png y button_off.png






Ahora en drawable creamos un archivo nuevo al que llamaremos: button_states.xml y añadimos el siguiente código:


<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_off" android:state_focused="true" android:state_pressed="false">
<item android:drawable="@drawable/button_black_on" android:state_focused="true" android:state_pressed="true">
<item android:drawable="@drawable/button_black_on" android:state_focused="false" android:state_pressed="true">
<item android:drawable="@drawable/button_off">
</item></item></item></item></selector>


Ahora en nuestro main.xml creamos un elemento ImageButton agregamos a nuestro botón el atributo src quedando así:


<ImageButton android:id="@+id/btn" android:src="@drawable/button_states" />


Ahora al ejecutar la aplicación y pulsar sobre el botón veremos como cambia a la nueva imagen que hemos preparado. En el ejemplo he utilizado dos imágenes, pero se pueden preparar hasta cuatro imagenes diferentes según los cuatro estados que vemos según si tiene el foco y si está presionado. Por otro lado el botón tiene un borde gris, si quereis eliminarlo podeís asignar un background @null. Os dejo un pequeño ejemplo aplicado en un style:


<style name="Button">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@null</item>
    <item name="android:src">@drawable/button_states</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_margin">2dip</item>
    <item name="android:paddingLeft">5dip</item>
    <item name="android:paddingRight">5dip</item>
</style>


Bueno, hasta aquí por esta semana, no os he puesto muchas imágenes porque nos gustaría que fuerais vosotros los que nos mandéis vuestras creaciones sobre este tema al correo del blog nosinmiubuntublog@gmail.com. Animaros, esperamos vuestras creaciones.

Comments are closed.