April 29, 2010

[SOLVED] Android: Using Custom Fonts


Android comes with 3 fonts (Sans, Serif, Monospace) which can be accesed using android:typeface="FONT_NAME". But most of the times you would want to use your own fonts instead of the stock ones. Android provides an "assets" folder where you can put your TTF font files and access them from within the code.



There are two ways of doing this,



1. Assign the Typeface object to TextView,



2. Paint the Typeface on screen Canvas.





Method 1 - Assigning Typeface object to TextView



public void onCreate(Bundle savedInstanceState) 
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

TextView bauhs = null,chiller=null,broadw=null,joker=null ;
Button mag=null;

setFont(bauhs, "fonts/BAUHS93.TTF", R.id.bauhs);

setFont(broadw, "fonts/BROADW.TTF", R.id.broadw);

setFont(chiller, "fonts/CHILLER.TTF", R.id.chiller);

setFont(joker, "fonts/JOKERMAN.TTF", R.id.joker);

setFont(mag, "fonts/MAGNETOB.TTF", R.id.magneto);

}

void setFont(TextView name, String path, int res)
{
name=(TextView)findViewById(res);
Typeface font = Typeface.createFromAsset(this.getAssets(), path);

name.setTypeface(font);

}


- "Typeface" is the class for handling fonts.


- The createFromAsset() method is used to specify the font path.


font object is assigned to the TextView name



Method 2 - Drawing the font on screen canvas



@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new FontView(this));
}

private static class FontView extends View
{
private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Typeface mFace;

public FontView(Context context)
{
super(context);

// mFace = Typeface.createFromAsset(getContext().getAssets(),"fonts/MAGNETOB.TTF");

mPaint.setTextSize(34);
mPaint.setColor(Color.WHITE);
}

@Override
protected void onDraw(Canvas canvas)
{
canvas.drawColor(Color.BLACK);

drawFont(canvas, "fonts/BAUHS93.TTF", 50, "Bauhaus 93");

drawFont(canvas, "fonts/BROADW.TTF", 150, "Broadway");

drawFont(canvas, "fonts/CHILLER.TTF", 250, "Chiller");

drawFont(canvas, "fonts/JOKERMAN.TTF", 350, "Jokerman");

}

void drawFont(Canvas canvas, String path, int y, String name)
{
mFace = Typeface.createFromAsset(getContext().getAssets(),path);

mPaint.setTypeface(mFace);
canvas.drawText(name, 30, y, mPaint);

}
}


- We need to extend the View class to access and override the onDraw() method.



- A Paint object is created which allows us to set the font size and color.



- The TypeFace object mFace is assigned to mPaint which is drawn on screen using the drawText().



drawText() takes 3 parameters, the text to be painted, its X-Y location and the Paint object.





Note: There is a difference between arial.ttf and ARIAL.TTF . If it ARIAL.TTF in your /assets folder and arial.ttf in your code, it will not work.

So if you have set the path correct but still wondering why the font is not being displayed, check this naming.


Source: Using Custom Fonts - ModMyGPhone Wiki.

10 comments:

  1. Hi,
    Is there a way to specify a custom font from assets in the xml layouts or theme files?

    Maybe something like:



    @assets/fonts/customfont.ttf

    ReplyDelete
  2. Your comment system remove my xml example even though its in a pre block. lame.

    ReplyDelete
  3. Thanks.
    But my requirement is to apply typeface/font on a soft keyboard.
    Like they do in
    http://betterandroid.wordpress.com/2009/05/24/introducing-better-keyboard-for-android/ ?

    Any way to do this??
    Please help me out on this one.

    ReplyDelete
  4. Thanks for the tip, really useful!

    ReplyDelete
  5. can we use the Arial typeface directly throw the xml file attribute.. ?

    ReplyDelete
  6. thankyou for your answer.i got solution for my button font.

    ReplyDelete
  7. I used WINGDING.ttf but it is not working for me. I used other icon fonts too but displays the provided character like: canvas.drawText("p",0,1,20,20,myPaint) displays p

    myPaint is set with the WINGDING.ttf typeface

    ReplyDelete
  8. I have the same problem with another font that contains only symbols instead of characters...seems to be a problem with symbol fonts...anyone found a solution?

    ReplyDelete
  9. Hi.. This post is useful. But in my app I don't want to store my fonts file in assets/fonts folder. Font files are in a table(Language, Font_File). So how to load these fonts in my app?

    ReplyDelete