Changing Font in the Application

Shubham Agarwal

14 December 2016

We are often interested in the personalisation. When it comes to our desktop theme we reflect our taste. Same thing happens in case of application theming. We change style, fonts, colors, animation and like that. Changing font is also as important as other theming elements.

I was recently tasked with adding the ability to change font size when user changes the store.

Today we are gonna change the default theme of the application.

1. Custom Font Files

We can download free fonts available

e.g. https://www.google.com/get/noto/#kufi-arab

2. Adding Font Files Applications

Remove the files from the .zip folder assets /fonts under-copy.

For grade build the path will look like:

If you mistakenly choose different path, you will issues like

java.lang.RuntimeException: native typeface cannot be made

1	java.lang.RuntimeException: native typeface cannot be made

3. Using the application elements on the Font File

First of all extends the Application and override the on Create Methods.

public class MobikulApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
             FontsOverride.setDefaultFont(this, "BOLD", "NotoKufiArabic-Bold.ttf");
    }

public class MobikulApplication extends Application {

@Override

public void onCreate() {

super.onCreate();

FontsOverride.setDefaultFont(this, "BOLD", "NotoKufiArabic-Bold.ttf");

}

Hot Served Code for FontsOverride class:

public final class FontsOverride {
    private static Context mContext;
    public static void setDefaultFont(Context context,String staticTypefaceFieldName, String fontAssetName) {
        mContext=context;
        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);
         
aceFieldName);
          
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}

public final class FontsOverride {

private static Context mContext;

public static void setDefaultFont(Context context,String staticTypefaceFieldName, String fontAssetName) {

mContext=context;

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);

aceFieldName);

} catch (NoSuchFieldException e) {

e.printStackTrace();

} catch (IllegalAccessException e) {

e.printStackTrace();

}

Another way to achieve it is by using Custom Class.

Create a custom class

public class MyCustomTextView extends TextView {

    public MyCustomTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MyCustomTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyCustomTextView(Context context) {
        super(context);
        init();
    }

    private void init() {
        try{
            if (!isInEditMode()) {

                Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/AlexBrush-Regular.ttf");
                setTypeface(tf);
            }
        }catch (Exception e){
            e.printStackTrace();
        }

    }
}

public class MyCustomTextView extends TextView {

public MyCustomTextView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

init();

}

public MyCustomTextView(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public MyCustomTextView(Context context) {

super(context);

init();

}

private void init() {

try{

if (!isInEditMode()) {

Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fonts/AlexBrush-Regular.ttf");

setTypeface(tf);

}

}catch (Exception e){

e.printStackTrace();

}

Now you can access this custom UI wherever we want. We can access it directly in XML or programmatically.

<com.webkul.mobikul.UI.MyCustomTextView
    android:id="@+id/featured_product"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="1dp"
    android:layout_marginTop="1dp"
    android:gravity="center_horizontal"
    android:text="@string/featured_product_label"
    android:textSize="14sp" />

<com.webkul.mobikul.UI.MyCustomTextView

android:id="@+id/featured_product"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="1dp"

android:layout_marginTop="1dp"

android:gravity="center_horizontal"

android:text="@string/featured_product_label"

android:textSize="14sp" />