Android

Learn to Apply Custom Fonts to TextView in Android

In this tutorial, you will learn how to apply a custom font to a TextView in an Android app using Kotlin. You'll explore the process of integrating custom fonts from external font files or resources into your application. The tutorial will guide you through steps such as loading the custom font programmatically or via XML, applying the font to TextViews, and ensuring consistent font styling across different TextView instances in your app's layout. By following this guide, you'll gain practical experience in enhancing the visual appearance and typography of your Kotlin-based Android applications through custom font integration.
Submitted on July 07, 2024

To create an Android app that applies a custom font to a ‘TextView‘, you'll need to follow these steps. This example will use Kotlin for the implementation:

Step-by-Step Implementation

1. Add Custom Font to the Project:

  • Download the font: Obtain the ‘.ttf‘ or ‘.otf‘ font file that you want to use. Ensure you have the legal rights to use the font in your application.
  • Place your custom font file (e.g., ‘handWritingFont.ttf‘) in the res/font directory of your Android project. If the font directory doesn't exist, you can create it under res.
    	
/app
└── /src
    └── /main
        └── /res
            └── /fonts
                └── handWritingFont.ttf

2. Modify activity_main.xml

  • Open ‘res/layout/activity_main.xml’ and add a TextView with the desired text that will apply the custom font.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textViewCustomFont"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, Custom Font!"
        android:textSize="24sp"
        android:layout_centerInParent="true"
        android:fontFamily="@font/handWritingFont" />

</RelativeLayout>
  • Replace @font/handWritingFont with the name of your custom font file (without the file extension).

3. Implement MainActivity.kt

  • Open ‘MainActivity.kt’ and set the custom font programmatically.

package com.example.customfontexample

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    private lateinit var textViewCustomFont: TextView

    @Override
    fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textViewCustomFont = findViewById(R.id.textViewCustomFont)

        // No additional code needed here if you set the font in XML
    }
}

Apply a Custom Font Dynamically (Programmatically) to a TextView in Kotlin Code

  • Remove the ‘android:fontFamily’ attribute from your ‘TextView’, since you'll be setting the font dynamically in code.

Implement MainActivity.kt:

  • Open MainActivity.kt and load the custom font dynamically.

package com.example.customfontexample

import android.graphics.Typeface
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var textViewCustomFont: TextView

    @Override
    fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textViewCustomFont = findViewById(R.id.textViewCustomFont)

        // Load custom font from resources
        val customFont = Typeface.createFromResource(this, R.font.handWritingFont)

        // Apply custom font to TextView
        textViewCustomFont.typeface = customFont
    }
}

Explanation:

  • activity_main.xml:

    • The TextView (textViewCustomFont) does not specify a font family (android:fontFamily) anymore, as we'll be setting it programmatically.

  • MainActivity.kt:

    • onCreate():
      • Initializes the TextView (textViewCustomFont).
      • Loads the custom font using Typeface.createFromResource(this, R.font.handWritingFont). Replace handWritingFont with the name of your custom font file.
      • Applies the custom font to the TextView using textViewCustomFont.typeface = customFont.

Testing:

  • Run the app on an emulator or a physical device.
  • The TextView (textViewCustomFont) should display the text using the custom font (handWritingFont.ttf) loaded dynamically in the MainActivity.

Additional Notes:

  • Ensure that the custom font file (handWritingFont.ttf) is correctly placed in the res/font directory and referenced correctly in Typeface.createFromResource(this, R.font.handWritingFont).
  • Dynamically setting fonts is useful when you need to apply different fonts based on user preferences, language settings, or other runtime conditions.

This approach allows you to dynamically apply a custom font to a TextView in your Android app using Kotlin, providing flexibility and control over the UI's typography.