In this Android custom font article, we will look at how to apply custom font for the entire Application.
Here I am taking the project of my previous article on FirebaseUI and cloning it to apply custom font to that application. The entire code for this tutorial is made available as a separate Github project. You can clone/download.from the following link:
1. Declare a class to Override Fonts:
We declare a class to override the fonts. Here I’ve named it as FontsOverride.java.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.coderefer.firebasedatabaseexample.util; | |
import android.content.Context; | |
import android.graphics.Typeface; | |
import java.lang.reflect.Field; | |
/** | |
* Created by vamsi on 06-05-2017 for Android custom font article | |
*/ | |
public class FontsOverride { | |
public static void setDefaultFont(Context context, | |
String staticTypefaceFieldName, String fontAssetName) { | |
final Typeface regular = Typeface.createFromAsset(context.getAssets(), | |
fontAssetName); | |
replaceFont(staticTypefaceFieldName, regular); | |
} | |
protected static void replaceFont(String staticTypefaceFieldName, | |
final Typeface newTypeface) { | |
try { | |
final Field staticField = Typeface.class | |
.getDeclaredField(staticTypefaceFieldName); | |
staticField.setAccessible(true); | |
staticField.set(null, newTypeface); | |
} catch (NoSuchFieldException e) { | |
e.printStackTrace(); | |
} catch (IllegalAccessException e) { | |
e.printStackTrace(); | |
} | |
} | |
} |
Here I’ve declared the above class as final so that no other subclasses can be created for it so that we are restricting the concept of inheritance for this class.
[adinserter block=”8″]
2. Placing the required android custom font in our Application:
The font I am going to use is Raleway.ttf which is an open source font which can be acquired at the following link.
Create an assets folder by changing our android perspective to project and navigating to src > main and right click on main and select new > Folder > Assets Folder
Now create a sub folder in assets folder named fonts and place Raleway.ttf in fonts folder.
Now the total directory for the fonts folder will be src > main > assets > fonts > Raleway.ttf
[widget id=”text-3″]
3. Declare /Modify Application Subclass:
Android Application is the base class in Android that maintains Global Application State. We can write a subclass extending Application class and declare it in our AndroidManifest.xml‘s <application> tag. Android os will initialize the Application class or its subclass before any other classes when the process for your application/package is created. For more on Android Application class, you can visit the following link.
Here I am creating a class named CustomFontApp.java that extends Application class and add the following code to it:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.coderefer.firebasedatabaseexample; | |
import android.app.Application; | |
import com.coderefer.firebasedatabaseexample.util.FontsOverride; | |
/** | |
* Created by vamsi on 06-05-2017 for android custom font article | |
*/ | |
public class CustomFontApp extends Application { | |
@Override | |
public void onCreate() { | |
super.onCreate(); | |
FontsOverride.setDefaultFont(this, "DEFAULT", "fonts/raleway.ttf"); | |
FontsOverride.setDefaultFont(this, "MONOSPACE", "fonts/raleway.ttf"); | |
FontsOverride.setDefaultFont(this, "SERIF", "fonts/raleway.ttf"); | |
FontsOverride.setDefaultFont(this, "SANS_SERIF", "fonts/raleway.ttf"); | |
} | |
} |
If your app already contains a subclass that extends application, then modify that class by adding the following lines of code to it.
[adinserter block=”8″]
4. Declare the application tag in Android Manifest:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" | |
package="com.coderefer.firebasedatabaseexample"> | |
<application | |
android:name=".CustomFontApp" | |
android:allowBackup="true" | |
android:icon="@mipmap/ic_launcher" | |
android:label="@string/app_name" | |
android:supportsRtl="true" | |
android:theme="@style/AppTheme"> | |
<activity | |
android:name=".MainActivity" | |
android:screenOrientation="portrait"> | |
<intent-filter> | |
<action android:name="android.intent.action.MAIN"/> | |
<category android:name="android.intent.category.LAUNCHER"/> | |
</intent-filter> | |
</activity> | |
</application> | |
</manifest> |
5. Apply typeface to styles.xml:
Now we will add the following line to our styles.xml so that the typeface will be applicable to our entire application.
<item name="android:typeface">monospace</item>
Now my styles.xml will look like:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<resources> <!– Base application theme for Android Custom Font –> | |
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar"> <!– Customize your theme here. –> | |
<item name="android:typeface">monospace</item> | |
<item name="colorPrimary">@color/colorPrimary</item> | |
<item name="colorPrimaryDark">@color/colorPrimaryDark</item> | |
<item name="colorAccent">@color/colorAccent</item> | |
</style> <!–Defining colors for TextInputLayout's EditText–> | |
<style name="TextLabel" parent="TextAppearance.AppCompat"> <!– Hint color and label color in FALSE state –> | |
<item name="android:textColorHint">#9575cd</item> | |
<item name="android:textSize">20sp | |
</item> <!– Label color in TRUE state and bar color FALSE and TRUE State –> | |
<item name="colorAccent">@color/colorAccent</item> | |
<item name="colorControlNormal">#9575cd</item> | |
<item name="colorControlActivated">@color/colorAccent</item> | |
</style> | |
</resources> |
Now run the app to see that the Android custom font is applied to the entire application!
[adinserter block=”8″]