Using external fonts in Android

Hi readers,
Sometimes, we would like to use more beautiful fonts for TextView, so it's displayed like Word Art in MS Word! In these cases, external fonts must be used.

Start eclipse and making a new android project. In this post, I will:
-  Guide you the way to import and use external fonts.
- Make part of TextView displayed as these new fonts.

First, create a folder named fonts under assets folder and put all your fonts in it (click in for full size):

Declaring layout in activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="20dp"
    tools:context="com.blogspot.hongthaiit.fontsusingexample.MainActivity" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/text2"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        android:textSize="@dimen/text_size" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        android:textSize="@dimen/text_size" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text2"
        android:layout_centerVertical="true"
        android:text="@string/hello_world"
        android:textSize="@dimen/text_size" />
    
    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text3"
        android:layout_centerVertical="true"
        android:text="@string/default_font"
        android:textSize="@dimen/text_size" />

</RelativeLayout>

To change the Typeface family of the text, we must use TypefaceSpan. Customize an own TypefaceSpan like this:

MyTypefaceSpan.java

public class MyTypefaceSpan extends TypefaceSpan {
    private final Typeface newType;

    public MyTypefaceSpan(String family, Typeface type) {
 super(family);
 newType = type;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
 applyCustomTypeFace(ds, newType);
    }

    @Override
    public void updateMeasureState(TextPaint paint) {
 applyCustomTypeFace(paint, newType);
    }

    private static void applyCustomTypeFace(Paint paint, Typeface tf) {
 int oldStyle;
 Typeface old = paint.getTypeface();
 if (old == null) {
     oldStyle = 0;
 } else {
     oldStyle = old.getStyle();
 }

 int fake = oldStyle & ~tf.getStyle();
 if ((fake & Typeface.BOLD) != 0) {
     paint.setFakeBoldText(true);
 }

 if ((fake & Typeface.ITALIC) != 0) {
     paint.setTextSkewX(-0.25f);
 }

 paint.setTypeface(tf);
    }
}

In MainActivity, there are two tasks must be done:
- Create custom TypefaceSpan based on fonts in createCustomTypefaceSpan() method.
- Make part of TextView using new fonts in setTextFont() method.
Full MainActivity.java code:

public class MainActivity extends Activity {

    private Typeface liberationSerifTf;
    private Typeface tinosTf;
    private Typeface timesOldAtticTf;

    private MyTypefaceSpan librerationSpan;
    private MyTypefaceSpan tinosSpan;
    private MyTypefaceSpan timeOldAtticSpan;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 // Declare Fonts path
 String fontLiberationSerifPath = "fonts/LiberationSerif-BoldItalic.ttf";
 String fontTinosPath = "fonts/Tinos-Bold.ttf";
 String fontTimesOldAtticPath = "fonts/Times Old Attic.TTF";

 // Defining textviews label from xml
 TextView text1 = (TextView) findViewById(R.id.text1);
 TextView text2 = (TextView) findViewById(R.id.text2);
 TextView text3 = (TextView) findViewById(R.id.text3);

 // Loading Font Face
 liberationSerifTf = Typeface.createFromAsset(getAssets(),
  fontLiberationSerifPath);
 tinosTf = Typeface.createFromAsset(getAssets(), fontTinosPath);
 timesOldAtticTf = Typeface.createFromAsset(getAssets(),
  fontTimesOldAtticPath);

 // calling create typeface spans method
 createCustomTypefaceSpan("my typeface span");

 // Applying font for textviews
 setTextFont(text1, "This is ", " libration Serif font", librerationSpan);
 setTextFont(text2, "This is ", " tinos font", tinosSpan);
 setTextFont(text3, "This is ", " time old attic font", timeOldAtticSpan);
    }

    /**
     * Create  custom TypefaceSpans 
     * @param nameOfTypeface - name of typeface span
     */
    private void createCustomTypefaceSpan(String nameOfTypeface) {
 librerationSpan = new MyTypefaceSpan(nameOfTypeface, liberationSerifTf);
 tinosSpan = new MyTypefaceSpan(nameOfTypeface, tinosTf);
 timeOldAtticSpan = new MyTypefaceSpan(nameOfTypeface, timesOldAtticTf);
    }

    /**
     * Highlight part of textview method
     * @param textView
     * @param string1
     * @param string2 - start spanning here
     * @param span
     */
    private void setTextFont(TextView textView, String string1, String string2,
     MyTypefaceSpan span) {

 // Create a new spannable with the two strings
 Spannable spannable = new SpannableString(string1 + string2);

 // Set the custom typeface to span over a section of the spannable object
 spannable.setSpan(span, string1.length(), string1.length()
  + string2.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

 // Set the text of a textView with the spannable object
 textView.setText(spannable);
    }
}

Running android project, result like this (click at image for full size):

Author : Hong Thai

Share