Adding Custom Fonts into our App.

Standard

Have you ever seen an android app with its native font? ughh!, you might agree with me when i say it does not look good. Despite there’s a little tiny set of “custom” or “stylish” fonts we can find in the typefaceproperty of any text containing view (see image below), sometimes it is not enough.

Captura de pantalla 2015-12-30 a las 9.32.51Captura de pantalla 2015-12-30 a las 9.34.57

So, what do we need to apply some fancier fonts into our app? Well, the first step it to create a new app, add your views and we are ready to go.

Create a new project, and add a verticalLayout. Inside put as many views as you want (in order to see more fonts examples), Next, we need some .ttf files. We can get plenty of them here.

Once your have them, we need to manually add them into our project structure. But be careful, one does not simply import them in any place you want, it must specifically be a folder under the app->src->main directory, named assets. Like this:

Captura de pantalla 2015-12-30 a las 9.44.11

Inside the assets folder we need now another folder called fonts, and inside we can copy our ttf files downloaded before (I will use 5 distinct fonts for this example).

Captura de pantalla 2015-12-30 a las 9.48.12

Now, in order to make our fonts styling easier, i created a class to manage them and use it whenever we need it. It basically has a getter for every font we have. So, over the java directory we create a new class and name it Fonts, with the next code (of course you can name getters as you want/need):

public class Fonts {
    private Typeface f1,f2,f3,f4,f5;

    public Fonts(Context myContext) {
        this.f1 = Typeface.createFromAsset(myContext.getResources().getAssets(), "fonts/f1.ttf");
        this.f2 = Typeface.createFromAsset(myContext.getResources().getAssets(), "fonts/f2.ttf");
        this.f3 = Typeface.createFromAsset(myContext.getResources().getAssets(), "fonts/f3.ttf");
        this.f4 = Typeface.createFromAsset(myContext.getResources().getAssets(), "fonts/f4.ttf");
        this.f5 = Typeface.createFromAsset(myContext.getResources().getAssets(), "fonts/f5.ttf");
    }
    public Typeface getF1() {
        return f1;
    }
    public Typeface getF2() {
        return f2;
    }
    public Typeface getF3() {
        return f3;
    }
    public Typeface getF4() {
        return f4;
    }
    public Typeface getF5() {
        return f5;
    }
}

Observe this need a context to be used, and we will later pass it as parameter whenever it need to be used. Once we have this class ready we are almost done. After creating our layout with the next information:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button text"
        android:id="@+id/b1"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="40px" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Default text normal"
        android:id="@+id/t1"
        android:typeface="normal"
        android:layout_marginBottom="40px" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Default text sans"
        android:id="@+id/t2"
        android:typeface="normal"
        android:layout_marginBottom="40px" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Default text serif"
        android:id="@+id/t3"
        android:typeface="serif"
        android:layout_marginBottom="40px" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Default text monospace"
        android:id="@+id/t4"
        android:typeface="monospace" />
</LinearLayout>

Let’s go now to our activity class and make reference to our views and the Fonts class (Observe the context parameter we mentioned before) into the OnCreate() function.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    TextView t1 = (TextView) findViewById(R.id.t1);
    TextView t2 = (TextView) findViewById(R.id.t2);
    TextView t3 = (TextView) findViewById(R.id.t3);
    TextView t4 = (TextView) findViewById(R.id.t4);
    Button b1 = (Button) findViewById(R.id.b1);
    Fonts f = new Fonts(this);
}

The final step is apply the new fonts to our views, which is kind of easy.

t1.setTypeface(f.getF1());
t2.setTypeface(f.getF2());
t3.setTypeface(f.getF3());
t4.setTypeface(f.getF4());
b1.setTypeface(f.getF1());

And after running the app we can see the final result:

Captura de pantalla 2015-12-30 a las 10.02.33

If you need the fonts in another class just instantiate it and you can use it again with no problem. Or even easier, you can apply a singleton pattern to the Fonts class then you need to instantiate it just once and use it as many times as you want from any other class.

Leave a Reply

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