A workshop about using the Canvas in Android Including how to draw on canvas, make transformations, composited drawings and animated views

1. It’s the arts!
Playing with the Android canvas
(or Let’s have a pretext to vandalize art)

3. Today
Introduction to canvas
Composing and transforming
Animations!

4. Today
Some art vandalization!

5. But first, setup things:
http://sergiandreplace.com/canvas

6. Introducing
The Canvas

7. How we paint things in Android?

8. Open GL
(too complex)

9. Renderscript
(using a hammer to crack a nut)
(and not really for drawing)

10. Canvas
(quick and dirty)

11. What is exactly a “canvas”?

12. A Canvas works for you as a pretense, or
interface, to the actual surface upon which your
graphics will be drawn — it holds all of your
"draw" calls

14. Tl;dr: Canvas is the class that translates
drawing actions into a Bitmap

15. To draw something you need 4 components
(almost always)

16. A Bitmap to hold the pixels

17. a Canvas to host the draw calls
(writing into the bitmap)

18. a drawing primitive
(e.g. Rect, Path, text, Bitmap)

19. and a Paint
(to describe the colors and styles for the
drawing)

21. Tag 1_01_start

22. Let’s put a smile on
that face

26. Oh, hello beauty!

27. Remember
Bitmap + Canvas + Paint +Primitive
=
Drawing

28. Oh, crap!

29. Let’s improve that smile

31. Much better,
but…
a bit too straight

32. RectF allows to reuse coordinates

33. Bellisima!
but…

35. Tag start_1_02

36. In this case, the Paint is not needed

37. Why so serious?

38. Here comes the cape crusader!

40. Let’s get crazy with the rects!

41. Let’s talk about Bitmaps

42. Loading a bitmap

43. But…

44. A loaded Bitmap is immutable
We can’t draw in it!

45. Making it mutable

46. Making it mutable
What?

47. Bitmaps must be recycled
Recycle marks it as GCable
Still exists, but we can’t draw

48. Bitmaps are huge

49. Stored in memory with no compression

50. java.lang.OutOfMemoryError
(boo!)

51. Why to load a huge bitmap
if target draw is small?

52. Branch 1_03_Bitmaps

56. Composing
&
Transforming

57. Painting on the activity is cool, but…

58. Painting views is cooler

59. Anatomy of a drawing view

60. 1. Create needed objects
2. Measure
3. Draw accordingly
4. Repeat 2 & 3 when needed

61. The onDraw method

62. onDraw is executed everytime the view
needs to be redrawn
(or a part of it)

63. We can request a onDraw with invalidate()
(or postInvalidate if not in UI thread)

64. onDraw receives a ready-to-use-canvas

66. Tag 2_01_start

67. MyFirstDrawingView extends from ImageView
But it adds no behaviour. To work!

68. Understand drawing order

69. 1. ImageView add src

70. 1. ImageView add src
2. MyFirstDrawingView adds a Vignette

71. 3. View class draws background
1. ImageView add src
2. MyFirstDrawingView adds a Vignette

72. 3. View class draws background
1. ImageView add src
2. MyFirstDrawingView adds a Vignette

73. Introducing Shaders

74. Basically, shaders modify the behaviour
of Paint object

75. BitmapShader
Allows to tile a Bitmap

76. LinearGradient
RadialGradient
SweepGradient
Guess what they do…

77. ComposeShader allows to mix two shaders
with an Xfermode
(a really crazy thing)

78. Paint.setShader(shader)

79. Let’s combine this!

81. We want our view
to vignette the
image set in the
layout

82. You have to:
Create a RadialGradient
(psst, getMeasuredHeight & getMeasuredWidth)
Assign to the Paint object
Use canvas.drawPaint(Paint) to fill it

83. Pro:
Avoid instantiate in the onDrawMethod
(onSizeChanged is your friend)
Use the drawable size, not the View size
Check ScaleMode and Padding behaviour

84. And now PorterDuffXMode

85. PorterDuffModes define images will blend

89. Don’t worry, trial and error

90. We could also save a layer

91. Saving layers allows us to make
transformations

92. Example
Save layer
Transform canvas 45º
Draw square
Restore canvas

93. More on transformations later on

94. We can setup a Paint on saving
It will be applied on restoring

96. Branch 2_03_apples_on_apples

97. Create a new bitmap to hold the image
Create a temporary canvas for it
Draw the imageView image on the canvas
Save the canvas using a paint with the PorterDuff
setup the bounds of the drawable mask
Draw the mask on the temporary canvas
Restore the temporary canvas
Draw the bitmap on the real canvas

98. Pro:
Optimize it to avoid instatiation in the onDraw
Play around with ratios

99. Transformations

100. Mainly matrixes and camera

101. Stoping too obvious jokes before is too late

102. Remember matrixes from school?

103. Haha. Don’t worry

104. But remember
Operations order is important

105. Matrixes are used for
Translate
Rotate
Scale
Skew

106. But
Matrix.setRotate
Matrix.setScale
Only scales

107. We must use preOperation
and postOperation
to concatenat

108. So
Matrix.preRotate
Matrix.setScale
Rotates and scales
So
Matrix.setRotate
Matrix.postScale
Rotates and scales

109. Canvas has unity matrix by default

110. Be careful!

111. Translate
+
rotate
Rotate
+
translate

112. Translate
+
rotate
Rotate
+
translate

113. Translate
+
rotate
Rotate
+
translate

114. Translate
+
rotate
Rotate
+
translate

115. Translate
+
rotate
Rotate
+
translate

116. We can
Canvas.save()
Canvas.setMatrix(matrix)
Canvas.drawSomething()
Canvas.restore()

117. Or
DrawBitmap with matrix

118. Cameras allow us to create 3D matrixes
So 3D transformations
(axes x, y and z + perspective)

119. We perform transformations on camera
And then, we get the corresponding matrix

121. Tag 2_03_start

122. First part objective
Make an image turn

123. You have to:
Calculate center
Create a matrix
Set the rotation of the matrix
Create a new Bitmap as big as view
Create the canvas of that Bitmap
Draw image on the canvas with the matrix
Draw the resulting bitmap on the main canvas

124. Pro:
Connect a seekBar with the rotation (wow!)
Do it without and with optimization
(is it noticeable?)

125. Remember!

126. All these operations and stuff is cute

127. Combined are WOW!

128. Animations

129. We are not going to talk about
Animation or Animator class

130. But how to move all the things we learned

131. Basically, a onPaint calling invalidate()

132. Things to keep in mind

133. Speed

134. We want to achieve as FPS as possible

135. NO INSTATIATION!!

137. Flags everywhere!
Animating
Started
Folded
…

138. Create appropiate flags for the status
(boolean or enum, up to you)

139. Create controls methods
(start, stop, rewind, whatever)

140. Time between onDraw calls changes

141. startTime
deltaTime
duration
System.currentTimeInMillis

142. deltaTime = System.currentTimeMillis() - startTime;
progress = (float) deltaTime / duration);

143. Animation pattern
(well, my pattern)

144. Make the methods setup the states

145. In the onDraw

146. If/else treating states

147. Keep in mind what to draw after
& before the animation

148. Cache, cache and cache

149. Include also animating states

150. Animating states should change flags
and/or call invalidate

151. Animating states must calculate progress

152. Interpolators

153. Used to add realism to the animations

154. Time
Animation progress

155. Boooooooooooring
Time
Animation progress

156. Oooooooh!
Time
Animation progress

157. OOOOOOOOOOHHH!!!!
Time
Animation progress

158. So, interopolators are just functions

159. f(delta time) = interpolated time

160. deltaTime = System.currentTimeMillis() - startTime;
progress = (float) deltaTime / duration);

161. deltaTime = System.currentTimeMillis() - startTime;
interpolatedTime = interpolator.getInterpolation
((float) deltaTime / duration);

163. Tag 3_01_start

164. Newspaper effect!

165. Newspaper effect!

166. Follow the pattern and fill it up comments

167. Pro:
Make things parametized
Add stop/pause
Make real effect (add scale and alpha)

168. Did you finish the exercise?

169. So we are finished

170. There are many other things in Canvas

171. Believe me

172. Just check drawing text stuff

173. Whoever made the TextView is my hero

174. Whoever made EditText is my God

175. Hope you enjoyed

176. Willing to see the things you make with all this

177. Share them in the GDG group!