Using Android with Font Awesome Example

In my android tips section, I usually write about common issues beginners android developers face and the solution to it. Today we are going to learn how to use font awesome in android app.

There are situations where we might need to use icon fonts in our app, the best option is to include font awesome and use one or as many icons as we might want to.

You can read more about Font Awesome here. The below image is some of the font icons present in the Font Awesome library.

android font awesome

If you are interested to use a custom font in your android, I wrote a simple android tutorial on using custom font in android that will get you going. You can find the tutorial on How to use custom fonts in android app.

Before we dive into more details, it is important for us to understand what we are planning to achieve. Below is the screen-shot of the application we will be creating.

font awesome android

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidFontAwesome

Package: com.inducesmile.androidfontawesome

Select Blank Activity

Name your activity : MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Strings.xml

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<string name="app_name">Android Font Awesome</string>
<resources>  
     <string name="app_name">Android Font Awesome</string>  
    <string name="icon_heart">&#xf004;</string> 
</resources>

Colors.xml

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Go to the app folder if you are using Android Studio, we are going to add a new folder called assets. Right click on the app folder and select create new folder, name the folder assets.

We will move to Font awesome website with the link I mentioned above to download the font package. Unzip the zip file and add the main font folder to the assets folder we just created.

activity_main.xml

In other to test if the font awesome is working in our android application, we are going to use a Button view to test it.

In the main layout, we will add a Button View widget. Open the main layout file and add the code below to the 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: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="com.inducesmile.androidfontawesome.MainActivity">
    <Button
        android:id="@+id/awesome_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:textSize="40sp"
        android:padding="24dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"/>
</RelativeLayout>

MainActivity.java

In the MainActivity class, we are going to obtain the instance of the Button view control. Thereafter, we will load the external font awesome in our project using the createFromAssets() method of the Typeface class.

Open the MainActivity class and add the code below to the class.

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome/fonts/fontawesome-webfont.ttf" );
        Button awesomeButton = (Button)findViewById(R.id.awesome_button);
        awesomeButton.setTypeface(font);
        awesomeButton.setText(getString(R.string.icon_heart));
    }
}

From the MainActivity class, you can see that the setText() method of the Button class takes in a string parameter which represents a heart in the font awesome library.

You can add as much icon fonts as you want. You can also increase the size of the icon by setting the text size in the View.

This brings us to the end of this tutorial. I hope that you have learn something. Run your app to see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new android blog post once it is published.

Please if you love this tutorial, kindly download my android app – Complete Mathematics – in Google Play Store and let me know what you think about it.

OTHER INTERESTING POSTS:

Add a Comment