Kotlin Android TextView Tutorial

Kotlin Android TextView Tutorial

Android TextView is an user interface element that helps to display text in an activity.

Let’s Begin

Open Android Studio and create a new project named TextViewExample, using Empty Activity template. Once built, Run the app.

“Hello World!” being displayed at the center of the Activity is a TextView.

Open activity_main.xml (layout for the MainActivity.kt) file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>

The xml code snippet to display a text view is highlighted above.

TextView has many properties which determine how it is displayed in the Activity. In the above TextView, following properties are provided.

  • layout_width : wrap_content – Width of TextView is wrapped to width of the content
  • layout_height : wrap_content – Height of TextView is wrapped to height of the content
  • text : “Hello World!” – is the text that should be displayed in the Activity for TextView

You can explore other properties of TextView by opening activity_layout.xml file in Design mode. Click on View all attributes as shown below :

You can scroll down and find all the properties that are supported for TextView.

Create a new TextView programmatically

Here’s a quick snippet of code to create a new TextView programmatically in Kotlin Android

val tv_dynamic = TextView(this)
tv_dynamic.textSize = 20f
tv_dynamic.text = "This is a dynamic TextView generated programmatically in Kotlin"

Creating a new TextView programmatically at a point in the program requires it to be in UI thread. And also we need the application context to create any new View. Android prevents any View to be created outside the UI thread by throwing a build error.

Update our existing activity_main.xml by adding a LinearLayout and update the TextView with the text “This is a textview generated from xml”.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.tutorialkart.myapplication.MainActivity">
    <LinearLayout
        android:id="@+id/ll_main_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:padding="20sp"
            android:text="This is a textview generated from xml"/>
 
    </LinearLayout>
 
</android.support.constraint.ConstraintLayout>

Go to MainActivity.kt and add a new TextView with the text “This is a dynamic TextView generated programmatically in Kotlin” and add it to the LinearLayout. This addition makes the dynamically created TextView to be appended at the end of all child views present in the LinearLayout.

package com.tutorialkart.textviewexample
 
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // creating TextView programmatically
        val tv_dynamic = TextView(this)
        tv_dynamic.textSize = 20f
        tv_dynamic.text = "This is a dynamic TextView generated programmatically in Kotlin"
 
        // add TextView to LinearLayout
        ll_main_layout.addView(tv_dynamic)
    }
}

Following is the Output with layout bounds:

How to set OnClickListener for TextView

In Android, TextView is a child class of View, and hence can use the method setOnClickListener() on the object of TextView. Following is quick look into code to set OnClickListener for TextView in Kotlin:

// get reference to textview
val tv_click_me = findViewById(R.id.tv_click_me) as TextView
// set on-click listener
tv_click_me.setOnClickListener {
    // your code to run when the user clicks on the TextView
}

In this section, we shall look into the layout xml file and Activity(Kotlin file) to set OnClickListener for a TextView. Update our activity_main.xml and MainActivity.kt with the following code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.tutorialkart.myapplication.MainActivity">
    <LinearLayout
        android:id="@+id/ll_main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_click_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="50dp"
            android:text="Click Me"/>
    </LinearLayout>
 
</android.support.constraint.ConstraintLayout>
package com.tutorialkart.myapplication
 
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // get reference to textview
        val tv_click_me = findViewById(R.id.tv_click_me) as TextView
        // set on-click listener
        tv_click_me.setOnClickListener {
            // your code to perform when the user clicks on the TextView
            Toast.makeText(this@MainActivity, "You clicked on TextView 'Click Me'.", Toast.LENGTH_SHORT).show()
        }
    }
}

Following are the screenshots to demonstrate the setOnClickListener for TextView :

MainActivity with TextView “Click Me”

Conclusion

We hope you enjoyed this tutorial. See you next time!

Leave a Reply

Your email address will not be published. Required fields are marked *