How to draw an arrow using android graphic class?

Question

How can i draw an arrow using the graphics class?

Im using android graphics class and basically im trying to show a path on a map. So i need to print an arrow head on the canvas. Help me to figure out!

Thank you!

This is one of the methods i have used to draw a line. i want to print an arrow head on the edge of each and every line.

//       ArrayList<Point> ArrayListPoints = new ArrayList<Point>(); // Assign the shortest path here

//       ArrayListPoints.add(new Point(262,100));
//       ArrayListPoints.add(new Point(262,165));
//       ArrayListPoints.add(new Point(346,165));
//       ArrayListPoints.add(new Point(420,165));

       ArrayList<Point> ArrayListPointsFINAL;

    ArrayListPointsFINAL = storePath.ArrayListPoints;

    if(ArrayListPointsFINAL == null){
        System.out.println("ArrayListPointsFINAL is NULL");
    }
    else{

    ArrayList<Float> ArrayList_X = new ArrayList<Float>();
     ArrayList<Float> ArrayList_Y = new ArrayList<Float>();
     //int size = get.ArrayListPoints.size();

    for(int i=0; i<ArrayListPointsFINAL.size(); i++){
        ArrayList_X.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).x)));
        ArrayList_Y.add(Float.parseFloat(String.valueOf(ArrayListPointsFINAL.get(i).y)));
          }   

    for(int i=1; i<ArrayList_X.size(); i++){
        Paint myPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        myPaint.setStrokeWidth(8/*1 /getResources().getDisplayMetrics().density*/);
        myPaint.setColor(0xffff0000);   //color.RED
       // myPaint.setStyle(myPaint);

       canvas.drawLine(ArrayList_X.get(i), ArrayList_Y.get(i), ArrayList_X.get(i-1), ArrayList_Y.get(i-1),myPaint);       

    }

Answer 1

Hope you'll still find this useful; here's how I draw an arrow head:

    private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) {

    paint.setStyle(Paint.Style.FILL);

    float deltaX = x1 - x0;
    float deltaY = y1 - y0;
    float frac = (float) 0.1;

    float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY);
    float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX);

    float point_x_2 = x1;
    float point_y_2 = y1;

    float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY);
    float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX);

    Path path = new Path();
    path.setFillType(Path.FillType.EVEN_ODD);

    path.moveTo(point_x_1, point_y_1);
    path.lineTo(point_x_2, point_y_2);
    path.lineTo(point_x_3, point_y_3);
    path.lineTo(point_x_1, point_y_1);
    path.lineTo(point_x_1, point_y_1);
    path.close();

    canvas.drawPath(path, paint);
}

Given a line with end points at p(x0, y0) and p(x1, y1), the method draws an arrow head with its vertex at p(x1, y1).

The variable

frac : 0 < frac < 1

determines the size of the arrow head.

Answer 2

When I used Igwe Kalu's solution, the size of the arrow head varied according to the distance between the points.

Here is my solution for making the arrow head a constant size, independent of the distance between the points.

private void fillArrow(Canvas canvas, float x0, float y0, float x1, float y1) {
    paint.setStyle(Paint.Style.FILL);

    float deltaX = x1 - x0;
    float deltaY = y1 - y0;
    double distance = Math.sqrt((deltaX * deltaX) + (deltaY * deltaY));
    float frac = (float) (1 / (distance / 30));

    float point_x_1 = x0 + (float) ((1 - frac) * deltaX + frac * deltaY);
    float point_y_1 = y0 + (float) ((1 - frac) * deltaY - frac * deltaX);

    float point_x_2 = x1;
    float point_y_2 = y1;

    float point_x_3 = x0 + (float) ((1 - frac) * deltaX - frac * deltaY);
    float point_y_3 = y0 + (float) ((1 - frac) * deltaY + frac * deltaX);

    Path path = new Path();
    path.setFillType(Path.FillType.EVEN_ODD);

    path.moveTo(point_x_1, point_y_1);
    path.lineTo(point_x_2, point_y_2);
    path.lineTo(point_x_3, point_y_3);
    path.lineTo(point_x_1, point_y_1);
    path.lineTo(point_x_1, point_y_1);
    path.close();

    canvas.drawPath(path, paint);
}