Drawing lines between views in a TableLayout

Posted by RiThBo on Stack Overflow See other posts from Stack Overflow or by RiThBo
Published on 2013-10-13T16:28:12Z Indexed on 2013/10/18 15:55 UTC
Read the original article Hit count: 407

Firstly - sorry if you saw my other question which I deleted. My question was flawed. Here is a better version

If I have two views, how do I draw a (straight) line between them when one of them is touched? The line needs to be dynamic so it can follow the finger until it reaches the second view where it "locks on". So, when view1 is touched a straight line is drawn which then follows the finger until it reaches view2.

I created a LineView class that extends view, but I don't how to proceed. I read some tutorials but none show how to do this. I think I need to get the coordinates of both view, and then create a path which "updates" on MotionEvent. I can get the coordinates and the ids of the views I want to draw a line between, but the line that I try to draw between them either goes above it, or the line does not reach past the width and height of the view.

Any advice/code/clarity would be much appreciated!

Here is some code:

My layout. I want to draw a line between two views contained in theTableLayout.#

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_game_relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TableLayout
        android:layout_marginTop="35dp"
        android:layout_marginBottom="35dp"
        android:id="@+id/tableLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <TableRow
            android:id="@+id/table_row_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <com.example.view.DotView
                android:id="@+id/game_dot_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

           <com.example.view.DotView
                android:id="@+id/game_dot_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

            <com.example.view.DotView
                android:id="@+id/game_dot_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />


        </TableRow>

        <TableRow
            android:id="@+id/table_row_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <com.example.view.DotView
                android:id="@+id/game_dot_7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

           <com.example.view.DotView
                android:id="@+id/game_dot_8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

            <com.example.dotte.DotView
                android:id="@+id/game_dot_9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp" />

        </TableRow>
  </TableLayout>

</RelativeLayout>

This is my LineView class. I use this to try and draw the actual line between the points.

public class LineView extends View {

    Paint paint = new Paint();

    float startingX, startingY, endingX, endingY;

    public LineView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub

        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(10);

    }

    public void setPoints(float startX, float startY, float endX, float endY) {

        startingX = startX;
        startingY = startY;
        endingX = endX;
        endingY = endY;
        invalidate();

    }

    @Override
    public void onDraw(Canvas canvas) {
        canvas.drawLine(startingX, startingY, endingX, endingY, paint);
    }

}

And this is my Activity.

public class Game extends Activity {

DotView dv1, dv2, dv3, dv4, dv5, dv6, dv7;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_game);

    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LOW_PROFILE);

    findDotIds();

    RelativeLayout rl = (RelativeLayout) findViewById(R.id.activity_game_relative_layout);
    LineView lv = new LineView(this);
    lv.setPoints(dv1.getLeft(), dv1.getTop(), dv7.getLeft(), dv7.getTop());
    rl.addView(lv);

     // TODO: Get the coordinates of all the dots in the TableLayout. Use view tree observer.   



}

private void findDotIds() {

    // TODO Auto-generated method stub
    dv1 = (DotView) findViewById(R.id.game_dot_1);
    dv2 = (DotView) findViewById(R.id.game_dot_2);
    dv3 = (DotView) findViewById(R.id.game_dot_3);
    dv4 = (DotView) findViewById(R.id.game_dot_4);
    dv5 = (DotView) findViewById(R.id.game_dot_5);
    dv6 = (DotView) findViewById(R.id.game_dot_6);
    dv7 = (DotView) findViewById(R.id.game_dot_7);

}

}

The views I want to draw lines between are in the TableLayout.

© Stack Overflow or respective owner

Related posts about android

Related posts about android-canvas