TextView in Android App Development with Kotlin

Understanding TextView in Android App Development with Kotlin

TextView is one of the fundamental building blocks in Android app development, allowing you to display text on the screen. It’s versatile and customizable, used to create everything from simple labels to complex text displays. In this guide, we’ll dive into how TextView works in Android development using Kotlin, covering its basic properties, practical usage, and customization options.

1. What is TextView?

A TextView in Android is a UI widget for displaying text. It is used to provide information, labels, headings, or any text-based information in your app. TextView can be styled and customized with various properties to enhance the appearance and usability of your app.

2. Adding a TextView in XML Layout

To create a TextView, add it to an XML layout file. Here’s a basic example:

<TextView
    android:id="@+id/textViewExample"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!"
    android:textSize="18sp"
    android:textColor="#000000" />

In this XML code:

android:id gives a unique ID for referencing the TextView in Kotlin code.
android:layout_width and android:layout_height set the width and height of the TextView.
android:text specifies the initial text to display.
android:textSize controls the size of the text.
android:textColor changes the color of the text.

3. Working with TextView in Kotlin

After defining a TextView in XML, you can interact with it in your Kotlin code by referencing its ID. You can modify the text, style, and other properties dynamically.

Here’s an example:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.widget.TextView

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

        // Access the TextView by ID
        val textViewExample = findViewById<TextView>(R.id.textViewExample)

        // Set new text dynamically
        textViewExample.text = "Welcome to Android Development with Kotlin!"
    }
}

4. Key Properties of TextView

The TextView widget in Android offers various properties to control its appearance and behavior:

Text Size: Customize using android:textSize in XML or textSize in Kotlin code.
Text Color: Set using android:textColor or setTextColor() in Kotlin.
Font Style: Use android:textStyle to make text bold or italic.
Text Alignment: Align text with android:gravity or android:textAlignment.
Max Lines & Ellipsis: Limit lines with android:maxLines and control overflow with android:ellipsize.

Example in XML:

<TextView
    android:id="@+id/textViewStyled"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Styled TextView"
    android:textSize="20sp"
    android:textColor="#FF5722"
    android:textStyle="bold"
    android:gravity="center"
    android:ellipsize="end"
    android:maxLines="1" />

5. Using Spans for Text Styling

Kotlin allows you to use spans to apply different styles to parts of text within a TextView. This is useful for making certain words bold, changing colors, or creating clickable sections within a single TextView.

Example with SpannableString:

import android.graphics.Color
import android.os.Bundle
import android.text.Spannable
import android.text.SpannableString
import android.text.style.ForegroundColorSpan
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

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

        val textView = findViewById<TextView>(R.id.textViewExample)
        val spannable = SpannableString("Welcome to Android Development!")

        // Apply color span to a portion of the text
        spannable.setSpan(
            ForegroundColorSpan(Color.RED),
            11, 18,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
        )

        textView.text = spannable
    }
}

This example makes the word “Android” red, while the rest of the text remains unchanged.

6. Clickable Text in TextView

To make parts of the text within a TextView clickable, you can use ClickableSpan. This is useful for creating links or clickable actions within a text.

Example with ClickableSpan:

import android.os.Bundle
import android.text.SpannableString
import android.text.Spanned
import android.text.method.LinkMovementMethod
import android.text.style.ClickableSpan
import android.view.View
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

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

        val textView = findViewById<TextView>(R.id.textViewExample)
        val spannable = SpannableString("Click here to learn more about Android development!")

        val clickableSpan = object : ClickableSpan() {
            override fun onClick(widget: View) {
                Toast.makeText(this@MainActivity, "Clicked!", Toast.LENGTH_SHORT).show()
            }
        }

        spannable.setSpan(clickableSpan, 6, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        textView.text = spannable
        textView.movementMethod = LinkMovementMethod.getInstance()
    }
}

In this code, the word “here” is clickable, and clicking it triggers a toast message.

7. Using HTML in TextView

If you want to display HTML content within a TextView, you can use HtmlCompat.fromHtml() to render HTML tags like bold, italic, and hyperlinks.

Example:

import android.os.Bundle
import android.text.Html
import androidx.appcompat.app.AppCompatActivity
import android.widget.TextView
import androidx.core.text.HtmlCompat

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

        val textView = findViewById<TextView>(R.id.textViewExample)
        val html = "<h2>Android Development</h2><p>This is a TextView with HTML content.</p>"
        textView.text = HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY)
    }
}

This code will display HTML-formatted text within a TextView.

8. Custom Fonts in TextView

You can customize the font of a TextView by adding custom fonts to your project. To use custom fonts:

Place your font file (e.g., res/font/custom_font.ttf) in the res/font folder.
Reference it in XML or Kotlin code.