Font Awesome With Android

If your app uses icons then you must be aware of the fact that Android requires you to provide icons for various densities such as HDPI, MDPI, XHDPI etc. Designing icons for these densities is an added effort. To avoid this additional effort, you can take advantage of the libraries available. One such library is Font Awesome. Font Awesome is mainly designed for Web Development because it provides CSS file to use icons. But it can also be used for Android. Let's just jump right in and download the required files.

Visit Font Awesome website and download the required files. Create a new Android Project (Refer Create Android Apps - Hello Android ) and create assets folder in a newly created Android Project and add fonts folder into this assets folder. Copy fontawesome-webfont.ttf file from the downloaded files and paste it in the assets/fonts folder of your android project (Refer below screenshot).

CheezyCode Android FontAwesome Setup

After this setup is completed we can go ahead and change our layout file and code to use the font file. This process is same as loading custom font for your TextView. If you want to load custom fonts, follow the same procedure.

Let's start with the layout file -

<?xml version="1.0" encoding="utf-8"?>
<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:background="#F1F1F1">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Icon"
            android:textSize="100sp"
            android:textColor="#FF4F56"
            android:layout_marginRight="10dp"
            android:id="@+id/txtAndroid"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="Icon"
            android:textSize="100sp"
            android:layout_marginLeft="10dp"
            android:textColor="#FF4F56"
            android:id="@+id/txtHTML" />
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CHEEZY CODE"
        android:textSize="24sp"
        android:layout_marginBottom="20dp"
        android:textColor="#FF4F56"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textStyle="bold" />
</RelativeLayout>

This layout file has 3 TextViews. One is used to display Android Icon, Second TextView is used to display HTML 5 icon and last one is CHEEZY CODE :)

Let's update the code. Update onCreate() with the code below -

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

        TextView txtAndroid = (TextView) findViewById(R.id.txtAndroid);
        TextView txtHTML = (TextView) findViewById(R.id.txtHTML);
        Typeface fontFamily = Typeface.createFromAsset(getAssets(), "fonts/fontawesome-webfont.ttf");

        txtAndroid.setText("\uf17b"); //THIS IS FOR ANDROID
        txtAndroid.setTypeface(fontFamily);
        txtHTML.setText("\uf13b"); //THIS IS FOR HTML5
        txtHTML.setTypeface(fontFamily);
    }

Once you update the onCreate() and run the app, you will have the icons displayed as shown above. So what is going on in this method -

1. First it finds the textview using findViewById()
2. After that it loads the font file from assets folder and creates a Typeface object. This is a class used for the font style. (In our case fontFamily is the object)
3. Next we set the text and typeface(font) for our textviews.

txtAndroid.setText("\uf17b"); //THIS IS FOR ANDROID
txtAndroid.setTypeface(fontFamily);        

Q. But wait what the heck is "\uf17b" and how do i know that it represents Android icon?
Ans. - This code is Unicode character. You can set the text for textview using unicode characters. To find which icon represent what you need to open the css file (font-awesome.css) that comes along with font awesome folder.

Once you open the file, search for android, you will have something like -

.fa-android:before {
  content: "\f17b";
}

Just add the "u" in the content, so this will become "\uf17b". Now if you use this text for your textview and set the typeface as font awesome - it will display Android. Same applies to other icons. For instance, HTML5 symbol can be found by searching HTML5. (Refer screenshot below)

Cheezycode - Android and Font Awesome

This is all about Font Awesome with Android. You can refer the source code below.

Let us know if you have any query. Happy reading.

Source Code