In this tutorial, I will show you how to use the FontAwesome icon pack in an Android project. FontAwesome 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 FontAwesome, however, you just have to include a single TTF file.
Second, you can rely on one of the most rich and complete icon sets available for free. By now, users are accustomed to the style of FontAwesome, because it's widely used on the web. You don't have to waste time looking for a set of icons that is beautiful, comprehensive, and free for commercial use. I'm not saying that these sets don't exist, because they they do, but they are quite rare.
1. How FontAwesome Works
Let's take a moment to understand how FontAwesome works. The idea behind the FontAwesome icon pack is simple, icons are treated as characters. You may have noticed that some exotic characters are treated as text. For example, you can easily copy and paste this β character or this ∑ character. You can even do this in a simple text editor. It's also possible to change their size and color. That's because the browser—and the text editor—sees these characters as text.
FontAwesome expands upon this concept by including a wide range of icons. You can compare it to a dictionary that matches Unicode characters that cannot be typed—and that aren't used—with a specific icon.
Take a look at FontAwesome's cheatsheet to see what I'm talking about. You choose an icon from the list, take note of its Unicode character, and use it in a TextView, telling Android to render it using the FontAwesome font.
2. Import the Font File
Let's take a look at an example. Download and import the FontAwesome TrueType file into your project. You can download the FontAwesome assets from GitHub.
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.
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.
Note that the fonts directory is not required. You can add the FontAwesome font file in the assets directory, but it's convenient to have files of the same type in a dedicated directory. As long as the FontAwesome font file is located in the assets directory, or a subdirectory thereof, you're good to go.
3. 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);
}
}
If you want to use other typefaces in your project, it's easy to add other fonts to the helper class. The idea is similar:
yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));
This is all we need to do, but we can do better. Let's push it a little bit further. Using the above method, we need to create a variable for each TextView we want to use as an icon. That's fine. But, as programmers, we are lazy. Right?
Icons are often contained in a single ViewGroup, such as a RelativeLayout or a LinearLayout. We can write a method that climbs the tree of a given XML parent and recursively overrides the typeface of each TextView it finds.
public class FontManager {
// ...
public static void markAsIconContainer(View v, Typeface typeface) {
if (v instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) v;
for (int i = 0; i < vg.getChildCount(); i++) {
View child = vg.getChildAt(i);
markAsIconContainer(child);
}
} else if (v instanceof TextView) {
((TextView) v).setTypeface(typeface);
}
}
}
Let's assume that your layout file looks something like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/icons_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
</LinearLayout>
To mark the three TextView instances as icons, we override the onCreate method and add the following code snippet:
Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME); FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
4. Use the Icons You Want
Now comes the fun part. Visit FontAwesome's GitHub page and browse the available icons. Choose three icons you like. I'm going to pick three charts, the area chart icon, the pie chart icon, and the line chart icon.
In your project, navigate to the values folder and create a new file, icons.xml. This file will serve as a dictionary, that is, it will match the Unicode character associated with a specific icon to a human-readable name. This means that we need to create an entry for each icon. This is how it works.
<resources>
<string name="fa_icon_areachart"></string>
<string name="fa_icon_piechart"></string>
<string name="fa_icon_linechart"></string>
</resources>
You can find the code in the FontAwesome cheatsheet or on the detail page of the icon you're interested in.
The next step is to reference the string entries in the TextView instances of your layout. This is what the final result looks like:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_areachart" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_piechart" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_linechart" />
If you open the layout editor of Android Studio, you'll see that it cannot render the icons. This isn't normal. Build and launch your application. You should now see the icons correctly rendered:
)
They're small, aren't they? It's very easy to change the size of the icons. All you need to do is change the textSize attribute. Changing the color of the icon is just as easy. Edit the textColor attribute and you're done.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textSize="45sp"
android:textColor="#9b59b6"
android:text="@string/fa_icon_areachart" />
)
As you can see, the icons are sharp and crisp. That's because FontAwesome icons are rendered at runtime. They are vector instead of raster files.
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.
Comments