It’s the Arts! Having fun with a canvas

It’s the Arts! Having fun with a canvas

Making your own views in Android is a lot of fun, and using the Canvas to make them more appealing is even more fun. Graphical effects, animations, and a lot of other things can be achieved extending a simple view and modifying its behavior during the canvas drawing phase.

Starting at this task is quite hard. Information seems to be written for people who already know what they are doing. Then, when you start to see concepts like matrixes, PorterDuff, and so on, you are forced to check if you missed documentation explaining it all .

In this articles I will start reviewing the basic steps to start working with the canvas and drawings.

The canvas

What is exactly a “canvas”? we can say that a canvas is Bitmap in a “drawable” mode. We associate a canvas with a bitmap, and each operation performed in the canvas is automatically available in the associated bitmap. We can create a canvas from a Bitmap, or create it standalone and associate it to a Bitmap later. This relationship is not exactly one-to-one and it can be modified. So, let’s say that Canvas is the artistic interface of the Bitmap that handles all the drawing operations. This text from the Canvas javadoc page defines what we will see now quite clearly:

To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).

The following example introduces the canvas and some elements:

This code will take a Bitmap, paint a red line on it and put it on a ImageView.

device-2015-01-31-220419

 

Exciting, isn’t it? I always tought that Van Gogh was missing a bit of red on his art. Original bitmap on top, our “improvement” on the right. Let’s review the code:

First, we load a bitmap from our drawables using BitmapFactory class. Due to the nature of this class, the resulting bitmap is immutable and we can’t edit it. So we need to copy it into a new Bitmap object. In this example, I’m not considering the memory, but be aware of it when playing around with bitmaps.

Next, we generate a canvas from the copied bitmap.  From now on, any action performed on this canvas will affect the paintedArt stored in Bitmap (but not the one on art, because we copied it).

Th e next step is to create and setup a Paint object. The Paint class is responsible to configure how the drawing is performed. In some drawing methods the Paint is a mandatory parameter, in some others it’s optional. In the example code, four properties are setup:

  • Color: this is the color used to paint, in this case it is red. When using colors in RGB format, we must specify the ARGB (not like in the layout system, where we can use shortcuts). If you setup the color as 0xFF0000 it will be black, as the two first bytes for the alpha will be 0.
  • StrokeWidth: in conjunction with other Stroke<something> properties helps you define how the line is painted. In this case we define a 25 pixels line. Check documentation for other stroke properties and play with them.
  • Style: this is an important one, in that it defines if we will paint hollow or solid objects. In this case, we paint a line, so there is no difference, but keep it this option in mind.
  • AntiAlias: this flag smoothes the outside pixels of the line when drawn, and should not be confused with the Dither property whichis used to downsample the colors of the image and avoid artifacts.
The next steps is where the magic happens. Here we tell the canvas we want to draw a line from pixel 100, 100 to 900, 500 using our Paint object brush.
Finally we find the reference to the layout element and set the paintedArt Bitmap object as the image. Remember, drawing on the canvas on the previous line magically modified the bitmap.

From this point I suggest you explore the Paint other properties and the different drawing methods of the Canvas class. Some interesting things to check include drawARGB, drawArc, drawCircle, drawColor, drawLine, drawOval, drawPaint, drawPoint, drawRect and drawRoundRect.

In next articles we’ll learn more about Canvas, specially on the OnDraw method from View class.

Keep drawing!

About the art.

Click on the links and culturize yourself.

The header image is a picture of The Battle of Grunwald (Bitwa pod Grunwaldem) painting by Jan Matejko displayed in the National Museum in Warsaw, by Adrian Grycuk (photo, of course:)) (Own work) [CC BY-SA 3.0 pl], via Wikimedia Commons.

The paint used in the example is The Starry Night (De sterrennacht), by Vincent van Gogh [Public domain], via Wikimedia Commons.

 

Thanks to Mike Wolfson for the proofreading

 

1 Comment

  1. Ana · February 5, 2015 Reply

    Hey, Sergi,

    Great post! I always wanted to be Van Gogh without losing my ears :)

    Nice looking blog!

Leave a Reply