Tạo nhiều kiểu chữ trong một TextView Android

Tạo nhiều kiểu chữ trong một TextView Android

Hướng dẫn này minh họa cách áp dụng nhiều kiểu định dạng (đậm, nghiêng, màu sắc, cỡ chữ) trong một TextView duy nhất.

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

Mở Android Studio, chọn File → New Project và điền đầy đủ thông tin.

Bước 2: Thiết kế giao diện (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_above="@id/textView2"
        android:layout_marginBottom="16dp"
        android:id="@+id/textView1"
        android:textSize="16dp"
        android:padding="4dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:padding="4dp"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_below="@id/textView2"
        android:layout_marginTop="16dp"
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16dp"
        android:padding="4dp"/>
</RelativeLayout>

Bước 3: Code MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    TextView textView1, textView2, textView3;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        textView1 = findViewById(R.id.textView1);
        textView2 = findViewById(R.id.textView2);
        
        // Cách 1: Sử dụng Html.fromHtml trực tiếp
        textView1.setText(Html.fromHtml("Multiple style inside android textView: bold text: " 
            + "<b>bold text</b>, italic text: <i>italic text</i>, small font: <small>small text</small>, "
            + "font color: <font color=\"blue\">Text Color</font>, "
            + "font color with bold text: <font color=\"green\"><b>Bold with font color</b></font>"));
        
        // Cách 2: Sử dụng biến Spanned
        Spanned text = Html.fromHtml("Multiple style inside android textView: bold text: "
            + "<b>bold text</b>, "
            + "italic text: <i>italic text</i>, small font: <small>small text</small>, font "
            + "color: <font color=\"blue\">Text Color</font>, "
            + "font color with bold text: <font color=\"green\"><b>Bold with font color</b></font>");
        textView2.setText(text);
        
        // Cách 3: Lấy từ strings.xml
        textView3 = findViewById(R.id.textView3);
        textView3.setText(Html.fromHtml(getString(R.string.textStyle)));
    }
}

Bước 4: Cấu hình strings.xml

Mở res/values/strings.xml và thêm:

<resources>
    <string name="app_name">Sample</string>
    <string name="textStyle">
        <![CDATA[
        Multiple style inside android textView: bold text: <b>bold text</b>, 
        italicText text: <i>italic text</i>, small font: <small>small text</small>, 
        font color: <font color="blue">Text Color</font>, 
        font color with bold text: <font color="green"><b>Bold with font color</b></font>
        ]]>
    </string>
</resources>

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <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ị, chạy app từ Android Studio. Màn hình sẽ hiển thị 3 TextView với nhiều kiểu chữ khác nhau: đậm, nghiêng, chữ nhỏ, màu xanh, xanh lá với đậm.