Using Custom Font in Android
Using Custom Font in Android
Android provides various font styles in android studio to help the developers make their app or game more attractive, but if you want to add some unique font to your application, a custom font which is not available in Android Studio by default, then how will you do it?
To do so in android studio we mainly have 3 methods and we will add the custom font one by one using all the 3 methods as shown below. So before jumping to the methods used to add a custom font, firstly we have to download any custom font file (which we will use in our app), which is generally a .ttf file. For this tutorial, we will be using the FFF-Tusj (Download now) font file or you can download any .ttf file you want.
Note: Before going to the below 3 methods or techniques, firstly we have to create an android project with empty activity, containing all the basic files and resources.
Add Custom Font – 1st Approach
You have to follow some basic steps to add custom font using to your android project:
First, we will create a new Android Resource Directory. To do so, right click on app -> res and select New -> Android Resource Directory and create a Resource type of font and click OK.
Now extract the FFF-Tusj zip file and inside the FFF-Tusj folder, you will find the fff_tusj.ttf file. Copy and paste the file inside the app -> res -> font folder (you can paste as many font files as you want in your project)
Open the activity_main.xml file and remove the default android generated code and create a RelativeLayout and inside the relative layout add a simple TextView and create an id for the text view, which we will use in step 4.
<TextView
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:id = “@+id/customFont”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
The complete code of activity_main.xml file is shown below:
<?xml version = “1.0” encoding = “utf-8” ?>
<RelativeLayout
xmlns:android = “http://schemas.android.com/apk/res/android”
xmlns:app = “http://schemas.android.com/apk/res-auto”
xmlns:tools = “http://schemas.android.com/tools”
android:layout_width = “match_parent”
android:layout_height = “match_parent”
tools:context = “.MainActivity”>
<TextView
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:id = “@+id/customFont”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
</RelativeLayout>
Now open the MainActivity.java file and import the libraries as shown below:
//import the basic library
import android.graphics.Typeface;
import android.os.Bundle ;
import android.widget.TextView;
import androidx.core.content.res.ResourcesCompat;
Inside the onCreate() method creates the instance of the TextView and create a Typeface object and set it to the TextView as shown below:
//creating and initializing the TextView object
TextView customFontTextView = ( TextView ) findViewById( R.id.customFont);
//creating typeface and getting the font from the font directory
Typeface typeface = ResourcesCompat.getFont( MainActivity.this, R.font.fff_tusj );
//setting typeface to textview
customFontTextView.setTypeface( typeface );
The complete code of MainActivity.java file is shown below:
package com.studytonight.project ;
//import the basic library
import android.graphics.Typeface;
import android.os.Bundle ;
import android.widget.TextView;
import androidx.core.content.res.ResourcesCompat;
import androidx.appcompat.app.AppCompatActivity ;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
//creating and initializing the TextView object
TextView customFontTextView = ( TextView ) findViewById( R.id.customFont);
//creating typeface and getting the font from the font directory
Typeface typeface = ResourcesCompat.getFont( MainActivity.this, R.font.fff_tusj );
//setting typeface to textview
customFontTextView.setTypeface( typeface );
}
}
Note: The output of all the 3 techniques is the same as we are doing the same thing but in different ways.
By Adding Custom Font Class:
To add custom font by creating a class for the custom font, follow the following steps:
Firstly we create a new folder to do so, right-click on the app and select New -> Folder -> Assets Folder and create an assets folder.
Now copy past the fff_tusj.ttf which we have extracted in method 1 inside the app -> assets folder (you can paste as many text files you want in your project in the asset folder)
In this, we will be creating a new Java class for the custom font by right-clicking on app -> java -> com.studytonight.project -> New -> java class and name the class according to your need (we are creating MyCustomFont class for this tutorial)
Now extend the MyCustomFont to AppCompatTextView and create 3 constructors inside the MyCustomFont class as shown below:
//constructor with 1 parameter
public MyCustomFont( @NonNull Context context ) {
super( context );
}
//constructor with 1 parameter
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs ) {
super( context, attrs);
}
//constructor with 1 parameter
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs , int defStyleAttr ) {
super( context, attrs , defStyleAttr );
}
Now inside the MyCustomFont we create a method private void setTheTypeface(Context context) and inside the method we create and set the Typeface as shown below:
private void setTheTypeface( Context context )
{
Typeface typeface = Typeface.createFromAsset(context.getAssets() , “fff_tusj.ttf” );
this.setTypeface( typeface );
}
Now call the setTheTypeface() method inside all the constructors as shown below
public MyCustomFont( @NonNull Context context ) {
super( context );
//calling setTheTypeface Function
setTheTypeface( context );
}
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs ) {
super( context, attrs);
//call the setTheTypeface Function
setTheTypeface( context );
}
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs , int defStyleAttr ) {
super( context, attrs , defStyleAttr );
//calling the setTheTypeface Function
setTheTypeface( context );
}
Now the work of MyCustomFont class is down and the Complete Code of MyCustomFont.java is shown below
package com.studytonight.project;
import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatTextView;
class MyCustomFont extends AppCompatTextView {
//constructor with 1 parameter
public MyCustomFont( @NonNull Context context ) {
super( context );
//calling setTheTypeface Function
setTheTypeface( context );
}
//constructor with 2 parameter
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs ) {
super( context, attrs);
//call the setTheTypeface Function
setTheTypeface( context );
}
//constructor with 3 parameter
public MyCustomFont( @NonNull Context context, @Nullable AttributeSet attrs , int defStyleAttr ) {
super( context, attrs , defStyleAttr );
//calling the setTheTypeface Function
setTheTypeface( context );
}
private void setTheTypeface( Context context )
{
Typeface typeface = Typeface.createFromAsset(context.getAssets() , “fff_tusj.ttf” );
this.setTypeface( typeface );
}
}
Now go to activity_main.xml file and remove the default layout and add a relative layout and inside the relativelayout add the com.studytonight.project.MyCustomFont as shown below:
<com.studytonight.project.MyCustomFont
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:id = “@+id/customFont”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
Now the method 2 is completed and the complete code of activity_main.xml file is shown below
<?xml version = “1.0” encoding = “utf-8” ?>
<RelativeLayout
xmlns:android = “http://schemas.android.com/apk/res/android”
xmlns:app = “http://schemas.android.com/apk/res-auto”
xmlns:tools = “http://schemas.android.com/tools”
android:layout_width = “match_parent”
android:layout_height = “match_parent”
tools:context = “.MainActivity”>
<com.studytonight.project.MyCustomFont
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:id = “@+id/customFont”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
</RelativeLayout>
Using fontFamily property – Simplest Method:
This is the simplest method to add custom font in our android app,
In this technique, we will follow the first 2 steps of the method 1, which means we first add the font .ttf file inside the font folder.
Then open the activity_main.xml file and remove the default code and add the relative layout and inside it we add the simple TextView and add the fontFamily property to it as shown below:
android:fontFamily=”@font/fff_tusj”
Now our TextView looks like:
<TextView
android:fontFamily = “@font/fff_tusj”
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
And we are done, yes that’s it, and the complete code of activity_main.xml file is shown below:
<?xml version = “1.0” encoding = “utf-8” ?>
<RelativeLayout
xmlns:android = “http://schemas.android.com/apk/res/android”
xmlns:app = “http://schemas.android.com/apk/res-auto”
xmlns:tools = “http://schemas.android.com/tools”
android:layout_width = “match_parent”
android:layout_height = “match_parent”
tools:context = “.MainActivity”>
<TextView
android:fontFamily = “@font/fff_tusj”
android:layout_marginLeft = “16dp”
android:layout_marginRight = “16dp”
android:textColor = “#FF5722”
android:layout_centerInParent = “true”
android:foregroundGravity = “center_horizontal”
android:gravity = “center_horizontal”
android:text = “Hello World”
android:textSize = “32dp”
android:layout_width = “match_parent”
android:layout_height = “wrap_content”/>
</RelativeLayout>
Output for Custom font:
The output of the app is the same for all the above 3 methods:
And with this, now you can use any new font that you like in your Android app.
Leave a Reply