Kotlin Android TextView and EditText

Android TextView is a user interface which displays the text to the user.

A simple XML code of TextView in a layout is shown below.

<TextView
        android:id="@+id/text_view_id"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="hello" />

We can get and modify the content of text view defined in the XML layout in Kotlin class file as:

val textView = findViewById<TextView>(R.id.text_view_id)
textView.setText("string").toString()
val textViewValue = textView.text

The EditText is a user interface which is used for entering and changing the text. While using edit text in XML layout, we must specify its inputType attribute which configures the keyboard according to input type mention.

The simple XML code of EditText in a layout is shown below.

    <EditText
        android:id="@+id/editText_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="" />

We can get and modify the content of edit text defined in the XML layout in Kotlin class file as:

val editText = findViewById<EditText>(R.id.editText_id) 
val editTextValue = editText.text

Kotlin Android TextView and ExitText Example

In this example, we input the text value in ExitText and display its value in the TextView on clicking the Button.

We are also watching the changes made over EditText using addTextChangedListener () method and TextWatcher interface.

activity_main.xml

In the activity_main.xml file add the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="example.javatpoint.com.kotlintextviewedittext.MainActivity">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="TextView and EditText"
        android:gravity="center"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="90dp"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:textSize="16sp"
        android:text="Provide Input" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:textSize="16sp"
        android:text="Display Output" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText"
        android:layout_alignStart="@+id/editText"
        android:layout_alignTop="@+id/textView3"
        android:textSize="16sp"
        android:text="TextView" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="112dp"
        android:text="Click Button" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_centerVertical="true"
        android:text="reset output text" />
</RelativeLayout>

MainActivity.kt

Add the following code in MainActivity.kt class. In this class, we are getting the value of the edit text and display it in text view by clicking the button. At the same time, we are also watching the changes made over EditText using addTextChangedListener () method and TextWatcher interface. To learn more about TextWatcher refers to https://www.javatpoint.com/android-edittext-with-textwatcher

package example.javatpoint.com.kotlintextviewedittext

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.view.View
import android.widget.TextView
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        button.setOnClickListener(){
            val inputValue: String = editText.text.toString()
            if (inputValue == null || inputValue.trim()==""){
                Toast.makeText(this,"please input data, edit text cannot be blank",Toast.LENGTH_LONG).show()
            }else{
                textView4.setText(inputValue).toString()
            }
        }
        textView5.setOnClickListener(){
            if (textView4.text.toString() == null || textView4.text.toString().trim()==""){
                Toast.makeText(this,"clicked on reset textView,\n output textView already reset",Toast.LENGTH_LONG).show()
            }else{
                textView4.setText("").toString()
            }
        }
        editText.addTextChangedListener(object: TextWatcher{
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
              //  TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
                Toast.makeText(applicationContext,"executed before making any change over EditText",Toast.LENGTH_SHORT).show()
            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
              //  TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
                Toast.makeText(applicationContext,"executed while making any change over EditText",Toast.LENGTH_SHORT).show()
            }
            override fun afterTextChanged(p0: Editable?) {
              //  TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
                Toast.makeText(applicationContext,"executed after change made over EditText",Toast.LENGTH_SHORT).show()
            }
        })
    }
}

Output: