LABORATORIO 2.

4: Botón con gráficos personalizados (Mas Vistas)

1.     Crea un nuevo proyecto con los siguientes datos:

Application name: MasVistas
Package name: org.example.masvistas
Minimun Requiered SDK: API 7 Android 2.1 (Eclair)
Activity Name: MasVistasActivity
Layout Name: main.xml
2.     Crea el fichero boton.xml en la carpeta res/drawable/. Para ello puedes utilizar el
menúArchivo/Nuevo/Android XML File y pon en File: “botón” y selecciona en tipo Drawable.
Reemplaza el código por el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<selector 
   xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/boton_pulsado"
          android:state_pressed="true" />
    <item android:drawable="@drawable/boton_con_foco"
          android:state_focused="true" />
    <item android:drawable="@drawable/boton_normal" />
</selector>
Este XML define un recurso único gráfico (drawable) que cambiará en función del estado del
botón. El primer <item> define la imagen usada cuando se pulsa el botón, el segundo <item>
define la imagen usada cuando el botón tiene el foco (cuando el botón está seleccionado con la
rueda de desplazamiento o las teclas de dirección), el tercero la imagen en estado normal. Los
gráficos y en concreto los drawables serán estudiados en el CAPÍTULO 1 y CAPÍTULO 4.
NOTA: El orden de los elementos <item> es importante. Cuando se va a dibujar se recorren los ítems
en orden hasta que se cumpla una condición. Debido a que "boton_normal" es el último, sólo se aplica
cuando las condicionesstate_pressedy state_focused no se cumplen.
3.     Descarga las tres imágenes. El nombre que ha de tener cada fichero aparece debajo:
 

    boton_normal.jpg          boton_con_foco.jpg                boton_pulsado.jpg
4.  Arrastra estas imágenes a la carpeta res/drawable/ del proyecto.
5.     Abre el fichero res/layout/main.xml.
6.     Elimina el TextView que encontrarás dentro del LinearLayout.
7.     Selecciona el LinerLayout e introduce en el atributo Background el valor #FFFFFF.
8.     Arrastra una vista de tipo Button dentro del LinearLayout.
9.     Selecciona el atributo Background y pulsa en el botón selector de recurso (con puntos
suspensivos). Selecciona Drawable/boton.
10.  Modifica el atributo Text para que no tenga ningún valor.
11.  Introduce en el atributo onClick el valor sePulsa. (Ojo; este atributo solo está disponible a
partir de la versión 1.6)
 12.  Abre el fichero MasVistasActivity.java e introduce al final, antes de la última llave, el
código:
   
public void sePulsa(View view){
         Toast.makeText(this, "Pulsado", Toast.LENGTH_SHORT).show();   }
Pulsa Ctrl-Shift-O para que se añadan automáticamente los paquetes que faltan en la
sección import.
     El método anterior será ejecutado cuando se pulse el botón. Este método se limita a
lanzar un Toast, es decir, un aviso que permanece un cierto tiempo sobre la pantalla y
luego desaparece.  Los tres parámetros son: 1-El contexto utilizado, coincide con la
actividad. 2-El texto a mostrar y 3-El tiempo que permanecerá este texto. Los conceptos
de actividad y contexto serán desarrollados en el siguiente capítulo. 
13.  Ejecuta el proyecto y verifica el resultado.
14.  El código resultante para el fichero main.xml se muestra a continuación:
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF">
    <Button android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/boton"
      android:onClick="sePulsa"/>
</LinearLayout>