Using bitmap fonts

Ilias TsagklisNovember 11th, 2012Last Updated: February 16th, 2013

0 80 3 minutes read

With this example we are going to demonstrate how to use bitmap fonts in an Android Application. Android is running on a wide variety of devices with lots of different screen sizes and resolutions.

So bitmap fonts can help you address the problem of using a consistent font face across different devices. For this tutorial we are going to use a monospaced font alphabet which means that all the characters have the same width and height.

In short, to create and use bitmap fonts you should:

create an image containing all the characters of the alphabet you want, with transparent background and copy it to a drawable Android resource foulders
measure the height and the width of a sample character on your image, in pixels
create a bitmap containing the character map
assosiate all the characters and numbers of the alphabet with a substet bitmap, derived from the main bitmap
use Glyphs an canvans to draw the sting you want on the screen

as shown in the code snippets below:

package net.obviam.fonts;
 
import android.content.Context;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.Log;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
 
public class DrawingPanel extends SurfaceView implements SurfaceHolder.Callback {
 
    private static final String TAG = DrawingPanel.class.getSimpleName();
 
    private Canvas canvas;      // the canvas to draw on
    private Glyphs glyphs;      // the glyphs
 
    public DrawingPanel(Context context) {
        super(context);
        // adding the panel to handle events
        getHolder().addCallback(this);
 
        // initialise resources
        loadResources();
 
        // making the Panel focusable so it can handle events
        setFocusable(true);
    }
 
    /**
     * Loads the images
     */
    private void loadResources() {
        this.glyphs = new Glyphs(BitmapFactory.decodeResource(getResources(), R.drawable.glyphs_green));
        Log.d(TAG, "Green glyphs loaded");
    }
 
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }
 
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
    }
 
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // draw text at touch
        try {
            canvas = getHolder().lockCanvas();
            synchronized (getHolder()) {
                if (event.getAction() == MotionEvent.ACTION_DOWN 
                        || event.getAction() == MotionEvent.ACTION_MOVE) {
                    // clear the screen
                    canvas.drawColor(Color.BLACK);
                    // draw glyphs
                    glyphs.drawString(canvas, "Drawing string at "
                            + (int) event.getX() + " " + (int) event.getY(),
                            (int) event.getX(), (int) event.getY());
                }
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    canvas.drawColor(Color.BLACK);
                    glyphs.drawString(canvas, "Drawn string at "
                            + (int) event.getX() + " " + (int) event.getY(),
                            (int) event.getX(), (int) event.getY());
                }
            }
        } finally {
            if (canvas != null) {
                getHolder().unlockCanvasAndPost(canvas);
            }
        }
        // event was handled
        return true;
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
    }
 
}

package net.obviam.fonts;
 
import java.util.HashMap;
import java.util.Map;
 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.util.Log;
 
public class Glyphs {
 
    private static final String TAG = Glyphs.class.getSimpleName();
    private Bitmap bitmap;  // bitmap containing the character map/sheet
 
    // Map to associate a bitmap to each character
    private Map<Character, Bitmap> glyphs = new HashMap<Character, Bitmap>(62);
 
    private int width;  // width in pixels of one character
    private int height; // height in pixels of one character
 
    // the characters in the English alphabet
    private char[] charactersL = new char[] { 'a', 'b', 'c', 'd', 'e', 'f', 'g',
            'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
            'u', 'v', 'w', 'x', 'y', 'z' };
    private char[] charactersU = new char[] { 'A', 'B', 'C', 'D', 'E', 'F', 'G',
            'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
            'U', 'V', 'W', 'X', 'Y', 'Z' };
    private char[] numbers = new char[] { '1', '2', '3', '4', '5', '6', '7',
            '8', '9', '0' };
 
    public Glyphs(Bitmap bitmap) {
        super();
        this.bitmap = bitmap;
        this.width = 8;
        this.height = 12;
        // Cutting up the glyphs
        // Starting with the first row - lower cases
        for (int i = 0; i < 26; i++) {
            glyphs.put(charactersL[i], Bitmap.createBitmap(bitmap,
                    0 + (i * width), 0, width, height));
        }
        Log.d(TAG, "Lowercases initialised");
 
        // Continuing with the second row - upper cases 
        // Note that the row starts at 15px - hardcoded
        for (int i = 0; i < 26; i++) {
            glyphs.put(charactersU[i], Bitmap.createBitmap(bitmap,
                    0 + (i * width), 15, width, height));
        }
        // row 3 for numbers
        Log.d(TAG, "Uppercases initialised");
        for (int i = 0; i < 10; i++) {
            glyphs.put(numbers[i], Bitmap.createBitmap(bitmap,
                    0 + (i * width), 30, width, height));
        }
        Log.d(TAG, "Numbers initialised");
 
        // TODO - 4th row for punctuation
    }
 
    public Bitmap getBitmap() {
        return bitmap;
    }
 
    /**
     * Draws the string onto the canvas at <code>x</code> and <code>y</code>
     * @param text
     */
    public void drawString(Canvas canvas, String text, int x, int y) {
        if (canvas == null) {
            Log.d(TAG, "Canvas is null");
        }
        for (int i = 0; i < text.length(); i++) {
            Character ch = text.charAt(i);
            if (glyphs.get(ch) != null) {
                canvas.drawBitmap(glyphs.get(ch), x + (i * width), y, null);
            }
        }
    }
}

package net.obviam.fonts;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
 
public class PrintingActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
 
  super.onCreate(savedInstanceState);
 
  // turn off title
 
  requestWindowFeature(Window.FEATURE_NO_TITLE);
 
  setContentView(new DrawingPanel(this));
    }
}