Siguiendo con la serie de artículos sobre Android desde Cero (apúntate aquí para no perderte ninguno), hoy vamos a ver cómo hacer click en un botón, y de ahí lanzar una acción.

Para ello, te recomiendo que veas antes los vídeos de la Activity y de los Layouts, porque si no hay algunas cosas que te va a costar seguir.

En el vídeo de hoy vamos a ver cómo:

• Lanzar un Log al hacer click en un botón
• Mostrar un Toast, y cómo podemos configurarlo
• Extra para los más avanzados: String Templates en Kotlin

¡Espero que lo disfrutes! Te dejo aquí el vídeo:

Como utilizar las vistas

Lo primero es tener por lo menos un campo email y un botón. Partiendo de lo anterior tenemos que agregarle un ID (identificador único) a nuestros elementos para poder manipular los valores del campo email u otros y también los eventos que podemos manejar con el botón.

La forma mas rápida de avanzar en nuestro desarrollo como DevExpertos es no olvidar seguir la secuencia de videos ya descritos al inicio de este articulo porque nos permitirá comprender como hacer las cosas mucho mas sencillas y tendremos una nueva habilidad para nuestros proyectos.

Le agregaremos los ID a nuestros dos elementos haciendo click primero sobre nuestro cambo email o botón y yendo a los atributos de este campo que es el primer atributo que aparece. Los ID deben tener nombres de referencia a lo que se quiere hacer o lo que son, en este ejemplo para el campo de tipo email el ID será “email” y para el botón el ID será “send”.

Ya con nuestros ID pasamos a recuperar todas esas propiedades de nuestros dos elementos para usarlos en nuestra MainActivity. En la clase principal crearemos las variables con los campos que tenemos en nuestra pantalla que son:

• Email
• Phone
• Password
• Button

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

        val email = findViewById<EditText>(R.id.email)
        val phone = findViewById<EditText>(R.id.phone)
        val password = findViewById<EditText>(R.id.password)
        val sendButton = findViewById<Button>(R.id.send)

    }
}

Identificar acciones

La que queremos es que cuando hagamos click sobre el botón se lance una acción. Tenemos que identificar la acción que queremos hacer para ello se utiliza setOnClickListener en el botón pero se puede usar para cualquier vista porque forma parte de aquella vista padre de la que hemos venido hablando en los otros artículos. El Botón de enviar desplegara un mensaje usando Log.

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

        val email = findViewById<EditText>(R.id.email)
        val phone = findViewById<EditText>(R.id.phone)
        val password = findViewById<EditText>(R.id.password)
        val sendButton = findViewById<Button>(R.id.send)

        sendButton.setOnClickListener {
            Log.d("MainActivity", "Button Clicked")
        }
    }
}

Luego de haber definido nuestro evento y ejecutar nuestra App nos debe mostrar en la pestaña Run al final del Android Studio al hacer click sobre el botón el mensaje de “Button Clicked”.

Como utilizar los Toasts

Los Toasts son una pequeña vista que aparece al final de la pantalla en la que podemos dar un contexto rápido dentro de las Apps diciendo lo que ha ocurrido. Cambiaremos el Log que usamos anteriormente para usar Toast, dejando ver nuestros cambios en la pantalla del dispositivo y no en el Android Studio. Necesitaremos guardar nuestro mensaje a mostrar en una variable llamada “message”.

Si recuerdas tantos los TextView como los EditText en el campo text guardan el contenido que haya adentro y luego lo que vamos hacer es llamar a la clase Toast; luego el método makeText, el primer argumento será un contexto; el segundo será el texto, que en este caso es el message; por ultimo le podemos pasar una duración (tiempo en pantalla) en milisegundos, Toast.LENGTH_SHORT, Toast.LENGTH_LONG ; cuando queremos referirnos al componente dentro del que estamos utilizando (el botón) usamos la palabra reservada “this ;” las Activity extienden de contexto y por tanto las podemos usar en donde se necesite un contexto. No podemos olvidar utilizar el método Show para que nos muestre por pantalla. Al Darle enviar veremos esto:

Cómo utilizar los String template de Kotlin

En forma muy abreviada los String template lo que nos permiten es mezclar cadenas de texto con variables, como veremos a continuación en la variable “message”:

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

        val email = findViewById<EditText>(R.id.email)
        val phone = findViewById<EditText>(R.id.phone)
        val password = findViewById<EditText>(R.id.password)
        val sendButton = findViewById<Button>(R.id.send)

        sendButton.setOnClickListener {
            val message = "Email: ${email.text}, Phone: ${phone.text}"
            Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
        }
    }
}