Home › Tutorials ›

How to use canvas in your android apps - Part 2

Wed, 04/28/2010 - 08:01 | by jozsi

SDK Version: 
M3

In the second part of this tutorial series, I will show you what you can do with canvas and paint.


If you complete the first part, your onDraw method in Panel class is similar as this:

  1.         @Override
  2.         public void onDraw(Canvas canvas) {
  3.                
  4.                 Paint paint = new Paint();
  5.                
  6.  
  7.                 Bitmap kangoo = BitmapFactory.decodeResource(getResources(),
  8.                                 R.drawable.kangoo);
  9.                 canvas.drawColor(Color.BLACK);
  10.                 canvas.drawBitmap(kangoo, 130, 10, null);
  11.                
  12.         }
  13.          

We will use the the Paint type object this time. You can use it to draw lines, circles and text on your canvas. For example this two lines will draw a red circle for you.

  1. paint.setColor(Color.RED);
  2. canvas.drawCircle(20, 50, 25, paint);

A blue circle with antialiasing turned on:

  1.         paint.setAntiAlias(true);
  2.         paint.setColor(Color.BLUE);
  3.         canvas.drawCircle(60, 50, 25, paint);

Now we will create some triangles. Create a Path object to store our triangle's segments. Use .offset to draw in many locations.

  1.                         paint.setStyle(Paint.Style.FILL_AND_STROKE);
  2.                         paint.setStrokeWidth(2);
  3.                         paint.setColor(Color.GREEN);
  4.                         Path path = new Path();
  5.                         path.moveTo(4, -10);
  6.                         path.lineTo(20, 0);
  7.                         path.lineTo(-9, 0);
  8.                         path.close();
  9.                         path.offset(60, 40);
  10.                         canvas.drawPath(path, paint);
  11.                         path.offset(90, 100);
  12.                         canvas.drawPath(path, paint);
  13.                         path.offset(80, 150);
  14.                         canvas.drawPath(path, paint);

Now draw a text using FILL style:

  1.                         paint.setStyle(Paint.Style.FILL);
  2.                         paint.setAntiAlias(true);
  3.                         paint.setTextSize(20);
  4.                         canvas.drawText("Hello Android! Fill...", 50, 230,
  5.  
  6. paint);

You can rotate the text, and you can draw it where you want:

  1.         int x = 75;
  2.         int y = 185;
  3.         paint.setColor(Color.GRAY);
  4.         paint.setTextSize(25);
  5.         String rotatedtext = "Rotated helloandroid :)";

Draw bounding rect before rotating text:

  1. Rect rect = new Rect();
  2. paint.getTextBounds(rotatedtext, 0, rotatedtext.length(), rect);
  3. canvas.translate(x, y);
  4. paint.setStyle(Paint.Style.FILL);
  5.  
  6. canvas.drawText("Rotated helloandroid :)", 0, 0, paint);
  7. paint.setStyle(Paint.Style.STROKE);
  8. canvas.drawRect(rect, paint);
  9.  
  10. canvas.translate(-x, -y);
  11.  
  12.                        
  13. paint.setColor(Color.RED);
  14. canvas.rotate(-45, x + rect.exactCenterX(),y + rect.exactCenterY());
  15. paint.setStyle(Paint.Style.FILL);
  16. canvas.drawText(rotatedtext, x, y, paint);
  17.                        

Now draw a draw a thick dashed line in angle:

  1. DashPathEffect dashPath = new DashPathEffect(new float[]{10,40}, 1);
  2. paint.setPathEffect(dashPath);
  3. paint.setStrokeWidth(8);
  4. canvas.drawLine(0, 60 , 320, 300, paint);

Bookmark/Search this post with

New tutorials from Helloandroid

More...

Android on Twitter

Join the conversation

Poll

What Version of Android do you have?: