Custom fonts in TextView and FontCache

Lot of times we want to  use a custom font in a TextView. One way to achieve this is to create our custom class that extends TextView.

First we place our fonts in the Asset folder. In this case we are going to use the SEGOE font, and put the font under the fonts folder in the assets.

Then we create our custom class. I have place it under es.slothdevelopers.views. And I have call it SegoeTextView.

public class SegoeTextView extends TextView {

    public SegoeTextView(Context context) {
        super(context);
    }

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

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

    @Override
    public void setTypeface(Typeface tf, int style) {
        if (!this.isInEditMode()) {
            if (style == Typeface.NORMAL) {
                super.setTypeface(FontCache.getFont(getContext(), "fonts/SEGOEUI.TTF"));
            } else if (style == Typeface.ITALIC) {
                super.setTypeface(FontCache.getFont(getContext(), "fonts/SEGOEUII.TTF"));
            } else if (style == Typeface.BOLD) {
                super.setTypeface(FontCache.getFont(getContext(), "fonts/SEGOEUIB.TTF"));
            }
        }
    }
}

We have override the setTypeface method to be able to change the font between bold, italic and normal in the layout without having to create another custom class.

We also used a FontCache to load the typeface:

FontCache.getFont(getContext(), "fonts/SEGOEUI.TTF")

Instead of calling:

Typeface.createFromAsset(getContext().getAssets(), "fonts/SEGOEUI.TTF");

It’s a good practice to use a font cache, the performance is much better. This can be quite important in elements that are created lot of times, such a ListView or a GridView.

Here we have the code of our FontCache:

public class FontCache {
    private static Map<String, Typeface> fontMap = new HashMap<String, Typeface>();

    public static Typeface getFont(Context context, String fontName){
        if (fontMap.containsKey(fontName)){
            return fontMap.get(fontName);
        }
        else {
            Typeface tf = Typeface.createFromAsset(context.getAssets(), fontName);
            fontMap.put(fontName, tf);
            return tf;
        }
    }
}

Now to use this custom TextView we just have to change our layout. For example:

<es.slothdevelopers.views.SegoeTextView
                        android:id="@+id/date"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Mar 18, 2014 a las 18:01"
                        android:textColor="@color/text_color"
                        android:textSize="12sp" />

In the layout we can change the textStyle and it will change in our app.
In this view I used the same view for the name that for the date. I only had to add: android:textStyle=”bold”.

Custom TextViews

Advertisements

One thought on “Custom fonts in TextView and FontCache

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s