Use Add Font Awesome Icons In Android Application Tutorial

How to display font awesome free icons inside app using fontawesome-webfont.ttf file in Studio from assets folder.

Font Awesome if one of the most popular world’s largest free icon providers who servers their icons online free on internet for everyone. It gives us the highly customize vector icons which can be converted into any color with one tag. It is loved by every developer who wish to use stunning icons in their projects. It gives us more than 600 icons in a single file with easily to use options. So in this tutorial we are going to learn about How can we Use Add Font Awesome Icons In Android Application Tutorial.

android-project-download-code-button

Please follow all the below steps in order to implement font awesome font file in our android studio project :

1. GoTo Font Awesome’s official website and download the fonts and css toolkit .

2. After download extract the file.

3. Now you will find multiple folder inside the extracted file, now goto fonts folder and copy the fontawesome-webfont.ttf file.

fontawesome-webfont-file

4. Open your project in Android Studio.

5. Now create assets folder inside main folder as i did in below screenshot.

assets_fonts_folder

6. Copy the fontawesome-webfont.ttf file inside this folder.

fontawesome-assets

Here we go now most of part has done , Its time to start coding.

Import Note Read Must : We have been using the UNI Code of every icon inside the string.xml file so you can add any icon using their UNI Code. All you have to do is to specify the UNI Code inside the Strings.xml file like i did . You can find all the UNI CODE LIBRARY HERE.

How to Use Add Font Awesome Icons In Android Application Tutorial.

Code for strings.xml file.

<resources>

    <string name="app_name">FontAwesome-Android-Examples.com</string>

    <string name="font_awesome_contact_icon">&#xf2b9;</string>

    <string name="fa_battery_4">&#xf240;</string>

    <string name="fa_bank">&#xf19c;</string>

    <string name="fa_birthday_cake">&#xf1fd;</string>

    <string name="fa_cab">&#xf1ba;</string>

    <string name="fa_camera">&#xf030;</string>

</resources>

Code for MainActivity.java file.

package com.android_examples.fontawesome_android_examplescom;
import android.graphics.Typeface;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Typeface typeface ;
    TextView textViewContact, textViewBattery, textViewBank, textViewBirthday, textViewCab, textViewCamera ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

        textViewContact = (TextView)findViewById(R.id.contact_us_icon);
        textViewBattery = (TextView)findViewById(R.id.fa_battery);
        textViewBank = (TextView)findViewById(R.id.fa_bank_icon);
        textViewBirthday = (TextView)findViewById(R.id.fa_birthday);
        textViewCab = (TextView)findViewById(R.id.fa_cab_icon);
        textViewCamera = (TextView)findViewById(R.id.fa_camera_icon);


        textViewContact.setTypeface(typeface);
        textViewBattery.setTypeface(typeface);
        textViewBank.setTypeface(typeface);
        textViewBirthday.setTypeface(typeface);
        textViewCab.setTypeface(typeface);
        textViewCamera.setTypeface(typeface);

    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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.android_examples.fontawesome_android_examplescom.MainActivity"
    android:orientation="vertical"
    android:background="#FFFDE7">

    <TextView
        android:text="@string/font_awesome_contact_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/contact_us_icon"
        android:textSize="45dp"
        android:textColor="#009688"
        android:layout_margin="10dp"/>

    <TextView
        android:text="@string/fa_battery_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/fa_battery"
        android:textSize="45dp"
        android:textColor="#F44336"
        android:layout_margin="10dp"/>

    <TextView
        android:text="@string/fa_bank"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/fa_bank_icon"
        android:textSize="45dp"
        android:textColor="#9C27B0"
        android:layout_margin="10dp"/>

    <TextView
        android:text="@string/fa_birthday_cake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/fa_birthday"
        android:textSize="45dp"
        android:textColor="#2196F3"
        android:layout_margin="10dp"/>

    <TextView
        android:text="@string/fa_cab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/fa_cab_icon"
        android:textSize="45dp"
        android:textColor="#FFC107"
        android:layout_margin="10dp"/>

    <TextView
        android:text="@string/fa_camera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/fa_camera_icon"
        android:textSize="45dp"
        android:textColor="#FF5722"
        android:layout_margin="10dp"/>

</LinearLayout>

Screenshot:

Use Add Font Awesome Icons In Android Application Tutorial

Click here to download Use Add Font Awesome Icons In Android Application Tutorial project with source code.

2 Comments

  1. Good tutorial bro,
    but how to add icon to menu item using font awesome icons

    Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *