Cách đặt màu cho đoạn văn bản (Span) trong TextView Android bằng Kotlin

Giới thiệu

Bài viết này minh họa cách đặt màu cho các đoạn văn bản cụ thể (span) trong TextView trên Android sử dụng Kotlin và SpannableString.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền đầy đủ thông tin để tạo dự án mới.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://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:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Tutorials Point"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="32sp"
        android:textStyle="bold" />

    <TextView
        android:textAlignment="center"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="24sp"
        android:textStyle="bold|italic" />
</RelativeLayout>

Bước 3: Viết logic xử lý (src/MainActivity.kt)

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

class MainActivity : AppCompatActivity() {
    lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        textView = findViewById(R.id.textView)
        val text = "I appreciate the prayer but I've already got God on my side"
        val spannableString = SpannableString(text)
        
        val foregroundColorSpanCyan = ForegroundColorSpan(Color.MAGENTA)
        val foregroundColorSpanBlue = ForegroundColorSpan(Color.RED)
        val foregroundColorSpanGreen = ForegroundColorSpan(Color.GREEN)
        
        spannableString.setSpan(foregroundColorSpanCyan, 3, 15, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        spannableString.setSpan(foregroundColorSpanBlue, 22, 31, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        spannableString.setSpan(foregroundColorSpanGreen, 38, 49, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
        
        textView.text = spannableString
    }
}

Bước 4: Cấu hình Manifest (androidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị Android thực với máy tính. Trong Android Studio, mở file activity và nhấn biểu tượng Run trên thanh công cụ. Chọn thiết bị di động của bạn và kiểm tra màn hình hiển thị.

Giải thích: SpannableString cho phép áp dụng style cho đoạn văn bản. ForegroundColorSpan thay đổi màu chữ. Tham số start/end index xác định vị trí. SPAN_EXCLUSIVE_EXCLUSIVE không mở rộng khi thêm text.