Changing the Font for Android TextViews and EditTexts

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

Drag and drop a medium Android TextViewWith 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.

Android TextView ProperitiesFor 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.

android:typeface ProperityNotice 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).

Comparing Sans Serif and Serif fontsA 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

Android bold and italic Text StyleUse 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.

Android bold and italic text

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>
Creating a New Android Styles FileFor 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.

Font size in word processing.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.

Changing Android Device Font Size

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.

Android Text Sizes and Settings

Using a Custom Font

Strato Font ExampleThe 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);

Strato Font on AndroidIdeally 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.

Finally

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.

7 thoughts on “Changing the Font for Android TextViews and EditTexts

  1. I am brand new to the Android app development world. When I add textview objects to my layout page, the only property that I am allowed to change is the text. I can’t change font size, style, etc. Any ideas on what is wrong with my setup? I can’t do it on any app that I create.

    • Changing the properties of a selected item should be straightforward. Are you using Eclipse with the Android SDK or Android Studio? If you can’t change values using the Properties list on the Outline tab (use the Window then Show View menu if it is not shown) can you edit the XML layout file directly? (Click the layout file name next to the Graphical Layout tab to see the raw XML). Add a property in the XML to see if the item changes, e.g. add textStyle=”bold” to bold the text:

      <TextView android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/hello_world"
      android:textStyle="bold" />

      When you create a new App does it run OK? (see Your First Android Hello World Java Program). Do the sample Apps run OK (see Running an Android SDK Sample App) and can you change their screens?

      • I am using Eclipse with the Android SDK or Android Studio? I can edit the XML layout file directly? The app runs fine! I am working with 15 students and it works perfect on about 11 of the devices, but the other 4 can’t modify the properties in the graphical layout. Once I enter the code on the XML layout file, then it lets them modify that setting on the properties dialog box.

        • I’ve not seen that behaviour before. I checked the Android project issue tracker and someone has reported a similar issue (62792). I suggest you add your experience to the bug report so that Android has as much information as possible so solve the issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.