Cara Menggunakan Custom Font Pada Android

Harus diakui, font bawaan android memang sangat indah dilihat di layar handphone. Hal ini karena font tersebut memang dirancang untuk penggunaan mobile. Namun, ada kalanya saat kita membuat aplikasi, perlu menggunakan suatu font khusus yang spesifik untuk aplikasi tersebut. Bagaimana caranya? Akan saya tunjukkan.

Ada dua cara mengubah font pada textview agar bisa menggunakan custom font. Cara pertama dengan mengubah Typeface dari TextView melalui program seperti berikut:

TextView txtCustom = (TextView)findViewById(R.id.txtCustom);
Typeface font = Typeface.createFromAsset(getAssets(), "baroquescript.ttf");  
txtCustom.setTypeface(font);

Sangat sederhana sekali kan? Untuk font-nya, cukup letakkan di root direktori dari /assets/.

Anda pasti bertanya, apa tidak ada cara yang cukup dengan menaruh informasi typeface di layout xml? Sayangnya, tidak ada cara tersebut yang built-in. Anda harus melakukan beberapa modifikasi. Tapi jangan khawatir, saya akan bantu menjelaskan. Intinya adalah, dengan memasukkan kode di atas, kedalam suatu class baru yang meng-extend TextView. Caranya? sebagai berikut:

Yang pertama kali harus dilakukan adalah, membuat class baru yang meng-extend TextView. Pada contoh kali ini, saya menggunakan nama TextViewCustomFont.java:

package id.flwi.customview;

import id.flwi.example.cfont.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;

public class TextViewCustomFont extends TextView {

	public TextViewCustomFont(Context context) {
		super(context);
	}

	public TextViewCustomFont(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
}

Kode di atas masih belum berguna. Karena, untuk bisa menambahkan atribut baru pada layout xml, kita harus mendeklarasikan terlebih dahulu, apa saja atributnya dan bagaimana bentuk isinya. Untuk itu, kita perlu membuat file xml di direktori /res/values/. Beri nama textviewcustomfont_attribute.xml dan isikan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TextViewCustomFont">
        <attr name="typeface" format="string" />
    </declare-styleable>
</resources>

Kalau sudah, sekarang kembali ke TextViewCustomFont.java dan isikan kode berikut untuk konstruktor TextViewCustomFont(Context, AttributeSet):

	public TextViewCustomFont(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray a = getContext().obtainStyledAttributes(attrs,
				R.styleable.TextViewCustomFont);

		String fontFace = a.getString(R.styleable.TextViewCustomFont_typeface);

		Log.i("LOG", "Font Face: " + fontFace);
		Typeface font = Typeface.createFromAsset(context.getAssets(), fontFace);
		setTypeface(font);
		a.recycle();
	}

Familiar dengan kode di atas? tentu saja, karena kode tersebut, serupa dengan cara pertama, hanya ada beberapa tambahan spesifik untuk pembacaan atribut xml.

Bagian terakhir dari cara kedua ini adalah, pendeklarasian kode xml untuk layout:

<id.flwi.customview.TextViewCustomFont
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="TextView from XML layout"
	app:typeface="baroquescript.ttf"
/>

Perhatikan kode di atas, sangat mirip dengan deklarasi untuk TextView. Hanya perlu satu catatan di sini. Karena kita menggunakan namespace app, maka perlu jug dideklarasikan, dari mana namespace ini diperoleh. Caranya, dengan menambahkan kode berikut ke deklarasi parent layout (biasanya di LinearLayout):

xmlns:app="http://schemas.android.com/apk/res-auto"

Sehingga parent layout menjadi seperti berikut:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
>

Berikut hasil dari kode-kode di atas:

Free Image Hosting at www.ImageShack.us

Seperti biasa, silahkan download source kode di sini:


Note: Font pada contoh ini menggunakan Baroque Script.

Author: Arief Bayu Purwanto

Hello, my name is Arief Bayu Purwanto, a 24 years old father of a beautiful daughter. Interested in online programming, linux, games, and reading. Currently working on kapanlagi.com as junior developer. I live in a relatively quite and cool place called Malang. I'm available for some freelance stuff as well as some consulting job. You can see my portofolio for some previous task I've finished and some other information related to my capability. Btw, I'm plurking here.

  • Marti

    Hi

    Thanks, it’s very useful.

    You can tell some day how change font of chronometer numbers. How do it? The same method not work this time.

  • Marti

    Sorry My fail. This works nicely with all kinds of controls.