How to draw multiline text to canvas easily

Tue, 08/16/2011 - 08:41 | by tamas

SDK Version:

There are situations where you have to use a Canvas. What do you do if you have more text than you can properly display?
The problem is, that if you want multiline text on canvas, with the drawText method, you would have to measure how much space a single line of text would take up, and also compare it to the width of the screen, and draw each line separately.
Read more to check my solution.

I tought to myself, hey why not use a TextView, add the text, use it's word wrap properties, than get a bitmap from it, and draw it on canvas.
I made a helper class, that extends View:

public class CanvasHelper extends View {
 
        String mText;
        Context mContext;
        Paint paint = new Paint();
 
        public CanvasHelper(Context context) {
                super(context);
                mContext = context;
                paint.setColor(Color.WHITE); // You could setup the background etc here
                paint.setStyle(Style.FILL);
        }
 
        @Override
        protected void onDraw(Canvas canvas) {
                super.onDraw(canvas);
                drawTextOnCanvas(canvas, mText);
        }
 
        private void drawTextOnCanvas(Canvas canvas, String text) {
                // maybe color the bacground..
                canvas.drawPaint(paint);
 
                // Setup a textview like you normally would with your activity context
                TextView tv = new TextView(mContext);
 
                // setup text
                tv.setText(mText);
 
                // maybe set textcolor
                tv.setTextColor(Color.BLACK);
 
                // you have to enable setDrawingCacheEnabled, or the getDrawingCache will return null
                tv.setDrawingCacheEnabled(true);
 
                // we need to setup how big the view should be..which is exactly as big as the canvas
                tv.measure(MeasureSpec.makeMeasureSpec(canvas.getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(canvas.getHeight(), MeasureSpec.EXACTLY));
 
                // assign the layout values to the textview
                tv.layout(0, 0, tv.getMeasuredWidth(), tv.getMeasuredHeight());
 
                // draw the bitmap from the drawingcache to the canvas
                canvas.drawBitmap(tv.getDrawingCache(), 0, 0, paint);
 
                // disable drawing cache
                tv.setDrawingCacheEnabled(false);
        }
 
        public void setText(String text) {
                this.mText = text;
        }
}

Usage would be something like this:

public class MultiLineCanvasActivity extends Activity {
 
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
 
                String text = "Venison turkey short loin  pork belly tri-tip. Pastrami jerky pancetta tail salami shoulder. Ribeye ball tip short loin, andouille shankle pork chop shank short ribs pork belly tongue jerky beef venison pig pork. Bresaola t-bone cow rump flank. Ball tip spare ribs strip steak, cow beef ribs corned beef chuck chicken salami hamburger shankle drumstick. Venison ham beef sirloin, pastrami meatloaf brisket tail ball tip chicken bacon. Shank shoulder tail cow short loin tenderloin, pork ground round tongue salami jowl short ribs turkey t-bone fatback.";
 
                CanvasHelper ch = new CanvasHelper(this);
                ch.setText(text);
                setContentView(ch);
        }
}

On the nexus one:

On the HTC Wildfire:
nexus

On the Acer Iconica A500:
nexus

Tags:

Bookmark/Search this post with

How to draw multiline text to canvas easily

Main menu

New tutorials from Helloandroid

Recent Apps

Android on Twitter

Poll

Useful resources

Android Development Projects