Lesson Monday

One way to quickly add aesthetic touches to your Android applications is to implement custom fonts. In this lesson, we'll briefly cover how to import a font into our project's assets, and apply this font to a specific area of our application’s activities at runtime. There are several ways to add custom fonts to your activity through code and through XML, but here, we will focus on the simplest one first.

Selecting a Font File

First, you'll need to locate a specific font you'd like to use. You can download fonts from FontSquirrel, or feel free to explore other available font providers. Just know that fonts must be in the .ttf format, with a .ttf file extension.

For our MyRestaurants app, we'll download the Ostrich Sans font from Font Squirrel. Or, feel free to use another font you find more appealing.

Font Sub-Directory

Next, we'll need an assets folder to store our app's fonts. Right click on the app folder and then select New > Folder > Assets Folder. Keep the default Target Source Set and select Finish.

create-assets-folder

Next, right click on the newly-created assets folder and click New > Directory. Name this directory fonts.

(If the font you downloaded has a name that features capitalization, numbers, hyphens, or other special characters, now is a good idea to rename it, as renaming resources after they have been added to Android Studio can be finicky.)

Right click on the new fonts directory and select Reveal in Finder. Copy your .ttf font file into this folder.

Applying Fonts at Runtime

We can now apply the font at runtime by using the setTypeface() method on the TextView to which we want to apply the custom font. Let's apply this font to the "MyRestaurants" TextView in our MainActivity. In a previous lesson we assigned this TextView the id of appNameTextView to use it in an Espresso test. We'll reference that same ID here in the MainActivity.java file to locate it, and set its typeface.

First, we'll need to declare a member variable, and define it at runtime in onCreate():

MainActivity.java
...
public class MainActivity extends AppCompatActivity {
    ...
    private TextView mAppNameTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mAppNameTextView = (TextView) findViewById(R.id.appNameTextView);
       ...
...


Next, we'll define our new font as Typeface type (you'll have to import this new class), and call createFromAsset() to reference the .ttf font file we've just included in the project. (Keep in mind that createFromAsset() is only accessible from within an activity. If you are trying to call it somewhere else in the future, such as from an adapter or fragment, you may need a workaround.)

MainActivity.java
...
import android.graphics.Typeface;

public class MainActivity extends AppCompatActivity {
    ...
    private TextView mAppNameTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mAppNameTextView = (TextView) findViewById(R.id.appNameTextView);
        Typeface ostrichFont = Typeface.createFromAsset(getAssets(), "fonts/ostrich-regular.ttf");
        mAppNameTextView.setTypeface(ostrichFont);
       ...
...

After that, we simply call setTypeface() on the TextView, providing the new Typeface object we've just created as an argument. Perfect!

If we run our application in the emulator, we should see a new, custom font greet us on the MainActivity:

custom-font-main-activity-small

This is great! But this particular font looks just a bit small here. Let's quickly tweak the TextView's XML to increase the size of the font:

activity_main.xml
...
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MyRestaurants"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="35dp"
        android:textColor="@color/colorTextIcons"
        android:textSize="60sp"
        android:textStyle="bold"
        android:id="@+id/appNameTextView"/>
...

Here, we've simply changed the android:textSize property from 40sp to 60sp. This looks much better!

custom-font-main-activity-larger

Feel free to experiment with different fonts, and sizes in your own application!

Keep in mind that custom fonts can dramatically slow down your app, including causing skipped frames and sluggish performance, if they are used excessively. Use system fonts when possible, and reserve custom fonts for areas where they make the biggest impact.


Example GitHub Repo for MyRestaurants

Tips


  • Fonts must be of the .ttf file extension.

  • Font files should reside in the assets directory, in a sub-directory named fonts. If you have not already, you will need to create these directories.

  • the setTypeface() method can be called upon a View object, and will apply the Typeface provided as an argument to that specific View's text.

Example


The following example assumes a file called ostrich-regular.ttf is located in the fonts sub-directory of an assets directory under app:

MainActivity.java
...
import android.graphics.Typeface;

public class MainActivity extends AppCompatActivity {
    ...
    private TextView mAppNameTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mAppNameTextView = (TextView) findViewById(R.id.appNameTextView);
        Typeface ostrichFont = Typeface.createFromAsset(getAssets(), "fonts/ostrich-regular.ttf");
        mAppNameTextView.setTypeface(ostrichFont);
       ...
...

Example GitHub Repo for MyRestaurants