Lesson 3 – Capture the click of a button in Kotlin

Problem:

Make a program that allows the loading of two integers in controls of type EditText (Number). Display within the same EditText controls messages that request loading values. Have a Button to add the two values entered. Display the result in a TextView type control.

The visual interface should look something like this:

Create a project called: Project002.

Let’s see step by step how we created the visual interface of our program. First, we delete the TextView that appears by default when creating a project with Android Studio. Now from the “Palette” window select the “Text” tab from the “Number” control (it is from the EditText class) and drag it to the design window of our interface to the upper left:

Now we select it and in the Properties window we specify the hint property, we have the text “Enter first text“:

We will also specify the property “id“, and we will assign the value et1

We have then assigned a name to this object: et1 (remember that it is an object of the class EditText), this name we will refer later from the program in Kotlin .

We perform the same steps to create the second EditText of type “Number” (we start the respective properties) We define the id with the name et2 and the hint property with the message “Enter the second value“, the visual result must be something like this :

From the “Widgets” tab drag a “Button” control:

We start the text property with the text “Add” and the property id we leave it with the already created value called “button”:

To finish with our visual interface we drag a component of type “TextView” of the tab “Text“. We define the id property with the value “tv1” and the text property with the text “Result“:

If you look at the window “Component Tree” we will see that all the objects displayed show an error icon(only shows in white background)

This is because we have not specified the “constraints” or location relationships between the visual controls. The easiest way to specify constraints is by pressing the “Infer Constraints“.

As we can see after pressing this icon were added a series of arrows between the visual controls that indicate the relative positions of the controls with respect to other controls and the edges of the window:

The errors in the “Component Tree” window disappear.

The “constraints” can be arranged one by one with the mouse by clicking on the circles that appear in each object.

If at this moment we run the application the visual interface appears correctly but when we press the button it will not show the sum.

So far we have only worked with the XML file (activity_main.xml) where we define the visual controls of the window we are creating.

Then open the file MainActivity.kt that can be located in the app \ java \ com \ coding180\ project002 \ MainActivity folder:

The MainActivity class inherits from the AppCompatActivity class. The AppCompatActivity class represents an Android window and has all the necessary methods to create and display the objects we have arranged in the XML file.

The source code of the MainActivity.tk class is:

Package com.coding180.project002

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)
    }
}

At a minimum, the inherited onCreate method of the AppCompatActivity class must be overwritten, where we proceed to call the setContentView method passing as a reference a value stored in a constant called activity_main contained in a class called layout that in turn contains a class called R (we will see more In advance that Android Studio is responsible for creating the class R automatically and serves as a bridge between the XML file and our MainActivity class)

Capture of events.

Now comes the part where we define variables in Kotlin; where we store the references to the objects defined in the XML file.

We define four variables, two of type EditText, one of type Button and finally one of type TextView (these three classes are declared in the package android.widget, it is necessary to import such classes to be able to define the variables of these classes, the easiest way To import the classes is once we define the object for example “val tv1: TextView” we will see that the name of the class appears in red and invites us to the Android Studio to press the “Alt” and “Enter” keys simultaneously. Then Android Studio automatically encodes the line that imports the class: import android.widget.TextView)

The complete program to be able to load two integer values and show their sum is:

package com.coding180.project002


import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
// coding180.com
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 sum = nro1 + nro2
            tv1.text = "Result: ${sum.toString()}"

        }
    }
}

We define a variable of type EditText:

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

To the findViewById method, we must pass the constant created in class R (remember that this class is automatically created) the name of the constant if it must be equal to the name of the property of the object created in the XML file. As the findViewById method returns a View object then we must use the “as” operator to tell it is of the EditText class.

Similarly, we get the reference of the second EditText, the TextView and the Button:

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

To capture the click event of an object of the Button class we must call the setOnClickListener method and pass a Lambda that will be executed when the respective button is pressed:

        button1.setOnClickListener {
            Val nro1 = et1.text.toString (). ToInt ()
            Var nro2 = et2.text.toString (). ToInt ()
            Val sum = nro1 + nro2
            Tv1.text = "Result: $ {suma.toString ()}"

        }

The algorithm to sum the two values entered is solved by accessing the text property of each EditText, converting those data to String and finally calling the toInt method to convert it to integer:

            Val nro1 = et1.text.toString (). ToInt ()
            Var nro2 = et2.text.toString (). ToInt ()

Then add these values and show them in the TextView:

            Val sum = nro1 + nro2
            Tv1.text = "Result: $ {suma.toString ()}"

After loading two values when pressing the button appears in the TextView the result of the sum of the two EditText:

….Finally we can say that Kotlin aims to make our code as concise as possible, then the same program can be written:

Finally, we can say that Kotlin aims to make our code as concise as possible, then the same program can be written:

package com.coding180.project002


import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
// coding180.com
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 = "Result: ${et1.text.toString().toInt() + et2.text.toString().toInt ()}"
        }
    }
}