Easy Font Modifications to Get Different Text Styles in Android
Setting a new font when developing an Android App puts your own style onto the user interface (UI) and can help it stand out from the crowd. For many Activity screens the interface is usually constructed using Android layouts and interface widgets. The interface widgets, such as CheckBoxes and TextViews, have various properties that can be easily modified to change their look. Changing properties is done via the Properties list when viewing an Activity in the Graphical Layout screen in Eclipse, by editing the layout XML directly, or finally by using code to set property values.
This article mainly covers changing the look of a widget’s font using the Properties list. You can follow this article as a tutorial by starting a new Android Application Project in Eclipse and playing with widget properties as we go. (See our article Your First Android Java Program if you do not now how to create a basic App project. Here we have called the new App and project Android Fonts and given the package name biz.tekeye.fonts but you will be using you own package name.)
Edit Text Properties with the Android Development Tools Graphical Layout
With the activity_main.xml layout open and the Graphical Layout shown (click the tab at the bottom of the edit area if required) drag and drop some Medium TextViews onto the first activity’s screen. Click on the Form Widgets tab if needed to find the TextViews. With a TextView selected its properties can be changed in the Outline pane. If the Outline pane is not visible use the Eclipse Window and Show View menu option to select Outline to display it.
For the TextViews find the Typeface property and try the various settings of normal, sans, serif and monospace. Try several TextViews each set to a different Typefacevalue (tip: change the TextView text so you know which one has which setting). The Typeface property is stored in the XML layout file as the TextView’s XML attribute android:typeface.
Notice that having no Typeface set (the android:typeface attribute is not present) or having it set to normal or sans all results in the same font style. This is because the default font setting uses the sans value. The monospace setting provides a font in which each letter takes up an equal amount of screen space (unlike the other settings in which the space a letter takes up various depending upon the letter, so i’s are a lot narrower than w’s).
A serif font is one that has additional decoration at the end of the strokes that make up the letter. As this picture based on the Wikipedia entry for serif shows. The name of the sans setting comes from the phrase sans serif which means without serif as sans is french for without.
Bold and Italic
Use the Text Style Property (in the XML view it is the android:textStyle attribute) to add bold, italic or bold and italic options to the text. The default value is normal, the value it takes if no Text Style is set. The other values are bold and italic, either individually or combined with a bar, as in android:textStyle=”bold|italic”. When altering the Text Style with the Properties window the ellipses button can be used to bring up check boxes to select bold, italic or both, as well as the default normal option.
Combining Properties into a Text Appearance
When putting together an App’s look you may have several Views that you want to set with the same Typeface, Text Style and other Properties (such as Text Color and Text Size). Setting these Properties on all the Views individually becomes more of a chore the more Views in an App, especially if you decide to change a property at a later date and have to find each View in the App to edit its property. Fortunately Android can group properties into styles, a style is then applied to a View with one property, you only need to edit View properties in a single location, similar to the way HTML web pages are styled with cascading style sheets (CSS), and like CSS styles can themselves use other defined styles. This tutorial is not about styles so it will be covered briefly to point you in the right direction.When applying styles that only modify a View’s text properties the style is applied via the Text Appearance property (XML attribute android:textAppearance). Styles that modify non-text properties are applied via the style property. In the Graphical Layout under the Form Widgets folder you will find a plain TextView and a Large, Medium and Small version. The Text Appearance property is using a style to control the size of the text. When a Medium TextView was dropped on to the layout the android:textAppearance attribute was set to android:attr/textAppearanceMedium. This tells us that it is pointing to an Android system attribute called textAppearanceMedium. You can see this attribute in the android.jar file in the project tree but it is best looking at the source code under the folder where the Android SDK was installed, android-sdk\platforms\android-x\data\res\values\attrs.xml where x is the API level your project is using. In attrs.xml we find:
<!-- Text color, typeface, size, and style for "large" text. Defaults to primary text color. --> <attr name="textAppearanceLarge" format="reference" /> <!-- Text color, typeface, size, and style for "medium" text. Defaults to primary text color. --> <attr name="textAppearanceMedium" format="reference" /> <!-- Text color, typeface, size, and style for "small" text. Defaults to secondary text color. --> <attr name="textAppearanceSmall" format="reference" />The reference setting means we need to look in android-sdk\platforms\android-x\data\res\values\themes.xml, the file that determines the “theme” for the system, here we find:
<item name="textAppearanceMedium">@android:style/TextAppearance.Medium</item>under <style name=”Theme”> and also:
<item name="textAppearanceMedium">@android:style/TextAppearance.Holo.Medium</item>under <style name=”Theme.Holo”>, if you are looking in a API 11 folder or later. This is to support both the original Android device theme and the Android Holo theme introduced in Android 3.0. To find android:style/TextAppearance.Medium and android:style/TextAppearance.Holo.Medium we look in android-sdk\platforms\android-x\data\res\values\styles.xml:
<style name="TextAppearance.Medium"> <item name="android:textSize">18sp</item> </style>so we see that the Medium TextView has a Text Size of 18sp (18 scaled pixels, see the section below covering font sizing). We also find that the Holo theme uses this style to set the same size:
<style name="TextAppearance.Holo.Medium" parent="TextAppearance.Medium"> </style>For our TextViews we can apply the property settings in our own XML style file. Let us replace the properties on the Bold Serif Medium TextView with a style file. In the project tree select the values folder and using the File menu or context (usually right-click) menu select New then Android XML File. In the File box enter a name, e.g. mytextstyles.xml (styles do not need to be in a file named styles.xml, they can be stored in any named resource file). Click the finish button. In the new opened XML file define a new style for bold and serif.
<?xml version="1.0" encoding="utf-8"?> <resources> <item name="android:textStyle">bold</item> <item name="android:typeface">serif</item> </style> </resources>Now delete the Typeface and Text Style properties for the Bold Serif Medium TextView and change the Text Appearance property from ?android:attr/textAppearanceMedium to @style/MySerifBold. This method is useful when you have several property values to set on multiple widgets.
Font Size Measurements in Android
When it comes to sizing text for display in an Activity there are several factors to consider, the size needed for easy reading, the size and resolution of the screen and the user’s font size device setting.
The size of the text has traditionally been based on the point. This is a unit of measurement originating from the physical printing process. There are 72 points to an inch so a 12 point font will produce a line of text one sixth of an inch, about 4.2mm, high (12/72=1/6). Word processing software still uses this measurement with the font size of the text entered or selected under the font formatting options as a simple number (usually selectable from a range such as 8, 9, 10, 11, 12, 14, 16 and so on). Android supports the point size (pt) but it is a bit cumbersome for mobile device screens.
Android devices come in all sorts of screen sizes and resolutions, as our article Example List of Android Device Screen Resolutions and Sizes shows. The screen density of a device is usually stated in dots per inch (DPI). This is the number of pixels that a screen contains in one inch. A 240 DPI screen has a lower resolution than a 320 DPI screen. Font sizes can be set using pixel measurements (px) but this leads to different size texts on different screen densities even though the screens may be similar in size physically. A 3 inch wide 240 DPI screen would have larger text than on a 3 inch wide 320 DPI when sizing font using pixel values. To allow for this Android provide the density pixel (dp) setting and sizes set using dp are scaled correctly for different DPIs. However, dp does not cater for a user’s font size setting.
Android devices can help those with poor eyesight by allowing them to increase the font size setting on their devices (or decrease it for the keen-sighted). You Apps should also cater for this setting by defining Text Size using scaled pixels (sp). As the user changes their device font settings so the text in your Activity would scale appropriately if sp is used.
Using a Custom Font
The fonts bundled with Android do not give a great deal of choice. Fortunately Android supports any TrueType font. The font file is added to the project then loaded into a Typeface object and assigned to the widget. You could use a font bundled with your PC (for example from the C:\Windows\Fonts folder), or one you purchased, though there may be licensing issues. There are lots of free fonts available. In this example we are using the Strato free font from the Open Font Library web site. Download the font and extract the .ttf (TrueType) files from the strato.zip file.
Copy the Strato-linked.ttf file to the assets folder in the project. Open the MainActivity.java file under the src folder. Just before the closing brace of the onCreate method a Typeface object is created and loaded with a font from assets before being assigned to a TextView or EditText using the setTypeface method:
Typeface font = Typeface.createFromAsset(getAssets(), "Strato-linked.ttf"); TextView tv=(TextView) findViewById(R.id.textView0); tv.setTypeface(font);
Ideally this needs to be wrapped in an exception handler incase the TTF file is corrupt or the name is misspelt. If you are using characters in the text outside of the typical range ensure that the font chosen contains those characters.
Using the Android Fonts on Your PC
The fonts shipped with Android are placed onto you PC when the SDK is installed. Look in android-sdk\platforms\android-x\data\fonts, these fonts can be installed onto your PC and used in your word processor, useful when doing App design documents.
This article has given a brief overview on how to use different fonts in an Android Activity, you can also use color, spacing and borders to improve Activity layouts. As well as the Open Font Library, mentioned in this tutorial, the Wikipedia article Open Source Unicode Typefaces is a good source of information on a variety of royalty free fonts.