Práctica: 3 “Capturando el clic de un botón”

Práctica: 3 “Capturando el clic de un botón”[pic 1]

Objetivo: Capturar el clic de un botón. Construiremos una aplicación que permita la captura de dos números en controles de tipo EditText, acompañados de mensajes TextView que soliciten la carga de dichos números. Agregar un control Button que al hacer clic en él sume los números introducidos y presente el resultado en un tercer TextView.

1.     Inicie Android Studio y en la ventana que aparece elija Start a new Android Studio Project.

2.     En la ventana que se presenta escriba Practica3 como nombre de la aplicación. Deje los demás datos por default, elija el lugar en donde desea almacenar su aplicación y pulse Next.

3.     En la ventana que se muestra deje los valores por default y pulse Next.

4.     En la ventana que aparece seleccione Empty Activity y pulse Next.

5.     En la ventana que se presenta deje los valores por default y pulse Finish.

6.     La siguiente figura muestra la interfaz que queremos crear:

[pic 2]

7.     Primero pulse en la cejilla main_activity.xml, se presentará una especie de celular que en verdad será nuestro lienzo en donde colocaremos los widgets (controles) que utilizaremos. Borre el TextView que aparece por defecto cuando se crea un proyecto con el Android Studio y que podemos reconocer por la leyenda Hello world!.[pic 3]

8.     Ahora desde la ventana Palette seleccionamos de la pestaña Widgets el control TextView

y lo arrastramos a la ventana de diseño de nuestra interfaz ubicándolo en la parte superior izquierda:

[pic 4]

9.     Ahora  seleccionamos  el  control  TextView  recién  incorporado  y  en  la  ventana  de propiedades (Properties) buscamos la propiedad text y le asignamos el texto "Ingrese el primer valor:":

[pic 5]

10.  Enseguida le daremos un nombre a este objeto asignando a su propiedad ID el nombre tvPrimerValor.

11.  Ahora  de la paleta de componentes, de la sección Text Fields, arrastramos un control

Number que pertenece a la clase EditText. Colócalo por debajo de tvPrimerValor:

[pic 6]

12.  Estando  seleccionado este EditText, vaya a la ventana de propiedades y configure su propiedad id con el valor etPrimerValor (este nombre lo utilizaremos para hacer referencia a dicho control desde java).

13.  Realice  los  mismos  pasos  para  crear  el  segundo  TextView  y  el  segundo  EditText, definiendo sus propiedades de la siguiente manera:[pic 7]

•       Control: TextView, id = tvSegundoValor, text = Ingrese el segundo valor:

•       Control: EditText (Number), id = etSegundoValor

14.  Arrastre un control Button y ubíquelo por debajo del último control Number. Configure su

propiedad text con el valor Sumar y la propiedad id con el valor btSumar:

[pic 8]

15.  Para terminar la interfaz debemos arrastrar un tercer TextView y colocarlo por debajo del botón. Configure su propiedad id con el valor tvResultado y la propiedad text con el valor Resultado. La interfaz debería lucir así:

[pic 9]

16.  Si ejecutáramos la aplicación aparecería la interfaz que acabamos de crear, pero si pulsamos el botón Sumar no sucedería nada. Hasta ahora hemos trabajado solo con el archivo XML activity_main.xml, en el cual definimos los controles visuales de nuestra aplicación. Lo siguiente es darle vida al botón mediante código java. Para ello pulse en la cejilla MainActivity.java y se presentará la ventana de edición de código:

[pic 10][pic 11]

La clase MainActivity hereda de la clase AppCompatActivity, lo que la convierte en una actividad o “pantalla”. También podemos observar como se ha sobrescrito el método onCreate que se ejeuctará al iniciarse la aplicación:

...