Cách sử dụng Font Awesome trong ứng dụng Android Native bằng Kotlin

Giới thiệu

Ví dụ minh họa cách sử dụng font tùy chỉnh (ví dụ: Font Awesome hoặc font .ttf bất kỳ) cho TextView trong Android Native bằng Kotlin. Font file đặt trong thư mục assets.

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

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

Android Studio > File > New Project.

Bước 2: 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:id="@+id/relativeLayout"
    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:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Have a nice day"
        android:textColor="@android:color/holo_purple"
        android:textSize="36sp"
        android:textStyle="bold" />

</RelativeLayout>

Bước 3: Thêm font vào assets

1. Chuẩn bị file font .ttf (ví dụ: fontawesome-webfont.ttf hoặc VeganStylePersonalUse-5Y58.ttf như ví dụ).
2. Trong Android Studio: chuột phải vào thư mục main > New > Folder > Assets Folder > Finish.
3. Copy file .ttf vào thư mục src/main/assets.

Bước 4: MainActivity.kt - Áp dụng font

import android.graphics.Typeface
import android.os.Bundle
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)
        title = "KotlinApp"

        val textView: TextView = findViewById(R.id.textView)
        // Tạo Typeface từ asset
        val font = Typeface.createFromAsset(assets, "VeganStylePersonalUse-5Y58.ttf")
        textView.typeface = font
    }
}

Bước 5: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.customfont">

    <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

Chạy app, TextView "Have a nice day" sẽ hiển thị với font tùy chỉnh đã tải từ assets.

Cách hiện đại: Font Resources (API 26+ / Android 8.0+)

Thay vì dùng assets + Typeface.createFromAsset, Android 8.0 hỗ trợ font như resource:

1. Tạo thư mục res/font (New > Android Resource Directory > font).
2. Đặt file .ttf hoặc .otf vào đó (tên file chỉ chữ thường, số, gạch dưới).
3. Sử dụng trong XML: android:fontFamily="@font/ten_font".
4. Hoặc trong code: val typeface = ResourcesCompat.getFont(context, R.font.ten_font).

Ưu điểm Font Resource

• Hỗ trợ XML layout trực tiếp, không cần code Java/Kotlin.
• Tự động tối ưu hóa, nén font.
• Hỗ trợ Variable Fonts.
• Font downloading (tải font từ Google Fonts khi cần).

Sử dụng Font Awesome thực sự

Font Awesome cung cấp font .ttf với các icon dưới dạng ký tự Unicode. Cách dùng:

1. Tải fontawesome-free--desktop.zip, lấy file fa-solid-900.ttf (hoặc regular, brands).
2. Đặt vào assets hoặc res/font.
3. Trong strings.xml hoặc code, dùng ký tự Unicode tương ứng (xem cheatsheet Font Awesome). Ví dụ: "\uf015" là icon home.
4. Áp dụng Typeface cho TextView, setText bằng chuỗi Unicode.

// Code
val faFont = Typeface.createFromAsset(assets, "fa-solid-900.ttf")
textView.typeface = faFont
textView.text = "\uf015  Home" // Icon nhà + chữ Home