CS-EJ4102 - Mobile Application Development with Android D, 07.09.2020-23.10.2020

In this tutorial, you will learn how to implement an Android application in Kotlin. The app will display a greeting message given an input provided by a user.

Creating a simple layout

First, we create an XML layout that includes the elements required for our app. For this example, we will use three elements: TextView, EditText, and Button

res/layout/main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">
   <TextView
       android:id="@+id/txtNameLabel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="104dp"
       android:layout_marginLeft="20dp"
       android:text="Name"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"></TextView>
   <EditText
       android:id="@+id/editText"
       android:layout_width="150dp"
       android:layout_height="60dp"
       android:layout_marginStart="85dp"
       android:layout_marginTop="84dp"
       android:hint="Input name"
       android:inputType="text"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
   </EditText>
   <Button
       android:id="@+id/btnTry"
       android:layout_width="90dp"
       android:layout_height="50dp"
       android:layout_marginTop="20dp"
       android:gravity="center"
       android:text="TRY"
       app:layout_constraintStart_toStartOf="@+id/editText"
       app:layout_constraintTop_toBottomOf="@+id/editText"></Button>
   <TextView
       android:id="@+id/txtResultLabel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginStart="20dp"
       android:layout_marginTop="50dp"
       android:text="Result"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/btnTry">
   </TextView>
   <TextView
       android:id="@+id/txtResultValue"
       android:layout_width="wrap_content"
       android:layout_height="21dp"
       android:layout_marginLeft="92dp"
       android:layout_marginTop="64dp"
       android:text="Hello"
       app:layout_constraintLeft_toLeftOf="@+id/txtResultLabel"
       app:layout_constraintTop_toTopOf="@+id/txtResultLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>

Adding click events in Kotlin

Once defined the XML, we need to implement the action for the click event. First, we link the button declared in the layout by calling the findViewById() method. In this case, the button was defined with id btnTry

 val button = findViewById<Button>(R.id.btnTry)

Next, we define a listener for the button when it is clicked on.

  button.setOnClickListener{
         // action to perform when the button is clicked
       }

MainActivity.kt

package com.example.hellokotlin
import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.inputmethod.InputMethodManager
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 button = findViewById<Button>(R.id.btnTry)
       button.setOnClickListener{
           //action to perform when the button is clicked
       }
   }

Defining functions in Kotlin

Next, we define a function that is called when the button is clicked. As mentioned before, our app displays a greeting message based on the input provided by the user. For instance, if a user enters Alice, the message will say Hello Alice.

First, we define the function called sendHello()

private fun sendHello(){
}

Next, we need to link the elements declared in the layout. In this case, we use the EditText that represents the input and the TextView which shows the message.

 val editText = findViewById<EditText>(R.id.editText)
 val txtResult = findViewById<TextView>(R.id.txtResultValue)

To obtain the input from the user, we call the text method from the EditText

 val input = editText.text

To append the new content, we use the function append from the TextView

 txtResult.append(" " + input)

Finally, the function looks like the following

private fun sendHello(){
   val editText = findViewById<EditText>(R.id.editText)
   val txtResult = findViewById<TextView>(R.id.txtResultValue)
   val input = editText.text
   txtResult.append(" " + input)
}

Call this function in the listener previously defined

btnTry.setOnClickListener{
   sendHello()
}

At this point, you can test your application.