Custom fonts in Android

Custom fonts in Android

Jan 31, 2013
android

Using custom fonts in Android is quite simple, but requires to do some things programmatically and cannot be done using only XML file defining the view. Let’s have a look on an example. Here we have a simple Android view file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
      <TextView
      android:id="@+id/custom_font"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="This is our custom font" />
</LinearLayout>

We want to use custom font for the TextView element with id: custom_font. Firstly, we have to put our font (in this example: Custom_Font.ttf) into the ./assets directory (create it if it doesn’t exist yet) in the main directory of the project. Then, we can use the following code:

TextView txt = (TextView) findViewById(R.id.custom_font);
Typeface font = Typeface.createFromAsset(getAssets(), "Custom_Font.ttf");
txt.setTypeface(font);

Please note, that Android does not fully support fonts in *.otf format, so it’s safer to use *.ttf format instead. If we have font only in *.otf format, we can use one of the free font converters in order to obtain desired and proper file extension. When we use the same font in whole application or a lot of elements in our project should use it, we can create custom TextView. The only thing, we have to do, is to create an additional class extending default TextView class.

public class MyEditText extends EditText{

    public MyEditView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyEditView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyEditView(Context context) {
        super(context);
        init();
    }

    private void init() {
        if (!isInEditMode()) {
            Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "font.ttf");
            setTypeface(tf);
        }
    }

}

Note: isInEditMode() method is used for graphical preview of the UI in Eclipse IDE. Afterwards, inside the view in the XML file, we should replace default TextView with our custom TextView like in the example below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
      <com.myapp.widget.MyEditText
      android:id="@+id/custom_font"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="This is our custom font" />
</LinearLayout>

You can create other custom widgets respectively. E.g. MyButton, MyCheckBox, etc. It can be useful, when you want to unify fonts in your application taking into consideration older versions of the Android. Please note, that Roboto font was introduced in Android Ice Cream Sandwich, but luckily is free and available for download from official Google website. Further reading & references:

Update: There is a library, which simplifies described process. Check it out here: https://github.com/ikocijan/MagicViews.