Open In App

How to Change Font of Toolbar Title in an Android App?

Improve
Improve
Like Article
Like
Save
Share
Report

Google Fonts provide a wide variety of fonts that can be used to style the text in Android Studio. Appropriate fonts do not just enhance the user interface but they also signify and emphasize the purpose of the text. In this article, you will learn how to change the font-family of the Toolbar Title in an Android App. In an Android app, the toolbar title preset at the upper part of the application. Below is a sample image that shows you where the toolbar title is present.

Toolbar Title

There are two ways to change the font of the Toolbar Title.

Method 1: By Adding Child TextView in the activity_main.xml file 

In method 1 Just go to the activity_main.xml file and add a TextView in the toolbar widget with the font-family attribute. The complete code for the activity_main.xml file is given below.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#0F9D58">
  
        <TextView
            android:id="@+id/custom_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-smallcaps"
            android:text="GeeksForGeeks"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold" />
  
    </androidx.appcompat.widget.Toolbar>
  
</RelativeLayout>


Output UI:

Method 2: By Setting TextFont Programmatically

First, add a font file in the src/main/assets/fonts/ of your project. Then create variables for Toolbar and text title and call the method findViewById(). Create a new Typeface from the specified font data. And at last setTypeface in text title. Below is the complete code for the MainActivity.java/MainActivity.kt file.  

Java




import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        Toolbar toolbar = findViewById(R.id.toolbar);
  
        // Custom title
        TextView textCustomTitle = (TextView) findViewById(R.id.custom_title);
  
        // Custom font
        Typeface customFont = Typeface.createFromAsset(this.getAssets(), "fonts/sans-serif-smallcaps.ttf");
  
        // Set
        textCustomTitle.setTypeface(customFont);
  
        setSupportActionBar(toolbar);
    }
}


Kotlin




import android.graphics.Typeface
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val toolbar: Toolbar = findViewById(R.id.toolbar)
  
        // Custom title
        val textCustomTitle: TextView = findViewById(R.id.custom_title)
  
        // Custom font
        val customFont = Typeface.createFromAsset(this.assets, "fonts/sans-serif-smallcaps.ttf")
  
        // Set
        textCustomTitle.typeface = customFont
        setSupportActionBar(toolbar)
    }
}


The corresponding activity_main.xml file is given below.  

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
  
        <TextView
            android:id="@+id/custom_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GeeksForGeeks"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:textStyle="bold" />
  
    </androidx.appcompat.widget.Toolbar>
  
</RelativeLayout>


 
Output UI:



Last Updated : 23 Feb, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads