Use Font Awesome Glyph Icons With Android

Creating clean looking user interfaces in Android can often be challenging. With all the screen resolutions and screen densities that exist for Android, a lot more must be taken into consideration than iOS apps.

A nifty trick I figured out is being able to use font glyphs instead of PNG or JPEG images. When using standard images you must create an image for every density (xxhdpi, xhdpi, hdpi, mdpi) and even then it still might not look clear. When using font glyphs, the images will always look crisp because they are vector graphics.

For this example, I’m going to use Font Awesome because it is open source and there are more than 400 glyphs included.

Let’s start by creating an Android project from the command line:

android create project --target 14 --name ExampleProject --path ./MyExampleProject --activity ExampleProjectActivity --package com.nraboy.examplefonts

To use Font Awesome in your Android project, start by downloading the font package and including the TTF file in your project’s assets directory. For keeping things clean, I am going to include the TTF file like the following:

assets/fonts/fontawesome.ttf

Navigate to your main.xml layout file in the res/layout directory and make sure your layout looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sample"
        android:textColor="#FFFFFF"
        android:textSize="28sp"
        android:text="This will be changed in code" />
</LinearLayout>

Basically, all I changed in the layout was add an id and change the text size.

Next we need to edit the Activity that was created. If you created your project following what I did, then edit src/com/nraboy/examplefonts/ExampleProjectActivity.java with the following code:

package com.nraboy.examplefonts;

import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.content.*;
import android.graphics.*;

public class ExampleProjectActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Typeface fontFamily = Typeface.createFromAsset(getAssets(), "fonts/fontawesome.ttf");
        TextView sampleText = (TextView) findViewById(R.id.sample);
        sampleText.setTypeface(fontFamily);
        sampleText.setText("\uF0C0");
    }

}

In the above code we are setting the type face to use Font Awesome and then we are replacing the text in our TextView with a glyph. It is important to use the unicode value that can be found in any of the glyphs on the Font Awesome website. In this example I used the fa-users glyph icon.

You’ll notice that when we use glyph icons with Android we can set the text size to anything and it will still look crystal clear.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.