Using Custom Fonts with Android TextViews

It's been about a year since I started Android development. While the Android framework is powerful, there are some things that should not be so difficult, like applying custom fonts to a TextView. I've been playing around with this for a while, and I've finally got a good framework in place that will really simplify applying custom fonts to TextViews. This article is meant for intermediate Android developers, who are tired of typing in font names. It'll also be the most beneficial to those who use Eclipse and want to take advantage of its Auto-Complete features to automatically suggest the fonts.

Ready? Let's get started!

Step 1: Adding your fonts

First of all, you'll need to add the fonts you want to use to your project. As an example, we'll use Google's own Roboto fonts, which come included with the Android SDK. You'll find them in your Android SDK directory under the platforms/android-15/data/fonts folder. Copy the fonts you want into the assets/fonts folder of your project directory. Let's also add the Ubuntu Fonts. You can download them for free.

Step 2: Writing your Custom TextView

You will need to make a custom TextView extending TextView. Add the following TextView in your source directory.

A little explanation about how this works. The styledAttrs object is an array of attributes which are passed to the Widget in the XML Layout. From these, we extract the one important to us(more on that later) and use it to create the Typeface we need. After that, we call setTypeface() to add the typeface to the TextView.

Step 3: Adding a TypefaceCache

Strictly, this is not necessary. But we will do this for a very important reason: performance! Creating a Typeface from the assets is a heavy operation and we'll probably be using these fonts in ListViews. If we don't cache the typefaces, the performance of the ListView will degrade horribly. This way, we only create the Typeface once, and recall it from the cache when needed.

Step 4: Declaring a custom attribute

This is where the fun stuff starts! We want to make it really friendly for the developer to use this widget, so we declare an attribute "fontStyle" in XML, which will be an enum. Each enum value will map to a particular font in the TypefaceCache. With this, Eclipse will automatically suggest the fonts to you when you begin typing in the attribute name, like it does for the default attributes. Add the following to your res/values/attrs.xml file

You will probably need to restart Eclipse so that it can build its auto-suggestion cache when adding these attributes.

Step 5: Tying it all together!

The first thing that needs to be done is adding your app's namespace to the XML layouts where you're going to use the TypefacedTextView. Add the following line below the xmlns:android declaration in your layout file.

Then you can use your TypefacedTextView just like a normal TextView but with a new attribute - fontStyle.

If you are running the newest version of ADT, you won't have to add the namespaces manually, as Eclipse will automatically fill it in for you!

Run your application and Huzzah! It's alive!

That's all for now! Hope you liked it!