Using Custom fonts on Android

Using Custom fonts on Android

I had to do this for a project that I am working on, and I felt that it wasn't possible to achieve this. Well, there are several examples on the internet regarding this and nothing seemed to be working for me. So, in this post, we will see how to use custom fonts for your application on Android.

Few things before we start off:

• Not all fonts are compatible with Android
• You need to package the ttf files with your apk
• It's obviously a little bit of extra work

So for this example, we have a TextView and a Button with different fonts. To be able to use your custom font everywhere, ie, on all the TextView and Button widgets in your app, you will have to extend these classes to create your own TextView and Button classes. I have named them as MyTextView and MyButton. And then, I can use these buttons in my layout xml files, with the fully-qualified name of my custom classes.

<?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.beanie.samples.customfont.MyTextView

        android:layout_marginTop="10dip" android:id="@+id/textView"

        android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:text="@string/hello" android:textSize="20sp"></com.beanie.samples.customfont.MyTextView>

    <com.beanie.samples.customfont.MyButton

        android:layout_marginTop="10dip" android:id="@+id/textView"

        android:layout_width="fill_parent" android:layout_height="wrap_content"

        android:text="@string/hello" android:textSize="20sp"></com.beanie.samples.customfont.MyButton>

</LinearLayout>

In both these classes, we have a method called init() which is called from all the constructors. The method is just 3 line long.

        if (!isInEditMode()) {
                  Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/ds_digib.ttf");
                  setTypeface(tf);
        }

Simple!!! You might notice that there is an if condition. This is not required, but it does help when you are preparing your layouts on eclipse, and you need to keep checking if everything's fine. This method, isInEditMode() returns true while eclipses tries to render the view from the XML.

This is what the documentation says:

Indicates whether this View is currently in edit mode. A View is usually in edit mode when displayed within a developer tool. For instance, if this View is being drawn by a visual user interface builder, this method should return true. Subclasses should check the return value of this method to provide different behaviors if their normal behavior might interfere with the host environment. For instance: the class spawns a thread in its constructor, the drawing code relies on device-specific features, etc. This method is usually checked in the drawing code of custom widgets.

If you don't put this condition, the layout editor will complain about not being able to set the TypeFace. So, in the layout editor, you will see your TextView and Button widgets with the default font. But, when you run your app on an emulator or a device, you can see the goodness of your custom fonts. 

HomeActivity.java

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class HomeActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TextView bauhs = null;

        setFont(bauhs, "fonts/handsean.ttf", R.id.textView);
    }

    void setFont(TextView name, String path, int res) {
        name = (TextView) findViewById(res);
        Typeface font = Typeface.createFromAsset(getAssets(), path);

        name.setTypeface(font);
    }
}

MyButton.java


import android.content.Context;

import android.graphics.Typeface;

import android.util.AttributeSet;

import android.widget.Button;



public class MyButton extends Button {

    public MyButton(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);

        init();

    }
    public MyButton(Context context, AttributeSet attrs) {

        super(context, attrs);

        init();

    }
    public MyButton(Context context) {

        super(context);

        init();

    }
    private void init() {

        if (!isInEditMode()) {

            Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/ds_digib.ttf");

            setTypeface(tf);

        }

    }

}



MyTextView.java



import android.content.Context;

import android.graphics.Typeface;

import android.util.AttributeSet;

import android.widget.TextView;



public class MyTextView extends TextView {



   public MyTextView(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);

        init();

    }
    public MyTextView(Context context, AttributeSet attrs) {

        super(context, attrs);

        init();

    }
    public MyTextView(Context context) {

        super(context);

        init();

    }
    private void init() {

        if (!isInEditMode()) {

            Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/handsean.ttf");

            setTypeface(tf);

        }

    }



}


main.xml
--------

<?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.beanie.samples.customfont.MyTextView

                android:layout_marginTop="10dip" android:id="@+id/textView"

                android:layout_width="fill_parent" android:layout_height="wrap_content"

                android:text="@string/hello" android:textSize="20sp"></com.beanie.samples.customfont.MyTextView>



        <com.beanie.samples.customfont.MyButton

                android:layout_marginTop="10dip" android:id="@+id/textView"

                android:layout_width="fill_parent" android:layout_height="wrap_content"

                android:text="@string/hello" android:textSize="20sp"></com.beanie.samples.customfont.MyButton>

</LinearLayout>


 You can find 3 different fonts (ttf file) in the assets folder to play with.