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.

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.