How To Use the Font Awesome Icon Pack in an Android

Font Awesome_Android_2

In this tutorial, I will show you how to use the Font Awesome icon pack in an Android project. Font Awesome is a great timesaver for several reasons.

First, you don’t have to worry about different screen densities on different smartphones. If you want to use PNG files, you have to include in your package at least four different versions of every icon. Not only that, on some ultra-dense HD displays, your icons might look grainy. This is something you certainly want to avoid. With Font Awesome, however, you just have to include a single TTF file.

#1

Steps to use Font Awesome in Android

1) Create a new project

New-project

2) Create String resources in res/values/string.xml

<resources>

<string name="app_name">AwesomeFont</string>

<string name="fa_icon_areachart"><span>&</span>#xf1fe;</string>
<string name="fa_icon_piechart"></string>

<string name="fa_icon_linechart"></string>

</resources>

3) Now Create layout like below in activity_main.xml like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.nimblechapps.awesomefont.MainActivity">

    <TextView
        android:id="@+id/tvIcon1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_linechart"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tvIcon2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_areachart"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tvIcon3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/fa_icon_piechart"

        android:textSize="20sp" />

</LinearLayout>

#2

How to Import Font Awesome in Android

You need Download and import the FontAwesome TrueType file into your project. You can download the FontAwesome assets from here — http://fontawesome.io/

When you download FontAwesome, you end up with an archive that includes a number of files and folders. Most of these are useful for web projects. We are only interested in fontawesome-webfont.ttf, which is located in the fonts folder.

1) Create assets folder and subdirectory fonts and add fontawesome-webfont.ttf to this folder

Create-assets

In your Android project, navigate to app > src > main. The main directory should include a folder named assets. If there isn’t one, then create it. In the assets directory, create another folder, fonts, and add fontawesome-webfont.ttf to this folder.

2) Create a helper class

Now that you’ve successfully included the FontAwesome font file in your Android project, it’s time to use it. We will be creating a helper class to make this easier. The class we are going to use is android.graphics.Typeface. The Typeface class specifies the typeface and intrinsic style of a font. This is used to specify how text appears when drawn (and measured).

Let’s start by creating the helper class. Create a new Java class and name it FontManager:

public class FontManager {
    public static final String ROOT = "fonts/",
    FONTAWESOME = ROOT + "fontawesome-webfont.ttf";   
    public static Typeface getTypeface(Context context, String font) {
        return Typeface.createFromAsset(context.getAssets(), font);
    }    
}

3) Now use font awesome to your textview using below code

Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
tvIcon1 = (TextView) findViewById(R.id.tvIcon1);

tvIcon2 = (TextView) findViewById(R.id.tvIcon2);

tvIcon3 = (TextView) findViewById(R.id.tvIcon3);
tvIcon1.setTypeface(iconFont);
tvIcon2.setTypeface(iconFont);
tvIcon3.setTypeface(iconFont);

#3

Conclusion

In this quick tip, I showed you how to use the FontAwesome icon set in an Android project. FontAwesome is widely known, very rich, and free. The result is sharp and crisp icons, even on high resolution displays. As an added bonus, changing an icon’s size or color is as simple as changing an XML attribute.

You can check this topic in iOS : Font Awesome for iOS

You can find the complete code here:

Nilesh Rathod
Nilesh is a mobile application developer. Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers is always interesting part for him. He just loves to help, share and learn knowledge through leading platforms like StackOverflow.