Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Sử dụng Font Awesome trong ứng dụng Android Native

Giới thiệu

Ví dụ này hướng dẫn cách sử dụng icon Font Awesome trong ứng dụng Android native bằng cách nhúng file font .ttf vào thư mục assets và áp dụng qua Typeface.

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

Tạo project Android Studio: File → New Project.

Bước 2: Layout (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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="FontAwesome"
        android:textSize="48sp"
        android:textStyle="bold" />

</RelativeLayout>

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

  1. Tải file FontAwesome.ttf (hoặc fa-solid-900.ttf cho Font Awesome 5/6) từ fontawesome.com.
  2. Trong Android Studio: chuột phải app → New → Folder → Assets Folder.
  3. Copy file .ttf vào thư mục src/main/assets.

Bước 4: MainActivity - Áp dụng Typeface

Sử dụng Typeface.createFromAsset() để load font và set cho TextView. Text hiển thị phải là ký tự Unicode tương ứng của icon (ví dụ: \uf015 cho home).

package app.com.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView textView = findViewById(R.id.textView);
        Typeface font = Typeface.createFromAsset(getAssets(), "FontAwesome.ttf");
        textView.setTypeface(font);
        // Để hiển thị icon cụ thể, set text = ký tự Unicode, ví dụ:
        // textView.setText("\uf015"); // icon home
    }
}

Bước 5: Manifest

<?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

Chạy app, TextView sẽ hiển thị chữ "FontAwesome" nhưng được render bằng font Font Awesome (sẽ hiện các ký tự đặc biệt nếu font không khớp).

Cách dùng thực tế: Tạo class helper

public class FontAwesomeHelper {
    public static final String ICON_HOME = "\uf015";
    public static final String ICON_USER = "\uf007";
    public static final String ICON_SETTINGS = "\uf013";
    // ... thêm các icon khác từ cheatsheet Font Awesome

    public static void applyFont(TextView textView, Context context) {
        Typeface font = Typeface.createFromAsset(context.getAssets(), "FontAwesome.ttf");
        textView.setTypeface(font);
    }
}

// Sử dụng:
FontAwesomeHelper.applyFont(textView, this);
textView.setText(FontAwesomeHelper.ICON_HOME + " Trang chủ");

Lưu ý

  • Font Awesome 5/6 tách thành các style: Solid (fa-solid-900.ttf), Regular (fa-regular-400.ttf), Brands (fa-brands-400.ttf). Cần chọn đúng file.
  • Ký tự Unicode tra cứu tại Font Awesome Cheatsheet.
  • Hiện nay khuyến nghị dùng VectorDrawable (.xml) hoặc Material Icons thay vì font TTF cho performance và độ nét tốt hơn.