Composing in your Canvas

Composing in your Canvas
With compose getting attraction and many apps moving towards it, it's time to see how we can draw and design complex yet beautiful UI using Canvas

In this talk,
1. We are going to see how to work with Basic out of box drawing for Canvas
2. How canvas works and is different from View system's canvas?
3. Draw a Custom UI with help for Compose's Canvas
4. Tips for better canvas drawings in Compose

I am telling you, let's make Mathematics fun to learn for developers!

Transcript

1. Maths 101. hi_man_shoe Himanshu Singh
2. • Google Developer Expert for Android/Kotlin • Android @ Clue • Open Source contributor • Speaker • And coffee maker while gradle builds hi_man_shoe Himanshu Singh About Me 2
3. Composing in your Canvas Maths 101. hi_man_shoe
4. Talk Agenda 1. 2. 3. 4. 5. Canvas 101 Basics Few real examples Scary Maths! Conclusion
5. “Anyone can put paint on a canvas, but only a true master can bring the painting to life” Canvas 101 5 Shaun Jeffrey
6. • Top Left (0,0) • Top Right (x,0) • Bottom Left (0,y) • Bottom Right (x,y) Phone as Canvas
7. • Left ? • Right ? Phone as Canvas
8. • Left (0 , y/2) • Right (x/2 , y/2) Phone as Canvas
9. 9 Canvas Basics
10. • Basic Canvas Setup in Compose @Composable fun MyCanvasDemo() { Canvas( modifier = Modifier .fillMaxSize() .padding(4.dp) ) { //draw shapes here } } Setup Compose Canvas
11. 11  DrawScope Scoped drawing Environment • drawLine - Draws line b’wn two given points • drawRect - Draws a rectangle • drawImage - Draws a ImageBitmap in Canvas • drawRoundRect - Draws a rounded border Rectangle • drawCircle - Draws a circle with given Radius • drawArc - Draws an Arc with given angles • drawPath - Draws a path mapped by us to give a custom UI • drawPoint - Draws point with given list of Offset.
12. 12  Real life example!
13. • Let’s make this a reality! Real Life example
14. • Let’s make this a reality! Real Life example
15. • Structure code @Composable fun Seekbar(modifier:Modifier = Modifier){ Box( modifier = modifier.size(200.dp) .padding(16.dp) ) { Canvas(modifier = Modifier.size(200.dp)) { //arc and thumb drawing } } } Real life example
16. Canvas(modifier = Modifier.size(200.dp)) { //arc and thumb drawing } Real life example
17. Canvas(modifier = Modifier.size(200.dp)) { drawProgress(width = 10F) drawThumb(size) } Real life example
18. Canvas(modifier = Modifier.size(200.dp)) { drawProgress(width = 10F) drawThumb(size) } Real life example
19. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
20. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
21. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
22. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
23. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
24. Coordinates mapping drawThumb
25. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
26. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
27. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
28. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
29. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
30. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
31. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
32. private fun DrawScope.drawProgress(width: Float) { drawArc( color = Color.Black, startAngle = 0.toFloat(), sweepAngle = 360.toFloat(), useCenter = false, style = Stroke( width = width, cap = StrokeCap.Round ) )} drawProgress
33. Angle placement StartAngle / SweepAngle
34. 34  Scary Maths.
35. Canvas(modifier = Modifier.size(200.dp)) { drawProgress(width = 10F) drawThumb(size) } Scary Maths
36. Canvas(modifier = Modifier.size(200.dp) .pointerInput(true) { detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends } ){ } ) { //drawing } Scary Maths
37. Canvas(modifier = Modifier.size(200.dp) .pointerInput(true) { detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends } ){ } ) { //drawing } Scary Maths
38. Canvas(modifier = Modifier.size(200.dp) .pointerInput(true) { detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends }){ }) { //drawing } Scary Maths
39. onDragStart = { offset -> dragAngle = canvasSize.getAngle(offset) } Scary Maths
40. onDragStart = { offset -> dragAngle = canvasSize.getAngle(offset) } Scary Maths
41. detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends }, onDrag = {pointerInputChange, offset-> val touchAngle = size.getAngle(pointerInputChange.position) }) Scary Maths
42. detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends }, onDrag = {pointerInputChange, offset-> val touchAngle = size.getAngle(pointerInputChange.position) }) Scary Maths
43. private fun IntSize.getAngle(offset: Offset) = ( atan2( y = center.x.minus(offset.x), x = center.y.minus(offset.y) ) * (180.toFloat().div(Math.PI.toFloat()))).toInt() Scary Maths
44. private fun IntSize.getAngle(offset: Offset) = ( atan2( y = center.x.minus(offset.x), x = center.y.minus(offset.y) ) * (180.toFloat().div(Math.PI.toFloat()))).toInt() Scary Maths
45. private fun IntSize.getAngle(offset: Offset) = ( atan2( y = center.x.minus(offset.x), x = center.y.minus(offset.y) ) * (180.toFloat().div(Math.PI.toFloat()))).toInt() Scary Maths
46. private fun IntSize.getAngle(offset: Offset) = ( atan2( y = center.x.minus(offset.x), x = center.y.minus(offset.y) ) * (180.toFloat().div(Math.PI.toFloat()))).toInt() Scary Maths
47. private fun IntSize.getAngle(offset: Offset) = ( atan2( y = center.x.minus(offset.x), x = center.y.minus(offset.y) ) * (180.toFloat().div(Math.PI.toFloat()))).toInt() Scary Maths
48. 48  I have the Angle. Uff. next what?
49. Dragged Position Angle
50. Dragged Position Angle cos(a)
51. Dragged Position Angle cos(a) Sin(a)
52. Dragged Position Angle (x , y) = (r * cos(a), r* sin(a)) cos(a) Sin(a)
53. detectDragGestures( onDragStart = { // do something when drag starts }, onDragEnd = { // do something when drag ends }, onDrag = {pointerInputChange, offset-> // something more here! val touchAngle = size.getAngle(pointerInputChange.position) }) Scary Maths
54. fun getCenter(radius: Float, touchAngle: Float) = Offset( x = ((radius) * cos(touchAngle)).plus(canvasCenter.x), y = ((radius) * sin(touchAngle)).plus(canvasCenter.y)) Angle
55. fun getCenter(radius: Float, touchAngle: Float) = Offset( x = ((radius) * cos(touchAngle)).plus(canvasCenter.x), y = ((radius) * sin(touchAngle)).plus(canvasCenter.y)) Angle
56. fun getCenter(radius: Float, touchAngle: Float) = Offset( x = ((radius) * cos(touchAngle)).plus(canvasCenter.x), y = ((radius) * sin(touchAngle)).plus(canvasCenter.y)) Angle
57. fun getCenter(radius: Float, touchAngle: Float) = Offset( x = ((radius) * cos(touchAngle)).plus(canvasCenter.x), y = ((radius) * sin(touchAngle)).plus(canvasCenter.y)) Angle
58. Final Position Angle (x , y) = (r * cos(a), r* sin(a)) cos(a) Sin(a)
59. 59  Finally Dragged Thumb!
60. private fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(size.width.div(2),0F) ) } drawThumb
61. 61  But yes, it will be only recomposed if its a state!
62. 62  Make it for all screens!
63. • Use percentage and relative number. • Don’t use hard coded values. • Draw things with relation to size of canvas. How can we make for all screens
64. 64  Example of scaling design!
65. fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(newX,newY) ) } drawThumb
66. fun DrawScope.drawThumb(size: Size) { drawCircle( color = Color.Blue, radius = 30F, center = Offset(newX,newY) ) } drawThumb hi_man_shoe
67. fun DrawScope.drawThumb(size: Size) { val radius = size.width * (0.5).toFloat() drawCircle( color = Color.Blue, radius = radius, center = Offset(newX,newY) ) } drawThumb hi_man_shoe
68. fun DrawScope.drawThumb(size: Size) { val radius = size.width * (0.5).toFloat() drawCircle( color = Color.Blue, radius = radius, center = Offset(newX,newY) ) } drawThumb hi_man_shoe
69. 69  Testing Canvas drawing!
70. • All drawings in one Canvas is one element. • Testing it will be one Composable • We can split it multiple components to make it different composables Testing Canvas Drawing hi_man_shoe
71. 71  Example!
72. Canvas(modifier = Modifier.size(200.dp)) { drawProgress(width = 10F) drawThumb(size) } Real life example
73. BoxWithConstraints(modifier = modifier.padding(Grid.Two)) { val size = // Size from main canvas Canvas(modifier = Modifier.testTag("testTag1")){} Canvas(modifier = Modifier.testTag("testTag2")){} } Testing Canvas hi_man_shoe
74. BoxWithConstraints(modifier = modifier.padding(Grid.Two)) { val size = // Size from main canvas Canvas(modifier = Modifier.testTag("testTag1")){} Canvas(modifier = Modifier.testTag("testTag2")){} } Testing Canvas hi_man_shoe
75. BoxWithConstraints(modifier = modifier.padding(Grid.Two)) { val size = // Size from main canvas Canvas(modifier = Modifier.testTag("testTag1")){} Canvas(modifier = Modifier.testTag("testTag2")){} } Testing Canvas hi_man_shoe
76. BoxWithConstraints(modifier = modifier.padding(Grid.Two)) { val size = // Size from main canvas Canvas(modifier = Modifier.testTag("testTag1")){} Canvas(modifier = Modifier.testTag("testTag2")){} } Testing Canvas hi_man_shoe
77. BoxWithConstraints(modifier = modifier.padding(Grid.Two)) { val size = // Size from main canvas Canvas(modifier = Modifier.testTag("testTag1")){} Canvas(modifier = Modifier.testTag("testTag2")){} } Testing Canvas hi_man_shoe
78. 78  Miscellaneous.
79. • To Access inner canvas we use drawContext.canvas.nativeCanvas. • Can be used for drawing Text. Miscellaneous.
80. github.com/Gurupreet/ComposeCookBook github.com/hi-manshu/ developer.android.com/jetpack/compose/graphics github.com/vinaygaba/Learn-Jetpack-Compose-By-Example Access: Resources.
81. Thank you! . hi_man_shoe