How to use native and custom fonts in android app

In this tutorial, we are going to learn how to use native and custom fonts in android application development. Our android OS comes with different in-built fonts that we can make use of with downloading it first. Among all the native fonts in our android OS, one of the fonts is use as a default font for our device. If you develop android app without specifying any native font your app will automatically use the default font present in your android OS or device. In this tutorial we are going to learn how to use different native fonts in our application and also how to use custom fonts in our apps.

We will start with how to use the native fonts in our device. So before we start, I will like to emphasize that the following environment and tools were used for this tutorial. But you are free to use whatever tools you are familiar with.

Windows XP

Eclipse (ADT)

Samsung Galaxy Fame Lite

Min SDK 8

Target SDK 19

There is no better time to start creating our application than now. To create a new android application project, following the steps as stipulated below.

How to create Android Application Project

Got to File menu

Click on New menu

Click on Android Application

Enter Project name: NativeCustomFont

Package: com.tutorial.NativeCustomFont

Keep other default selections.

Continue to click on next button until Finish button is active

Then click on Finish Button

The images below will visually show you a walk-through on how to create a new android application project if you have not done it before. Please make sure you have change your project name and package name in the image to conform to your project.

createapp

createapp2

Once you have created your android project, double click the res folder and inside, double click on the layout folder. You will see a file called activity_main.xml. Double click on this file to open it in your IDE.

createapp3

Delete the content of this file. Copy and paste the following code in the file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.tutorial.nativecustomfont.MainActivity" >

   <TextView

        android:id="@+id/serif"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="40dp"

        android:layout_centerHorizontal="true"

        android:textSize="18sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"       

        android:typeface="serif" />

     <TextView

        android:id="@+id/monospace"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/serif"

        android:layout_marginTop="40dp"

        android:textSize="18sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"       

        android:typeface="monospace" />

     <TextView

        android:id="@+id/sans"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/monospace"

        android:layout_marginTop="40dp"

        android:textSize="20sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"

        android:typeface="sans" />

</RelativeLayout>

I have used these three fonts (Serif, monospace and sans) to demonstrate android OS native fonts. According the wiki.mobileread.com, There are only three system wide fonts in Android; normal (Droid Sans), serif (Droid Serif), and monospace (Droid Sans Mono).Applications can install fonts for themselves, but not for system-wide use.

The value of the text used in each of the TextView Control above is store in string.xml file located in the values folder

createapp4

Copy and paste this one line of code in string.xml file.

<string name="use_fonts">Testing native fonts</string>

That is all with native android OS fonts. You can run your application and see how each text is displayed with different font as shown below

createapp5

Custom Fonts in Android

Now we will move ahead to create a custom font for our android app. Custom font is when you want to use any font that is not native to android OS in your application. There are many ways to use custom font but we will focus on one. Before we start, we will create a new folder called fonts inside our project assets folder. You can copy and paste any free-to-use font that you want to use. I am going to use a font called Lato as shown below.

createapp6

We are going to use this custom font programmatically in our project. It is also important to know that we can equally use it in our layout xml file. So let’s go ahead and create a new TextView control in the layout we used previously. Now our layout file looks as shown below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.tutorial.nativecustomfont.MainActivity" >

   <TextView

        android:id="@+id/serif"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="40dp"

        android:layout_centerHorizontal="true"

        android:textSize="18sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"       

        android:typeface="serif" />

     <TextView

        android:id="@+id/monospace"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/serif"

        android:layout_marginTop="40dp"

        android:textSize="18sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"       

        android:typeface="monospace" />

     <TextView

        android:id="@+id/sans"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/monospace"

        android:layout_marginTop="40dp"

        android:textSize="20sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"

        android:typeface="sans" />

    <TextView

        android:id="@+id/lato"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_below="@+id/sans"

        android:layout_marginTop="40dp"

        android:textSize="20sp"

        android:textStyle="bold"

        android:text="@string/use_fonts"/>

</RelativeLayout>

To use this custom font in our new TextView control, we will create an instance of this control in our MainActivity.java file. Thereafter, we will set the Lato font to our control so that any text attached to the control will be display with Lato font. Copy and paste the following code to your MainActivity.java file.

package com.tutorial.nativecustomfont;

import android.support.v7.app.ActionBarActivity;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

                @Override

                protected void onCreate(Bundle savedInstanceState) {

                                super.onCreate(savedInstanceState);

                                setContentView(R.layout.activity_main);

                                TextView latoFontText = (TextView)findViewById(R.id.lato);

                                Typeface custom_font = Typeface.createFromAsset(getAssets(), "fonts/Lato.ttf");

                                latoFontText.setTypeface(custom_font);

                }

                @Override

                public boolean onCreateOptionsMenu(Menu menu) {

                                // Inflate the menu; this adds items to the action bar if it is present.

                                getMenuInflater().inflate(R.menu.main, menu);

                                return true;

                }

                @Override

                public boolean onOptionsItemSelected(MenuItem item) {

                                // Handle action bar item clicks here. The action bar will

                                // automatically handle clicks on the Home/Up button, so long

                                // as you specify a parent activity in AndroidManifest.xml.

                                int id = item.getItemId();

                                if (id == R.id.action_settings) {

                                                return true;

                                }

                                return super.onOptionsItemSelected(item);

                }

}

If you run your program now you will see all the fonts in action. This is how they all look on my device.

Screenshoot

You can download the source code for this tutorial and use. Please kindly use our comment box below to ask any question you have.

 

Add a Comment