Cách tạo Subscript và Superscript cho String trên Android bằng Kotlin

Giới thiệu

Bài viết này hướng dẫn cách định dạng chuỗi ký tự với chữ chỉ dưới (subscript) và chữ chỉ trên (superscript) trên Android sử dụng SpannableStringBuilder và các Span của Kotlin.

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

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

Tạo project: File → New Project.

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"
    android:padding="8dp"
    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:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:fontFamily="sans-serif-condensed"
        android:textAlignment="center"
        android:textColor="@android:color/background_dark"
        android:textSize="36sp"
        android:textStyle="bold" />

</RelativeLayout>

Bước 3: Xử lý logic (src/MainActivity.kt)

import android.os.Bundle
import android.text.SpannableStringBuilder
import android.text.Spanned
import android.text.style.RelativeSizeSpan
import android.text.style.SubscriptSpan
import android.text.style.SuperscriptSpan
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var textView: TextView
    private lateinit var spannableStringBuilder: SpannableStringBuilder
    private var strText = ""

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

        textView = findViewById(R.id.textView)

        strText = "Test text to show SubscriptSpan X2 and SuperscriptSpan Y5 example."
        spannableStringBuilder = SpannableStringBuilder(strText)

        // Subscript cho số 2
        val subscriptSpan = SubscriptSpan()
        val index2 = strText.indexOf("2")
        spannableStringBuilder.setSpan(
            subscriptSpan,
            index2,
            index2 + "2".length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )

        // Superscript cho số 5
        val superscriptSpan = SuperscriptSpan()
        val index5 = strText.indexOf("5")
        spannableStringBuilder.setSpan(
            superscriptSpan,
            index5,
            index5 + "5".length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )

        // Thu nhỏ kích thước chữ cho cả 2
        showSmallSizeText("2")
        showSmallSizeText("5")

        textView.text = spannableStringBuilder
    }

    private fun showSmallSizeText(target: String) {
        val relativeSizeSpan = RelativeSizeSpan(0.5f) // 50% kích thước gốc
        val index = strText.indexOf(target)
        spannableStringBuilder.setSpan(
            relativeSizeSpan,
            index,
            index + target.length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
    }
}

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ị, nhấn Run. TextView sẽ hiển thị: "Test text to show SubscriptSpan X₂ and SuperscriptSpan Y⁵ example." với số 2 và 5 được định dạng nhỏ hơn và vị trí sub/super.

Các Span phổ biến khác

Extension function tiện lợi

fun String.subscript(): SpannableStringBuilder = SpannableStringBuilder(this).apply {
    setSpan(SubscriptSpan(), 0, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}

fun String.superscript(): SpannableStringBuilder = SpannableStringBuilder(this).apply {
    setSpan(SuperscriptSpan(), 0, length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}

// Sử dụng:
val formatted = "H".toSpannable() + "2".subscript() + "O"
textView.text = formatted