This document provides guidance on custom charting in Android by breaking down the drawing process into layers. It discusses using a Canvas and Paint objects to draw primitives like rectangles, circles, and text. Key aspects covered include calculating marker positions, drawing gradients, guidelines, lines between markers, week labels, and scales. The document encourages learning the main Canvas and Paint APIs and breaking complex views into separate drawing functions for each layer.

1. Charting Like a Pro
By Guy Griv
@guygriv @guy.griv @grivos

5. Custom View
override fun onDraw(canvas: Canvas) {
canvas.drawRect()
canvas.drawRoundRect()
canvas.drawPath()
canvas.drawText()
canvas.drawCircle()
paint.style
paint.color
paint.strokeWidth
paint.pathEffect
paint.shader
}
Paint * Canvas = ∞

6. Example

7. onDraw Breakdown
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

8. Calculate Markers Positions
private fun calcPositions(markers: List<Marker>) {
val max = markers.maxBy { it.value }
val min = markers.minBy { it.value }
pxPerUnit = chartHeight / (max - min)
zeroY = max * pxPerUnit + paddingTop
val step = (width - 2 * padding - scalesWidth) / (markers.size - 1)
for ((i, marker) in markers.withIndex()) {
val x = step * i + paddingLeft
val y = zeroY - entry.value * pxPerUnit
marker.currentPos.x = x
marker.currentPos.y = y
}
}

9. drawGradient()
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

10. drawGradient()
private fun drawGradient(canvas: Canvas) {
path.reset()
path.moveTo(paddingLeft, zeroY)
for (marker in markers) {
path.lineTo(marker.targetPos.x, entry.targetPos.y)
}
// close the path
path.lineTo(markers.last().targetPos.x, zeroY)
path.lineTo(paddingLeft, zeroY)
canvas.drawPath(path, gradientPaint)
}
// prepare the gradient paint
val colors = intArrayOf(colorStart, colorEnd))
val gradient = LinearGradient(
0f, paddingTop, 0f, zeroY, colors, null, CLAMP
)
gradientPaint.style = FILL
gradientPaint.shader = gradient

11. drawGuidelines()
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

12. drawGuidelines()
// prepare the guideline paint
dottedPaint.style = STROKE
dottedPaint.strokeWidth = DOTTED_STROKE_WIDTH_DP
dottedPaint.pathEffect = DashPathEffect(floatArrayOf(INTERVAL, INTERVAL), 0f)
private fun drawGuidelines(canvas: Canvas) {
for (i in 0..markers.lastIndex step 7) {
val marker = markers[i]
guidelinePath.reset()
guidelinePath.moveTo(entry.currentPos.x, paddingTop)
guidelinePath.lineTo(entry.currentPos.x, zeroY)
canvas.drawPath(guidelinePath, dottedPaint)
}
}

13. drawLineAndMarkers()
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

14. private fun drawLineAndMarkers(canvas: Canvas) {
var previousMarker: Entry? = null
for (marker in markers) {
if (previousMarker != null) {
// draw the line
drawLine(
canvas,
previousMarker.currentPos,
marker.currentPos
)
}
previousMarker = marker
// draw the marker
canvas.drawCircle(
entry.currentPos.x,
entry.currentPos.y,
pointRadius,
pointPaint
)
}
}
drawLineAndMarkers()

15. drawWeeks()
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

16. private fun drawWeeks(canvas: Canvas) {
for ((i, week) in weeks.withIndex()) {
textPaint.getTextBounds(week, 0, week.length, rect)
val x = middle(i)
val y = zeroY + rect.height()
val halfWidth = rect.width() / 2f
val halfHeight = rect.height() / 2f
val left = x - halfWidth - padding
val top = y - halfHeight - padding
val right = x + halfWidth + padding
val bottom = y + halfHeight + padding
rect.set(left, top, right, bottom)
paint.color = bgColor
paint.style = FILL
canvas.drawRoundRect(rect, radius, radius, paint)
paint.color = strokeColor
paint.style = STROKE
canvas.drawRoundRect(rect, radius, radius, paint)
canvas.drawText(week, x, keyY, textPaint)
}
}
drawWeeks()

17. drawScales()
override fun onDraw(canvas: Canvas) {
drawGradient(canvas)
drawGuidelines(canvas)
drawLineAndMarkers(canvas)
drawWeeks(canvas)
drawScales(canvas)
}

18. private fun drawScales(canvas: Canvas) {
val x = markers.last().currentPos.x + padding
for (scale in scales) {
val y = zeroY - scale * pxPerUnit
val formatted = NumberFormat.getIntegerInstance().format(scale)
canvas.drawText(formatted, x, y, textPaint)
}
}
drawScales()

19. Result

20. Summary
• Don’t be afraid of building a custom view (when needed)
• Learn about the main Canvas and Paint APIs
• Break the design down to its layers

21. Thank You!
@guygriv @guy.griv @grivos