How to set a particular font for a button text in android?

Question

I want my button text to be in the Copperplate Gothic Light font and I yet have not come across a simple clean code for a simple function as this. Help!

PS: Since android comes with ariel and a few other fonts on its own we need to import (apologies for the lack of a better word since I'm new to this) the font we wish to use. This is all I have been able to gather till yet and this is where the trail ends for me.

Answer 1

In kotlin you can create your custom button and override the typeface.

class StandardButton @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, dyfStyleAttr: Int = 0) : AppCompatButton(context, attrs, dyfStyleAttr) {
    init {
        typeface = Typeface.createFromAsset(context.assets, "fonts/CopperplateGothicBold.ttf")
    }
}

Answer 2

Try this. Also useful for EditTextViews, TextViews.. whatever!

<your.namespace.app.FontButton
     app:font="montserrat"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

How is possible? This way!

public class FontButton extends Button {

public FontEditText(Context context) {
    this( context, null );
}

public FontEditText(Context context, AttributeSet attrs) {
    this( context, attrs, 0 );
    init( context, attrs );
}

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

public FontEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super( context, attrs, defStyleAttr, defStyleRes );
    init( context, attrs );
}

private void init(Context context, AttributeSet attrs) {
    TypedArray ta = context.obtainStyledAttributes( attrs, R.styleable.Fonts );

    if ( ta != null ) {
        String fontAsset = ta.getString( R.styleable.Fonts_font );
        if ( !StringUtils.isEmpty( fontAsset ) ) {
            int type = Integer.parseInt( fontAsset );

            Typeface typeFace = FontManager.getInstance( context ).getByType( type );
            ta.recycle();
            super.setTypeface( typeFace );
        }
    }
}

}

public class FontManager {

private static FontManager Instance;

private Context context;

private Typeface robotoCondensedBold;
private Typeface robotoCondensed;
private Typeface robotoLight;
private Typeface kronica;
private Typeface montserrat;
private Typeface montserratLight;
private Typeface keepCalmMedium;

private FontManager(Context context) {
    this.context = context;
    this.robotoCondensedBold = Typeface.createFromAsset( context.getAssets(), "fonts/RobotoCondensed-Bold.ttf" );
    this.robotoCondensed = Typeface.createFromAsset( context.getAssets(), "fonts/RobotoCondensed-Regular.ttf" );
    this.robotoLight = Typeface.createFromAsset( context.getAssets(), "fonts/Roboto-Light.ttf" );
    this.kronica = Typeface.createFromAsset( context.getAssets(), "fonts/kronika.ttf" );
    this.montserrat = Typeface.createFromAsset( context.getAssets(), "fonts/Montserrat-Regular.ttf" );
    this.montserratLight = Typeface.createFromAsset( context.getAssets(), "fonts/Montserrat-Light.ttf" );
    this.keepCalmMedium = Typeface.createFromAsset( context.getAssets(), "fonts/KeepCalmMedium.ttf" );
}

public synchronized static FontManager getInstance(Context context) {
    if ( Instance == null )
        Instance = new FontManager( context );

    return Instance;
}

public Typeface getByType(int type) {
    switch ( type ) {
        case 0:
            return FontManager.getInstance( context ).getRobotoCondensedBold();
        case 1:
            return FontManager.getInstance( context ).getRobotoLight();
        case 2:
            return FontManager.getInstance( context ).getKronica();
        case 3:
            return FontManager.getInstance( context ).getRobotoCondensed();
        case 4:
            return FontManager.getInstance( context ).getMontserrat();
        case 5:
            return FontManager.getInstance( context ).getMontserratLight();
        case 6:
            return FontManager.getInstance( context ).getKeepCalmMedium();
        default:
            return Typeface.DEFAULT;
    }
}

public Typeface getRobotoCondensedBold() {
    return robotoCondensedBold;
}

public Typeface getKronica() {
    return kronica;
}

public Typeface getRobotoCondensed() {
    return robotoCondensed;
}

public Typeface getRobotoLight() {
    return robotoLight;
}

public Typeface getMontserrat() {
    return montserrat;
}

public Typeface getMontserratLight() {
    return montserratLight;
}

public Typeface getKeepCalmMedium() {
    return keepCalmMedium;
}

In addition, a font_attrs.xml in your res folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Fonts">
        <attr name="font" format="enum">
            <enum name="robotoCondensedBold" value="0"/>
            <enum name="robotoLight" value="1"/>
            <enum name="kronica" value="2"/>
            <enum name="robotoCondensed" value="3"/>
            <enum name="montserrat" value="4"/>
            <enum name="montserratLight" value="5"/>
            <enum name="keepCalmMedium" value="6"/>
        </attr>
    </declare-styleable>
</resources> 

Note that you only need to modify the FontManager and the font_attrs.xml to customize your fonts!

Answer 3

You can use the below code. Just replace the font name in mTextFont() method as per your requirement.

public class Button_Roboto_Regular extends Button {
public Button_Roboto_Regular(Context context) {
    super(context);
    mTextFont(context);
}

public Button_Roboto_Regular(Context context, AttributeSet attrs) {
    super(context, attrs);
    mTextFont(context);
}

public Button_Roboto_Regular(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mTextFont(context);
}
private void mTextFont(Context context) {
    Typeface face = Typeface.createFromAsset(context.getAssets(), "fonts/Roboto-Regular_0.ttf");
    this.setTypeface(face);
}

Answer 4

You can use custom button class as given below.Put your font in asset/font folder.

public class CustomButton extends Button{


    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        // TODO Auto-generated constructor stub
    }
    public CustomButton(Context context) {
        super(context);
        init();
        // TODO Auto-generated constructor stub
    }
    public CustomButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
        // TODO Auto-generated constructor stub
    }
    private void init(){
        Typeface font_type=Typeface.createFromAsset(getContext().getAssets(), "font/ProximaNova-Bold.ttf");
        setTypeface(font_type);
    }
}

Now you can use the button in xml as given below.

<model.CustomButton
            android:id="@+id/search"
            android:layout_width="@dimen/edittext_width_large"
            android:layout_height="@dimen/button_height"
            android:layout_below="@+id/cars"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/pad_20dp"
            android:background="@drawable/button_pressed_bg"
            android:text="@string/find_car"
            android:textColor="@color/white" />

Answer 5

After several research, my best option was :

public class CustomButton extends Button {

    Typeface normalTypeface = FontCache.get("fonts/CopperplateGothicLight.ttf", getContext());
    Typeface boldTypeface = FontCache.get("fonts/CopperplateGothicBold.ttf", getContext());

    /**
     * @param context
     */
    public CustomButton(Context context) {
        super(context);
    }

    /**
     * @param context
     * @param attrs
     */
    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

}

then Using fontCache from the 1st answer on this : Memory leaks with custom font for set custom font

public class FontCache {
    private static Hashtable<String, Typeface> fontCache = new Hashtable<String, Typeface>();

    public static Typeface get(String name, Context context) {
        Typeface tf = fontCache.get(name);
        if(tf == null) {
            try {
                tf = Typeface.createFromAsset(context.getAssets(), name);
            }
            catch (Exception e) {
                return null;
            }
            fontCache.put(name, tf);
        }
        return tf;
    }
}

Less code and more usage of the android standards !

Answer 6

First download TTF file for font style and then put it into the assets folder of your project.

You can set it programmatically by following way :

Typeface font_style = Typeface.createFromAsset(getAssets(), "yourcystomfontstyle.ttf");  
yourbutton.setTypeface(font_style);

Answer 7

If you plan to add the same font to several buttons I suggest that you go all the way and implement it as a style and subclass button:

public class ButtonPlus extends Button {

    public ButtonPlus(Context context) {
        super(context);
    }

    public ButtonPlus(Context context, AttributeSet attrs) {
        super(context, attrs);
        CustomFontHelper.setCustomFont(this, context, attrs);
    }

    public ButtonPlus(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        CustomFontHelper.setCustomFont(this, context, attrs);
    }
}

This is a helper class to set a font on a TextView (remember, Button is a subclass of TextView) based on the com.my.package:font attribute:

public class CustomFontHelper {

    /**
     * Sets a font on a textview based on the custom com.my.package:font attribute
     * If the custom font attribute isn't found in the attributes nothing happens
     * @param textview
     * @param context
     * @param attrs
     */
    public static void setCustomFont(TextView textview, Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomFont);
        String font = a.getString(R.styleable.CustomFont_font);
        setCustomFont(textview, font, context);
        a.recycle();
    }

    /**
     * Sets a font on a textview
     * @param textview
     * @param font
     * @param context
     */
    public static void setCustomFont(TextView textview, String font, Context context) {
        if(font == null) {
            return;
        }
        Typeface tf = FontCache.get(font, context);
        if(tf != null) {
            textview.setTypeface(tf);
        }
    }

}

And here's the FontCache to reduce memory usage on older devices:

public class FontCache {

    private static Hashtable<String, Typeface> fontCache = new Hashtable<String, Typeface>();

    public static Typeface get(String name, Context context) {
        Typeface tf = fontCache.get(name);
        if(tf == null) {
            try {
                tf = Typeface.createFromAsset(context.getAssets(), name);
            }
            catch (Exception e) {
                return null;
            }
            fontCache.put(name, tf);
        }
        return tf;
    }
}

In res/values/attrs.xml we define the custom styleable attribute

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomFont">
        <attr name="font" format="string"/>
    </declare-styleable>
</resources>

And finally an example use in a layout:

    <com.my.package.buttons.ButtonPlus
        style="@style/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_sometext"/>

And in res/values/style.xml

<style name="button" parent="@android:style/Widget.Button">
    <item name="com.my.package:font">fonts/copperplate_gothic_light.TTF</item>
</style>

This may seem like an awful lot of work, but you'll thank me once you have couple of handfuls of buttons and textfields that you want to change font on.

Answer 8

MainActivity.java

    package com.mehuljoisar.customfontdemo;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.widget.Button;

public class MainActivity extends Activity {

    private Button button1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button)findViewById(R.id.button1);
        button1.setTypeface(Typeface.createFromAsset(getAssets(), "copperplate-gothic-light.ttf"));
        button1.setText("hello");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

activity_main.xml

<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"
tools:context=".MainActivity" >

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/hello_world" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="24dp"
    android:text="Button" />

Download link for your desired font: copperplate_gothic_light

put it inside your asset folder.

Screenshot:

I hope it will be helpful !!

Answer 9

1) Get the font you need as a .ttf (CopperplateGothicLight.ttf for example) file and place it in your project's /assets/ directory

2) Use this code to refer to the font and set it to your button:

Typeface copperplateGothicLight = Typeface.createFromAsset(getAppContext().getAssets(), "CopperplateGothicLight.ttf"); 
yourButton.setTypeface(copperplateGothicLight);