Interacting with Composable Canvas

Making a custom view using Android Canvas is associated with a big challenge. After all, it is this scary and complicated math that controls everything, and we usually want to reach for simpler solutions. In this session, we will learn how to create a beautiful, animated, and interactive bar chart using a jetpack compose canvas. I will guide you through the scary math and try to convince you there is nothing to be scared about. With jetpack compose, UI is easier to write and test, even the canvas.

Transcript

1. Interact with @Composable Canvas Piotr Prus Mobile Tech Lead @Airly GDG 3City Organizer
2. • Android Canvas recap • Composable Canvas • Key di ff erences • Implementation • Interaction • Animation • State management • Test composable Agenda:
3. Canvas coordinate system
4. Canvas coordinate system X Y
5. Canvas coordinate system X Y distance distance
6. Canvas coordinate system X Y distance distance
7. Draw schema
8. Draw schema Start and end padding
9. Draw schema Top padding Bottom padding
10. Draw schema Draw area
11. Canvas draw functions • drawRect() • drawOval() • drawLine() • drawText() • drawBitmap() • drawPath()
12. Canvas draw functions • drawRect() • drawOval() • drawLine() • drawText() • drawBitmap() • drawPath()
13. Canvas draw functions • drawRect() • drawOval() • drawLine() • drawText() • drawBitmap() • drawPath()
14. Composable Canvas @Composable fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit) = Spacer(modifier.drawBehind(onDraw)) @Composable fun MyCanvas() { Box(modifier = Modifier .size(100.dp) .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) }) }
15. Composable Canvas @Composable fun MyCanvas() { Box(modifier = Modifier .size(100.dp) .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) }) } Result:
16. Composable Canvas Result: @Composable fun MyCanvas() { Box(modifier = Modifier .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) } ) }
17. Composable Canvas @Composable fun MyCanvas() { Box(modifier = Modifier .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) } ) } You MUST specify size with modi fi er, whether with exact sizes via Modi fi er.size modi fi er, or relative to parent, via Modi fi er. fi llMaxSize, ColumnScope.weight, etc. If parent wraps this child, only exact sizes must be speci fi ed.
18. Composable Canvas @Composable fun MyCanvas() { Box(modifier = Modifier .size(100.dp) .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) } ) { Box( modifier = Modifier .size(20.dp) .background(color = Color.Red) ) } } Result:
19. Composable Canvas @Composable fun MyCanvas() { Box(modifier = Modifier .size(100.dp) .background(color = Color.White) .drawBehind { drawRect(color = Color.Blue, size = Size(width = 20f, height = 20f)) } ) { Box( modifier = Modifier .size(20.dp) .background(color = Color.Red) .align(Alignment.BottomEnd) ) } } Result:
20. Android view Canvas vs Composable canvas val density = LocalDensity.current val horizontalPadding = with(density) { 20.dp.toPx() } fun dp2px(resource: Resources, dp: Int): Int { return TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, dp.toFloat(), resource.getDisplayMetrics()) .toInt() } private fun dpToPixel(dp: Float): Float { val metrics: DisplayMetrics = this.getResources().getDisplayMetrics() return dp * (metrics.densityDpi / 160f) }
21. Android view Canvas vs Composable canvas class CustomView(context: Context?, attr: AttributeSet?) : View(context, attr) { private var width = 0 private var height = 0 fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { this.width = w this.height = h super.onSizeChanged(w, h, oldw, oldh) } fun onDraw(canvas: Canvas) { canvas.drawText("TEST", width / 2, height / 2, paint) } } @Composable fun MyCanvas() { Canvas(modifier = Modifier, onDraw = { val width = size.width val height = size.height }) }
22. drawText()
23. drawText() Missing in @Composable Canvas
24. @Composable Canvas has no function drawText 😞 android.graphics.Canvas has function drawText 🙂 Canvas() { this.drawContext.canvas.nativeCanvas.drawText( “Text on canvas”, drawPadding + index.times(distance), size.height, textPaint ) } } val textPaint = Paint().apply { color = MaterialTheme.colors.onPrimary.toArgb() textAlign = Paint.Align.CENTER this.textSize = textSize typeface = Typeface.DEFAULT_BOLD }
25. Feature request https://issuetracker.google.com/issues/190787898
26. Implementation
27. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .horizontalScroll(rememberScrollState()) ) { val density = LocalDensity.current val horizontalPadding = with(density) { 12.dp.toPx() } val distance = with(density) { 26.dp.toPx() } val calculatedWidth = with(density) { (distance.times(list.size) + horizontalPadding.times(2)).toDp() } } }
28. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .horizontalScroll(rememberScrollState()) ) { val density = LocalDensity.current val horizontalPadding = with(density) { 12.dp.toPx() } val distance = with(density) { 26.dp.toPx() } val calculatedWidth = with(density) { (distance.times(list.size) + horizontalPadding.times(2)).toDp() } } }
29. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .horizontalScroll(rememberScrollState()) ) { val density = LocalDensity.current val horizontalPadding = with(density) { 12.dp.toPx() } val distance = with(density) { 26.dp.toPx() } val calculatedWidth = with(density) { (distance.times(list.size) + horizontalPadding.times(2)).toDp() } } }
30. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .horizontalScroll(rememberScrollState()) ) { val density = LocalDensity.current val horizontalPadding = with(density) { 12.dp.toPx() } val distance = with(density) { 26.dp.toPx() } val calculatedWidth = with(density) { (distance.times(list.size) + horizontalPadding.times(2)).toDp() } } }
31. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .horizontalScroll(rememberScrollState()) ) { val density = LocalDensity.current val horizontalPadding = with(density) { 12.dp.toPx() } val distance = with(density) { 26.dp.toPx() } val calculatedWidth = with(density) { (distance.times(list.size) + horizontalPadding.times(2)).toDp() } } }
32. @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) { Row(Modifier) { . . . Canvas( modifier = Modifier .fillMaxHeight() .width(calculatedWidth)){ // Draw functions go here } }
33. // Draw scope val lineDistance = size.height.minus(smallPadding.times(2)).div(4) repeat(5) { drawLine( color = Color.Gray, start = Offset(0f, smallPadding.plus(it.times(lineDistance))), end = Offset(size.width, smallPadding.plus(it.times(lineDistance))) ) }
34. // Draw scope val lineDistance = size.height.minus(smallPadding.times(2)).div(4) repeat(5) { drawLine( color = Color.Gray, start = Offset(0f, smallPadding.plus(it.times(lineDistance))), end = Offset(size.width, smallPadding.plus(it.times(lineDistance))) ) }
35. // Draw scope val lineDistance = size.height.minus(smallPadding.times(2)).div(4) repeat(5) { drawLine( color = Color.Gray, start = Offset(0f, smallPadding.plus(it.times(lineDistance))), end = Offset(size.width, smallPadding.plus(it.times(lineDistance))) ) }
36. // Draw scope val lineDistance = size.height.minus(smallPadding.times(2)).div(4) repeat(5) { drawLine( color = Color.Gray, start = Offset(0f, smallPadding.plus(it.times(lineDistance))), end = Offset(size.width, smallPadding.plus(it.times(lineDistance))) ) }
37. // Draw scope val lineDistance = size.height.minus(smallPadding.times(2)).div(4) repeat(5) { drawLine( color = Color.Gray, start = Offset(0f, smallPadding.plus(it.times(lineDistance))), end = Offset(size.width, smallPadding.plus(it.times(lineDistance))) ) }
38. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
39. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) } data class BarArea( val index: Int, val xStart: Float, val xEnd: Float, val value: Int )
40. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) } data class BarArea( val index: Int, val xStart: Float, val xEnd: Float, val value: Int ) val barAreas = list.mapIndexed { index, i -> BarArea( index = index, value = i, xStart = horizontalPadding + distance.times(index) - distance.div(2), xEnd = horizontalPadding + distance.times(index) + distance.div(2) ) }
41. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
42. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
43. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
44. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
45. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
46. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
47. barAreas.forEachIndexed { index, item -> val barHeight = item.value.times(scale).toFloat() drawRoundRect( color = skyBlue400, topLeft = Offset( x = horizontalPadding + distance.times(index) - barWidth.div(2), y = size.height - barHeight - smallPadding ), size = Size(barWidth, barHeight), cornerRadius = CornerRadius(cornerRadius) ) }
48. barAreas.forEachIndexed { index, item -> . . . this.drawIntoCanvas { canvas -> val textPositionY = chartAreaBottom - barHeight - smallPadding canvas.nativeCanvas.drawText( "${item.value}", horizontalPadding + distance.times(index), textPositionY, paint ) } }
49. barAreas.forEachIndexed { index, item -> . . . this.drawIntoCanvas { canvas -> val textPositionY = chartAreaBottom - barHeight - smallPadding canvas.nativeCanvas.drawText( "${item.value}", horizontalPadding + distance.times(index), textPositionY, paint ) } }
50. barAreas.forEachIndexed { index, item -> . . . this.drawIntoCanvas { canvas -> val textPositionY = chartAreaBottom - barHeight - smallPadding canvas.nativeCanvas.drawText( "${item.value}", horizontalPadding + distance.times(index), textPositionY, paint ) } }
51. barAreas.forEachIndexed { index, item -> . . . this.drawIntoCanvas { canvas -> val textPositionY = chartAreaBottom - barHeight - smallPadding canvas.nativeCanvas.drawText( "${item.value}", horizontalPadding + distance.times(index), textPositionY, paint ) } } val textSize = with(density) { 10.sp.toPx() } val paint = Paint().apply { color = 0xffff47586B.toInt() textAlign = Paint.Align.CENTER this.textSize = textSize }
53. Interaction MotionEvent / PointerInput
54. fun Modifier.pointerInput( key1: Any?, block: suspend PointerInputScope.() -> Unit ): Modifier = composed() { val density = LocalDensity.current val viewConfiguration = LocalViewConfiguration.current remember(density) { SuspendingPointerInputFilter(viewConfiguration, density) }.apply { LaunchedEffect(this, key1) { block() } } } Pointer input
55. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
56. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
57. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
58. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
59. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
60. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
61. @Composable fun Modifier.startGesture( onStart: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val touch = awaitFirstDown().also { it.consumeDownChange() } onStart(touch.position.x) } } } } } Pointer input
62. @Composable fun Modifier.tapOrPress( onStart: (offsetX: Float) -> Unit, onCancel: (offsetX: Float) -> Unit, onCompleted: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val tap = awaitFirstDown().also { it.consumeDownChange() } onStart(tap.position.x) val up = waitForUpOrCancellation() if (up == null) { onCancel(tap.position.x) } else { up.consumeDownChange() onCompleted(tap.position.x) } } } } } } Pointer input
63. @Composable fun Modifier.tapOrPress( onStart: (offsetX: Float) -> Unit, onCancel: (offsetX: Float) -> Unit, onCompleted: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val tap = awaitFirstDown().also { it.consumeDownChange() } onStart(tap.position.x) val up = waitForUpOrCancellation() if (up == null) { onCancel(tap.position.x) } else { up.consumeDownChange() onCompleted(tap.position.x) } } } } } } Pointer input
64. @Composable fun Modifier.tapOrPress( onStart: (offsetX: Float) -> Unit, onCancel: (offsetX: Float) -> Unit, onCompleted: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val tap = awaitFirstDown().also { it.consumeDownChange() } onStart(tap.position.x) val up = waitForUpOrCancellation() if (up == null) { onCancel(tap.position.x) } else { up.consumeDownChange() onCompleted(tap.position.x) } } } } } } Pointer input
65. @Composable fun Modifier.tapOrPress( onStart: (offsetX: Float) -> Unit, onCancel: (offsetX: Float) -> Unit, onCompleted: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val tap = awaitFirstDown().also { it.consumeDownChange() } onStart(tap.position.x) val up = waitForUpOrCancellation() if (up == null) { onCancel(tap.position.x) } else { up.consumeDownChange() onCompleted(tap.position.x) } } } } } } Pointer input
66. @Composable fun Modifier.tapOrPress( onStart: (offsetX: Float) -> Unit, onCancel: (offsetX: Float) -> Unit, onCompleted: (offsetX: Float) -> Unit ): Modifier { val interactionSource = remember { MutableInteractionSource() } return this.pointerInput(interactionSource) { forEachGesture { coroutineScope { awaitPointerEventScope { val tap = awaitFirstDown().also { it.consumeDownChange() } onStart(tap.position.x) val up = waitForUpOrCancellation() if (up == null) { onCancel(tap.position.x) } else { up.consumeDownChange() onCompleted(tap.position.x) } } } } } } Pointer input
67. Simple selection var selectedPosition by remember { mutableStateOf(0) } val selectedBar by remember(selectedPosition, barAreas) { derivedStateOf { barAreas.find { it.xStart < selectedPosition && selectedPosition < it.xEnd } } } Modifier.tapOrPress( onStart = { }, onCancel = { }, onCompleted = { selectedPosition = it } )
68. Stateful Simple selection var selectedPosition by remember { mutableStateOf(0) } val selectedBar by remember(selectedPosition, barAreas) { derivedStateOf { barAreas.find { it.xStart < selectedPosition && selectedPosition < it.xEnd } } } Modifier.tapOrPress( onStart = { }, onCancel = { }, onCompleted = { selectedPosition = it } )
69. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
70. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
71. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
72. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
73. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
74. Simple selection // in Draw scope if (selectedBar != null) { drawRoundRect( brush = Brush.verticalGradient( listOf( skyBlue400.copy(alpha = 0.3f), Color.Transparent ) ), topLeft = Offset( x = horizontalPaddingPx + distancePx.times(bar.index) - areaWidthPx.div(2), y = areaHeightPx.plus(topPaddingPx) - areaHeightPx ), size = Size(areaWidthPx, areaHeightPx), cornerRadius = CornerRadius(cornerRadiusPx) ) }
75. Animation
76. Jetpack Compose animation fl owchart
77. Jetpack Compose animation fl owchart
78. Jetpack Compose animation fl owchart
79. Jetpack Compose animation fl owchart
80. Jetpack Compose animation fl owchart
81. Jetpack Compose animation fl owchart
82. Animatable val animatable = remember { Animatable(0f) } ... //Modifier.tapOrPress onCompleted = { scope.launch { selectedPosition = it animatable.animateTo(1f) } } ... // draw scope drawRoundRect( brush = brush, topLeft = Offset( x = horizontalPadding + distance.times(selectedBar!!.index) - selectionWidth.div(2), y = chartAreaHeight - chartAreaHeight.times(animatable.value)), // use of animatable value size = Size(selectionWidth, chartAreaHeight), cornerRadius = CornerRadius(cornerRadius) )
83. Animatable val animatable = remember { Animatable(0f) } ... //Modifier.tapOrPress onCompleted = { scope.launch { selectedPosition = it animatable.animateTo(1f) } } ... // draw scope drawRoundRect( brush = brush, topLeft = Offset( x = horizontalPadding + distance.times(selectedBar!!.index) - selectionWidth.div(2), y = chartAreaHeight - chartAreaHeight.times(animatable.value)), // use of animatable value size = Size(selectionWidth, chartAreaHeight), cornerRadius = CornerRadius(cornerRadius) )
84. Manage two selection
85. gestureStarted() tempSelection = xPosition tempAnimatable.animateTo(1) var selectedPosition by remember { mutableStateOf(0f) } var tempPosition by remember { mutableStateOf(-Int.MAX_VALUE.toFloat()) } val animatable = remember { Animatable(1f) } val tempAnimatable = remember { Animatable(0f) }
86. gestureStarted() tempSelection = xPosition tempAnimatable.animateTo(1) var selectedPosition by remember { mutableStateOf(0f) } var tempPosition by remember { mutableStateOf(-Int.MAX_VALUE.toFloat()) } val animatable = remember { Animatable(1f) } val tempAnimatable = remember { Animatable(0f) } gestureCanceled() tempSelection = -1 tempAnimatable.animateTo(0)
87. gestureStarted() tempSelection = xPosition tempAnimatable.animateTo(1) var selectedPosition by remember { mutableStateOf(0f) } var tempPosition by remember { mutableStateOf(-Int.MAX_VALUE.toFloat()) } val animatable = remember { Animatable(1f) } val tempAnimatable = remember { Animatable(0f) } gestureCanceled() tempSelection = -1 tempAnimatable.animateTo(0) gestureCompleted() animatable = tempAnimatable + animateTo(1) tempAnimatable = 0 selection = tempSelection tempSelection = -1
88. Final result:
89. Testing
90. Testing @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .testTag("BarChart") .horizontalScroll(rememberScrollState()) )
91. Testing @Composable fun BarChartCanvas(list: List<Int>, barSelected: (Int) -> Unit) Row(Modifier .fillMaxWidth() .padding(12.dp) .height(150.dp) .testTag("BarChart") .horizontalScroll(rememberScrollState()) )
92. Testing @get:Rule val composeTestRule = createComposeRule() @Test fun checkCanvasExistence() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { }) } composeTestRule.onNodeWithTag(testTag = "BarChart").assertExists() }
93. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
94. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
95. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
96. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
97. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
98. Testing @Test fun clickOnThirdElementOfList() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { click(position = Offset(distance, 1f)) } assertEquals(3, selectedItem.value) }
99. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
100. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
101. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
102. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
103. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
104. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
105. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
106. Testing @Test fun cancelSelectionOfThirdElement() { val list = mutableStateOf(listOf(1, 2, 3, 4, 5, 6, 7, 8)) val selectedItem = mutableStateOf(list.value.first()) val distance = with(composeTestRule.density) { (12.dp + 20.dp.times(3)).toPx() } composeTestRule.setContent { BarChartCanvas(list = list.value, barSelected = { selectedItem.value = it }) } composeTestRule.onNodeWithTag(testTag = "BarChart") .performGesture { down(Offset(distance, 1f)) } .performGesture { moveBy(Offset(distance, 0f)) } .performGesture { up() } assertEquals(1, selectedItem.value) }
107. Final thoughts • Drawing using Composable Canvas is very similar to Android View Canvas • drawText is missing in Compose version • Testing is easy and very readable • Animation has good documentation
108. Thanks for listening Piotr Prus Mobile Tech Lead @Airly GDG 3City Organizer
109. Questions? Piotr Prus Mobile Tech Lead @Airly GDG 3City Organizer