Learn how to draw custom views using canvas on Android, a talk made for #AndroidMakers 2019 Learn what is canvas, how to use paint & path

1. S’il te plait, dessine moi
une vue

2. Florent Champigny
Florent37
florent_champ
http://bit.ly/AndroidDevFr
Slack : Android Dev FR

4. Why talking about
canvas ?

5. One day, on my twitter…
“

6. One day, on my twitter…
“
@florent_champ can you teach me how to draw a custom view ?

7. @florent_champ please teach me how to draw a custom view ?
@florent_champ I saw a video on youtube, a man became rich by building
it own app, and displaying ads $$$$$

8. @florent_champ I need to draw custom views, but I don’t know where to start
@florent_champ Please !!!!!!! Please !!!!!!! Please !!!!!!!

9. K3v1n :
FORTNIGHT <3 <3
Love to code on Windows
Learn Android, want to become billionaire with an
Android app displaying ads
$
$
$
HTML is its favorite programming language

10. @k3v1n can you please stop spamming me ?

11. @florent_champ I will offer you beers 🍺🍺🍺
@k3v1n when can we start ? ☺☺☺

12. “WHERE DO I
START“ ? ComicsSansMS

13. “First thing, create a
extension of View“ Not
ComicsSansMS

14. class MyCustomView(context: Context) : View(context) {
override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
//when the view has a size
}
override fun onDraw(canvas: Canvas) {
//where we draw
}
}
Custom View

15. class MyCustomViewGroup(context: Context) : FrameLayout(context) {
init {
setWillNotDraw(false)
}
override fun onDraw(canvas: Canvas) {
//where we draw
}
}
Custom ViewGroup

16. class MyCustomViewGroup(context: Context) : FrameLayout(context) {
override fun dispatchDraw(canvas: Canvas) {
//where we draw
}
}
Custom ViewGroup

17. “Next thing you need to
know : Paint“

18. “YEEES !
I ALREADY KNOW PAINT“

22. Paint
The Paint class holds the style and color
information about how to draw geometries,
text and bitmaps.
https://developer.android.com/reference/android/graphics/Paint

23. PAINT - Style
FILL
FILL AND
STROKE
STROKE
paint.setStyle(FILL)
paint.setStyle(STROKE)
paint.setStyle(FILL_AND_STROKE)

24. PAINT - StrokeCap
BUTT
SQUARE
ROUND
paint.setStrokeCap(BUTT)

25. PAINT - Stroke Width
paint.setStrokeWidth(3)
1px
2px
3px

26. PAINT - Stroke Join
BEVEL
SQUARE
ROUND
paint.setStrokeJoin(BEVEL)
paint.setStrokeJoin(ROUND)
paint.setStrokeJoin(SQUARE)

27. “And with this paint, you
can draw shapes on a
canvas“

28. Canvas
The Canvas class holds the "draw" calls. 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).
https://developer.android.com/reference/android/graphics/Canvas

29. val paint = Paint().apply{
color = Color.WHITE
}
fun onDraw(canvas: Canvas) {
canvas.drawRect(0, 0, 30, 10, paint)
}
Draw a Rect
30
10

30. val paint = Paint().apply{
color = Color.WHITE
}
fun onDraw(canvas: Canvas) {
canvas.drawRect(0, 0, 30, 10, paint)
}
Draw a Rect
30
10
Values in pixels !

31. Draw a Rect
30
10
val myRect = Rect()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
myRect.right = width
myRect.bottom = height
}
fun onDraw(canvas: Canvas) {
canvas.drawRect(myRect, paint)
}

32. Draw a Circle
canvas.drawCircle(cx: float, cy: float, radius: float, paint: Paint)
fun onDraw(canvas: Canvas) {
canvas.drawCircle(100, 100, 15, paint)
}
30
15

33. Draw a Line
canvas.drawLine(startX: float, startY: float, endX: float,
endY: float, paint: Paint)
fun onDraw(canvas: Canvas) {
canvas.drawLine(0, 30, 100, 50, paint)
}
0,30
100,50

34. Draw a Line
init {
paint.setStrokeWidth(10)
paint.setStrokeCap(ROUND)
}
fun onDraw(canvas: Canvas) {
canvas.drawLine(0, 30, 100, 50, paint)
}
0,30
100,50

35. Draw a Custom Shape
val path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

36. Everything is a shape !
Google fit

37. Everything is a shape !
Line + StrokeCap round
Arcs
Lines
Rectangle

38. “SO CANVAS IS
USELESS ?“

39. Canvas Transformations
TRANSLATION
canvas.translate(x, y)
SCALE
ROTATION
canvas.scale(x, y)
canvas.scale(x, y, pivotX, pivotY)
canvas.rotate(degrees)
canvas.rotate(degrees, pivotX, pivotY)

40. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.drawRect(myRect, paint)
}
0 100
100

41. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
}
0 100
100
0

42. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100

43. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100
0

44. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100
new 0

45. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100
0

46. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100
0

47. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100

48. Translations
0 100
100
0 100
100
Without restore With restore

49. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(10, 0)
canvas.save()
canvas.translate(90, 0)
canvas.drawRect(myRect, paint)
canvas.restore()
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100

50. Translations
val myRect = Rect(5, 5, 100, 90)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
canvas.translate(10, 0)
canvas.save()
canvas.translate(90, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
canvas.drawCircle(50, 50, 15, paint)
}
0 100
100

51. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

52. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

53. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

54. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

55. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

56. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

57. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

58. Translations + rotations
val myRect = Rect(0, 0, 10, 10)
fun onDraw(canvas: Canvas) {
val count = canvas.save()
for(angle in 0..360 step 30) {
canvas.rotate(angle)
canvas.translate(100, 0)
canvas.drawRect(myRect, paint)
canvas.restoreToCount(count)
}
}
Center

59. “I NEED TO DRAW
TEXT BY HAND ?“

60. val paint = Paint().apply{
color = Color.parseColor("#3E3E3E")
typeface = Typeface.DEFAULT_BOLD
textSize = 24f //px
}
fun onDraw(canvas: Canvas) {
canvas.drawText("android", 10, 10, paint)
}
Draw Text
android

61. val paint = Paint().apply{
color = Color.parseColor("#3E3E3E")
typeface = Typeface.DEFAULT_BOLD
textSize = 24f //px
}
fun onDraw(canvas: Canvas) {
canvas.drawText("android KitKat Lollipop Marshmallow Nougat
Oreo",
10, 10, paint)
}
Draw Text
android KitKat Lollipop Marshmal

62. “I JUST HAVE TO ADD
n ON MY TEXT !“

65. StaticLayout
StaticLayout is a Layout for text that will not be edited after it is laid
out. Use DynamicLayout for text that may change.
This is used by widgets to control text layout. You should not need to
use this class directly unless you are implementing your own widget
or custom display object, or would be tempted to call
Canvas.drawText() directly.
https://developer.android.com/reference/android/text/StaticLayout

66. StaticLayout
StaticLayout(source: CharSequence,
paint: TextPaint,
width: Int,
align: Layout.Alignment,
spacingmult: Float,
spacingadd: Float,
includepad: Boolean)
https://developer.android.com/reference/android/text/StaticLayout

67. val paint = Paint().apply{
color = Color.parseColor("#3E3E3E")
typeface = Typeface.DEFAULT_BOLD
textSize = 24f //px
}
fun onDraw(canvas: Canvas) {
canvas.drawText("android KitKat Lollipop Marshmallow Nougat
Oreo",
10, 10, paint)
}
Draw Text
android KitKat Lollipop Marshmal

68. val paint = TextPaint().apply{
color = Color.parseColor("#3E3E3E")
typeface = Typeface.DEFAULT_BOLD
textSize = 24f //px
}
var text = "android KitKat Lollipop Marshmallow Nougat Oreo"
var staticLayout: StaticLayout? = null
Draw Text
android KitKat Lollipop Marshmal

69. override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val textWidth = Math.min(width, textPaint.measureText(text).toInt())
//warning : allocation ondraw, don’t do this
staticLayout = StaticLayout(text, textPaint, textWidth,
Layout.Alignment.ALIGN_NORMAL, 1.0f, 0f, false)
staticLayout!!.draw(canvas)
}
Draw Text
android KitKat Lollipop
Marshmallow Nougat
Oreo
Text Width

70. “YESSS !!! I CAN DRAW
ALL MY VIEWS !!!!!“

71. “mmm can you draw
this ?“

72. CAN YOU DRAW THIS ?
Material Design 2 - ShrineGoogle Fit

73. CAN YOU DRAW THIS ?
Google Fit

74. “For 90% of cases, you will need a
custom shape, so let’s see what we can
do with Path?“
“

75. Path
The Path class encapsulates compound (multiple contour) geometric
paths consisting of straight line segments, quadratic curves, and
cubic curves. It can be drawn with canvas.drawPath(path, paint),
either filled or stroked (based on the paint's Style), or it can be used
for clipping or to draw text on a path.
https://developer.android.com/reference/android/graphics/Path

76. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

77. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

78. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

79. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

80. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

81. Draw a Custom Shape
var path = Path()
fun onSizeChanged(width:Int, height: Int,
oldWidth: Int, oldHeight: Int) {
path.reset()
path.move(0,0)
path.lineTo(width, height)
path.lineTo(0, height)
path.close()
}
fun onDraw(canvas: Canvas) {
canvas.drawPath(path, paint)
}
Width
height

82. Draw a Custom Shape
Material Design Study
Shrine

83. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

84. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

85. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

86. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

87. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

88. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

89. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

90. Draw a Custom Shape
path.reset()
path.moveTo(0, 0)
path.lineTo(90, 0)
path.lineTo(100, 10)
path.lineTo(100, 100)
path.lineTo(0, 100)
path.close()
0 100
100

91. Draw a Custom Shape
???
???

92. Draw a Custom Shape
0°
-90°

93. Draw a Custom Shape
0°
-90°
90°
StartAngle = -90
SweepAngle = 90
80
80
100
30
10
10

94. Draw a Custom Shape
0°
-90°
80
80
100
30
10
10
StartAngle = -90
SweepAngle = 90
Center = (80, 30)
Radius = 20
Rect =
left: 80-20
top: 30-20
right: 80+20
bottom: 30+20

95. Draw a Custom Shape
0°
-90°
80
80
100
30
10
10
Center = (80, 30)
Radius = 20
Rect =
left: 80-20
top: 30-20
right: 80+20
bottom: 30+20
path.reset()
path.moveTo(10, 10)
path.lineTo(80, 10)
//radius = 20
path.arcTo(Rect(80, 0, 100, 20), -90, 90)
path.lineTo(100, 80)
path.lineTo(10, 80)
path.close()
StartAngle = -90
SweepAngle = 90
StartAngle
SweepAngle

96. Draw a Custom Shape
path.reset()
path.moveTo(10, 10)
path.lineTo(80, 10)
path.arcTo(Rect(80, 0, 100, 20), -90, 90)
path.lineTo(100, 80)
path.lineTo(10, 80)
path.close()

97. “and now, you can add
some elevation“

98. Draw a Custom Shape
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
outlineProvider = object: ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) {
outline?.setConvexPath(path)
}
}
}

99. Draw a Custom Shape
Material Design Study
Owl

100. “another way to draw
curves“

101. Draw a Custom Shape
path.quadTo(quadX, quadY, endX, endY)
Quadratic curve
endX, endY

102. Draw a Custom Shape
path.cubicTo(bezierX1, bezierY1, bezierX2, bezierY2, endX, endY)
Bezier curve
endX, endY

103. “And now, we can animate
this“

104. Animate Shapes
Google FitAndroid OK… that’s a sample

105. var rect = RectF(120f, 120f, 400f, 400f)
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawRect(rect, paint)
}
Animations

106. var rect = RectF(120f, 120f, 400f, 400f)
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawRect(rect, paint)
}
fun animateMe(){
ValueAnimator.ofFloat(rect.right, 700f).apply{
addUpdateListener{
rect.right = it.animatedValue as Float
invalidate()
}
start()
}
}
Animations

107. var rect = RectF(120f, 120f, 400f, 400f)
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawRect(rect, paint)
}
fun animateMe(){
ValueAnimator.ofFloat(rect.right, 700f).apply{
addUpdateListener{
rect.right = it.animatedValue as Float
invalidate()
}
start()
}
}
Animations

108. Animations
Arc1
Arc2
Arc3
Background Arc
5° 25°
6°
8°
110°
300°
0° 360°
Start Angle Final Angle
Current Angle

109. class Arc(val startAngle: Float, val finalAngle: Float, val color: Int) {
val rect = RectF()
val radius = 200f
var currentAngle = 5f
}
Animations

110. class Arc(val startAngle: Float, val finalAngle: Float, val color: Int) {
val rect = RectF()
val radius = 200f
var currentAngle = 5f
}
Animations
StartAngle
FinalAngle
Color
Radius

111. class Arc(…) {
…
fun setup(parentWidth: Int, parentHeight: Int){
val centerX = parentWidth/2f
val centerY = parentHeight / 2f
rect.set(centerX - radius, centerY - radius,
centerX + radius, centerY + radius)
}
Animations
Radius
+

112. class Arc(…) {
…
fun onDraw(paint: Paint, canvas: Canvas){
paint.color = color //update current drawing color
canvas.drawArc(rect, -90f, angleToDraw, false, paint)
}
}
Animations
-90

113. class ArcsView(context: Context, attributes: AttributeSet) : View(context, attributes) {
val paint = Paint().apply {
strokeWidth = 30f
style = Paint.Style.STROKE
strokeCap = Paint.Cap.ROUND
isAntiAlias = true
}
Animations

114. class ArcsView(context: Context, attributes: AttributeSet) : View(context, attributes) {
val paint = Paint().apply {
strokeWidth = 30f
style = Paint.Style.STROKE
strokeCap = Paint.Cap.ROUND
isAntiAlias = true
}
Animations

115. Anti Aliasing
Disabled Enabled

116. “
I always disable it
in fortnite

117. “
It slow down
my PC

118. class ArcsView … {
val arcs = listOf<Arc>(
Arc(8f, 300f, Color.parseColor("#FA8A26")),
Arc(6f, 110f, Color.parseColor("#F5464E")),
Arc(5f, 25f, Color.parseColor("#6498F4"))
)
Animations

119. class ArcsView … {
val arcs = listOf<Arc>(
Arc(8f, 300f, Color.parseColor("#FA8A26")),
Arc(6f, 110f, Color.parseColor("#F5464E")),
Arc(5f, 25f, Color.parseColor("#6498F4"))
)
val arcBackground = Arc(0f,360f, Color.parseColor("#EBEDEB"))
.apply {
currentAngle = 360f
}
Animations

120. class ArcsView … {
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
arcBackground.setup(w, h)
arcs.forEach {
it.setup(w, h)
}
}
Animations

121. class ArcsView … {
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
arcBackground.onDraw(paint, canvas)
arcs.forEach {
it.onDraw(paint, canvas)
}
}
Animations

122. class ArcsView … {
fun animateMe() {
arcs.forEach { arc ->
ValueAnimator.ofFloat(arc.startAngle, arc.finalAngle)
.apply {
duration = 700
addUpdateListener {
arc.currentAngle = it.animatedValue as Float
invalidate()
}
}.start()
}
}
}
Animations

123. The lasts steps

124. Lasts steps
Measurement Gesture

125. Gesture
Example : click on a rect
- event.action is ActionDown
- next event.action is ActionUp
- difference touch X/Y is small
- delay is > 200ms
- the rect contains the point X/Y
Override View.onTouch(motionEvent)

126. Override View.onTouch(motionEvent)
Example : click on a rect
- use GestureDetector.SimpleOnGestureListener.
- onSingleTapUp
- the rect contains the point X/Y
Gesture

127. “A last thing, do you know
PorterDuff ?“

128. PorterDuff
SRC SRC_OUT SRC_OVERSRC_IN
canvas.drawBitmap(destinationImage, 0, 0, paint)
paint.setXfermode(PorterDuffXfermode(mode))
canvas.drawBitmap(sourceImage, 0, 0, paint)
DST DST_INDST_OUT DST_OVER

129. “
https://github.com/florent37/ShapeOfView
<com.github.florent37.shapeofview.shapes.CutCornerView
android:id="@+id/clipCorner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp"
android:elevation="4dp"
app:shape_cutCorner_topLeftSize="20dp">
<!-- YOUR CONTENT -->
</com.github.florent37.shapeofview.shapes.CutCornerView>

130. “
https://github.com/florent37/ShapeOfView
<com.github.florent37.shapeofview.shapes.DiagonalView
android:layout_width="match_parent"
android:layout_height="100dp"
android:elevation="4dp"
app:shape_diagonal_angle="10"
app:shape_diagonal_position="bottom">
<!-- YOUR CONTENT —>
</com.github.florent37.shapeofview.shapes.DiagonalView>

131. “
Thank you Florent
I’m ready to code
my custom views
(and earn $$$)
🍺🍺🍺

132. THANKS!
Florent37
florent_champ
Slack : Android Dev FR
http://bit.ly/AndroidDevFr