Different Ways to Use Font Awesome Icons in Android

Icons are symbols that make it easy to understand the User interface for a naive user. There are many icons are available in Material UI by Google UI. But still few icons are not available in the material icons library. FontAwesome is an amazing platform, which provides useful icons which are used in many web and mobile app. Officially there is no FontAwesome library available for android, But hopefully, there is a really good community whose contribution helps the developers. So in this article, we are going to discuss two different approaches. 

Approach 1

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. 

Step 2: Add dependencies to the build.gradle(Module:app) file

Add the following dependency to the build.gradle(Module:app) file.

dependencies {

   // font awesome library

   implementation ‘info.androidhive:fontawesome:0.0.5’

}

Step 3: Working with the activity_main.xml file

Then go to your XML file where you want to put the font awesome icon. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:background="#fff"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="ICON 1"
            android:textSize="12sp"
            android:textStyle="bold" />

        <info.androidhive.fontawesome.FontTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fa_user_alt_slash_solid"
            android:textColor="#f88"
            android:textSize="25sp"
            app:solid_icon="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="ICON 2"
            android:textSize="12sp"
            android:textStyle="bold" />

        <info.androidhive.fontawesome.FontTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/fa_lock_solid"
            android:textColor="#ff8"
            android:textSize="25sp"
            app:solid_icon="true" />

    </LinearLayout>

</LinearLayout>

In the text property, we just put the string value of the icon. that value you can get from font awesome. Here is the link, just follow that link you will get the value.

Output UI:

Just run your app. Voilà now you can see your icon on your screen.

Approach 2

This approach is basically what we are doing from scratch here no need for any third-party plugin implementation.

Step 1:

• Download the font awesome otf file by following this link.
• After downloaded unzip it > go to otf folder > choose any file
• Rename the file with all lowercase letters

Step 2:

Create a resource directory,

• In your project folder > the main folder> right-click > select Android Resource Directory
• from resource values > select font 
• after that, you can see a folder like this

• Now just copy-paste the fontawsome.otf file in that directory.

Note: We have renamed the fontawesome file as font_awesome.otf (do not use capital letters while renaming the file)

Step 3:

• To use the icon use the string value represent in font-awesome. You can get them from this link.
• use the following code in your desire XML file

XML

<TextView
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:fontFamily="@font/font_awesome"
  android:text="\uf004"
  android:textSize="150sp" />

Just look at the text property and the font-family property in <TextView>. The text value is the string value of the icon and the font family is our font awesome file which is in the font resource folder. 

Now that’s it, you can see icons on your screen. This approach may take some amount of memory, so maybe your app size will be a little bit increase if you are concern about app size then do not use it use the first approach. If you stuck at any point feel free to check the github account.