Mart Roosmaa

Bezier lines

At first glance drawing attractive bezier lines might be a bit taunting, but in reality there is nothing easier. The trick is using 2 colors to draw the lines. The chosen color for the line and a darker (depending on the overall background) version of it.

Then you need to set up the Paint objects, preferably not in the onDraw method as it would create more work for the GC. One Paint object will be used for drawing the border, the other for the line itself.

For example some good defaults for Paint objects are:

pLine = new Paint() {{
  setStyle(Paint.Style.STROKE);
  setAntiAlias(true);
  setStrokeWidth(1.5f);
  setColor(...); // Line color
}};

pLineBorder = new Paint() {{
  setStyle(Paint.Style.STROKE);
  setAntiAlias(true);
  setStrokeWidth(3.0f);
  setStrokeCap(Cap.ROUND);
  setColor(...); // Darker version of the color
}};

Then the actual drawing of the lines in the onDraw method would look something like this:

Path p = new Path();
Point mid = new Point();
// ...
Point start = ...;
Point end = ...;
mid.set((start.x + end.x) / 2, (start.y + end.y) / 2);

// Draw line connecting the two points:
p.reset();
p.moveTo(start.x, start.y);
p.quadTo((start.x + mid.x) / 2, start.y, mid.x, mid.y);
p.quadTo((mid.x + end.x) / 2, end.y, end.x, end.y);

canvas.drawPath(p, pLineBorder);
canvas.drawPath(p, pLine);

And presto! You’ve got yourself a nice bezier line.