3 - Capturar el clic de un botón

Problema:

Confeccionar un programa que permita la carga de dos números enteros en controles de tipo EditText (Number). Mostrar dentro de los mismos controles EditText mensajes que soliciten la carga de los valores. Disponer un Button para sumar los dos valores ingresados. Mostrar el resultado en un control de tipo TextView.

La interfaz visual debe quedar algo semejante a esto:
interfaz sumar dos numeros android

Crear un proyecto llamado:Proyecto002.

Veamos paso a paso como creamos la interfaz visual de nuestro programa. Primero borramos el TextView que aparece por defecto cuando se crea un proyecto con el Android Studio. Ahora desde la ventana "Palette" seleccionamos de la pestaña "Text" el control "Number" (es de la clase EditText) y lo arrastramos a la ventana de diseño de nuestra interfaz a la parte superior izquierda:

interfaz sumar dos numeros android

Ahora lo seleccionamos y en la ventana de propiedades (Properties) especificamos la propiedad hint, disponemos el texto "Ingrese el primer valor":
interfaz sumar dos numeros android

También vamos a especificar la propiedad "id", y le asignaremos el valor et1
interfaz sumar dos numeros android
Hemos entonces asignado como nombre a este objeto: et1 (recordemos que se trata de un objeto de la clase EditText), este nombre haremos referencia posteriormente desde el programa en Kotlin.

Efectuamos los mismos pasos para crear el segundo EditText de tipo "Number" (iniciamos las propiedades respectivas) Definimos el id con el nombre et2 y la propiedad hint con el mensaje "Ingrese el segundo valor", el resultado visual debe ser algo semejante a esto:

interfaz sumar dos numeros android

De la pestaña "Widgets" arrastramos un control de tipo "Button":
interfaz sumar dos numeros android
Iniciamos la propiedad text con el texto "Sumar" y la propiedad id la dejamos con el valor ya creado llamado "button":

interfaz sumar dos numeros android

Para terminar con nuestra interfaz visual arrastramos una componente de tipo "TextView" de la pestaña "Text". Definimos la propiedad id con el valor "tv1" y la propiedad text con el texto "Resultado":

interfaz sumar dos numeros android

Si nos fijamos en la ventana "Component Tree" veremos que todos los objetos dispuestos muestran un ícono de error:

interfaz sumar dos numeros android

Esto ocurre porque no hemos especificado los "constraints" o relaciones de ubicación entre los controles visuales. La forma más fácil de especificar los "constraints" es presionando el ícono de "Infer Constraints"

interfaz sumar dos numeros android

Como podemos ver luego de presionar dicho ícono se agregaron una serie de flechas entre los controles visuales que indican las posiciones relativas de los controles respecto a otros controles y los bordes de la ventana:

interfaz sumar dos numeros android

Desaparecen los errores de la ventana "Component Tree".

Los "constraints" los podemos disponer uno a uno nosotros con el mouse presionando en los círculos que aparecen en cada objeto.

Si en este momento ejecutamos la aplicación aparece la interfaz visual correctamente pero cuando presionemos el botón no mostrará la suma.

Hasta ahora hemos trabajado solo con el archivo xml (activity_main.xml) donde se definen los controles visuales de la ventana que estamos creando.

Abrimos seguidamente el archivo MainActivity.kt que lo podemos ubicar en la carpeta app\java\com\tutorialesprogramacionya\proyecto002\MainActivity:

carpetas y archivos de un proyecto android

La clase MainActivity hereda de la clase AppCompatActivity. La clase AppCompatActivity representa una ventana de Android y tiene todos los métodos necesarios para crear y mostrar los objetos que hemos dispuesto en el archivo xml.

El código fuente de la clase MainActivity.tk es:

package com.tutorialesprogramacionya.proyecto002

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Como mínimo se debe sobrescribir el método onCreate heredado de la clase AppCompatActivity donde procedemos a llamar al método setContentView pasando como referencia una valor almacenado en una constante llamada activity_main contenida en una clase llamada layout que a su vez la contiene una clase llamada R (veremos más adelante que el Android Studio se encarga de crear la clase R en forma automática y sirve como puente entre el archivo xml y nuestra clase MainActivity)

Captura de eventos.

Ahora viene la parte donde definimos variables en Kotlin donde almacenamos las referencias a los objetos definidos en el archivo XML.

Definimos cuatro variables, dos de tipo EditText, una de tipo Button y finalmente una de tipo TextView (estas tres clases se declaran en el paquete android.widget, es necesario importar dichas clases para poder definir las variables de dichas clases, la forma más fácil de importar las clases es una vez que definimos el objeto por ejemplo "val tv1: TextView" veremos que aparece en rojo el nombre de la clase y nos invita el Android Studio a presionar las teclas "Alt" e "Intro" en forma simultánea. Luego el Android Studio codifica automáticamente la línea que importa la clase: import android.widget.TextView)

El programa completo para poder cargar dos valores enteros y mostrar su suma es:

package com.tutorialesprogramacionya.proyecto002

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val et1: EditText
        et1 = findViewById(R.id.et1) as EditText
        val et2: EditText
        et2 = findViewById(R.id.et2) as EditText
        val tv1: TextView
        tv1 = findViewById(R.id.tv1) as TextView
        val boton1: Button
        boton1 = findViewById(R.id.button) as Button
        boton1.setOnClickListener {
            val nro1 = et1.text.toString().toInt()
            var nro2 = et2.text.toString().toInt()
            val suma = nro1 + nro2
            tv1.text = "Resultado: ${suma.toString()}"

        }
    }
}

Definimos una variable de tipo EditText:

        val et1: EditText
        et1 = findViewById(R.id.et1) as EditText

Al método findViewById debemos pasar la constante creada en la clase R (recordemos que se crea automáticamente esta clase) el nombre de la constante si debe ser igual con el nombre de la propiedad del objeto creado en el archivo XML. Como el método findViewById retorna un objeto de tipo View luego debemos utilizar el operador "as" para indicarle que es de la clase EditText.

De forma similar obtenemos la referencia del segundo EditText, el TextView y el Button:

        et2 = findViewById(R.id.et2) as EditText
        val tv1: TextView
        tv1 = findViewById(R.id.tv1) as TextView
        val boton1: Button
        boton1 = findViewById(R.id.button) as Button

Para capturar el evento clic de un objeto de la clase Button debemos llamar al método setOnClickListener y pasar una Lambda que se ejecutará cuando se presione el botón respectivo:

        boton1.setOnClickListener {
            val nro1 = et1.text.toString().toInt()
            var nro2 = et2.text.toString().toInt()
            val suma = nro1 + nro2
            tv1.text = "Resultado: ${suma.toString()}"

        }

El algoritmo para sumar los dos valores ingresados se resuelve accediendo a la propiedad text de cada EditText, convirtiendo dichos datos a String y finalmente llamando al método toInt para convertirlo a entero:

            val nro1 = et1.text.toString().toInt()
            var nro2 = et2.text.toString().toInt()

Luego sumamos dichos valores y los mostramos en el TextView:

            val suma = nro1 + nro2
            tv1.text = "Resultado: ${suma.toString()}"

Luego de cargar dos valores al presionar el botón aparece en el TextView el resultado de la suma de los dos EditText :

interfaz sumar dos numeros android

Este proyecto lo puede descargar en un zip desde este enlace: proyecto002.zip

Por último podemos decir que Kotlin tiene por objetivo que nuestro código sea lo más conciso posible, luego el mismo programa puede ser escrito:

package com.tutorialesprogramacionya.proyecto002

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val et1 = findViewById(R.id.et1) as EditText
        val et2 = findViewById(R.id.et2) as EditText
        val tv1 = findViewById(R.id.tv1) as TextView
        val boton1 = findViewById(R.id.button) as Button
        boton1.setOnClickListener {
            tv1.text = "Resultado: ${et1.text.toString().toInt() + et2.text.toString().toInt()}"
        }
    }
}