connecting elements with drawn line

Question

I'm trying to make some view which will allow user to connect some elements with drawn line.

E.g. on image there are a couple of TextViews, user draw line from one to another and if it connected correctly (text1 to text3), line will stay.

Right now I've implemented custom view, it draw line, which follow your finger:

public class FingerLineView extends View {
    private final Paint mPaint;
    private float startX;
    private float startY;
    private float endX;
    private float endY;

    public FingerLineView(Context context) {
        this(context, null);
    }

    public FingerLineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.STROKE);
        mPaint.setColor(Color.RED);
    }

    @Override protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawLine(startX, startY, endX, endY, mPaint);
    }

    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                startX = event.getX();
                startY = event.getY();
                // Set the end to prevent initial jump 
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                endX = event.getX();
                endY = event.getY();
                invalidate();
                break;
        }
        return true;
    }
}

This is how it works:

But I don't know how to correctly "connect" it with view elements like TextView.

Should I do it with completely custom view or there are some better ways to do so?

Answer 1

A canvas is more powerful than you maybe know. ;)
Use its drawText-method. Great performance, easy to use and 100% customizeable.

EDIT: Here's a small example code, the calculation is just dummy, you have to positionate it where ever you need it:

public class FingerLineView extends View {
private final Paint mPaint;
private final Paint mPaintText;
private float startX;
private float startY;
private float endX;
private float endY;

public FingerLineView(Context context) {
    this(context, null);
}

public FingerLineView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setColor(Color.RED);
    mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintText.setColor(Color.BLACK);
    mPaintText.setTextSize(30);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawLine(startX, startY, endX, endY, mPaint);
    canvas.drawText("TEXT", startX - mPaintText.measureText("TEXT")/2, startY - 30, mPaintText);
    canvas.drawText("TEXT", endX - mPaintText.measureText("TEXT")/2, endY - 30, mPaintText);
}

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = event.getX();
            startY = event.getY();
            // Set the end to prevent initial jump
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            endX = event.getX();
            endY = event.getY();
            invalidate();
            break;
    }
    return true;
}

}