Font Awesome : A better way to display symbols and icons in Android

The day i saw Font Awesome, i immediately switched to it and using it still. It is exactly what i was looking for to replace my symbols, icons and static images in app to something which is more flexible and easy to use and light weight.

It is Typeface Font File which contains icons which are vector images. Each icon has a unique code and by using the respective code, we can display the icons in our app. These icons can be scaled just like a text in a TextView. Their color can be changed. They do not take much space and they render fast.

I would recommend all the developers to start using it today.

Now let’s take a look on how can we use it in our code.

Step 1: Go to http://fontawesome.io/ and download the cheatsheet.

Step 2 : Unzip the package and copy the OpenType Font File.

Step 3: Create a ‘assests’ folder in src -> main of your Android Studio project and add the font file inside it.

Step 4 : Create a class ‘IconTextView’ as

public class IconTextView extends TextView {

    private Context context;

    public IconTextView(Context context) {
        super(context);
        this.context = context;
        createView();
    }

    public IconTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        createView();
    }

  private void createView(){
   setGravity(Gravity.CENTER);
   setTypeface(FontTypeface.get("FontAwesome.otf", context));
  }
}

Step 5 : In xml, use it just like a TextView

<com.aqua.demoproject.ui.views.font.IconTextView
    android:id="@+id/icon_show_password"
    android:layout_width="50dp"
    android:layout_height="match_parent"
    android:textColor="@color/silver"
    android:textSize="@dimen/text_size_medium"
    android:text="@string/icon_eye" />

Step 6 : Whichever icon you need, copy their code from the cheatsheet and and paste inside the image_code.xml as

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="icon_email">&#xf0e0;</string>
    <string name="icon_password">&#xf084;</string>
    <string name="icon_user">&#xf2bd;</string>
    <string name="icon_lock">&#xf023;</string>
    <string name="icon_checkbox_checked">&#xf046;</string>
    <string name="icon_eye">&#xf06e;</string>
    <string name="icon_eye_closed">&#xf070;</string>
</resources>

Location of image_codes.xml would be as shown

src -> main -> res -> values -> image_codes.xml

That’s it. Run your application and you’ll find the icons displayed as per your need.

I think it is good replacement of the basic icons/symbols and even images we use in our apps. You can also create a custom ttf files with your own icons and codes. Ask the designer :D

Hope it’ll help you develop better and faster.

Cheers :)