0

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.

1 Answers1

0

So the following process you would like to take would be to recognise when a user puts a finger down, Motion_Event.ACTION_DOWN, moves along the screen Motion_Event.ACTION_MOVE and lifts there finger up Motion_Event.ACTION_MOVE.

For more information on the above see the accepted answer here

What you want to do is if in Motion_Event.ACTION_DOWN the user is inside a view (see here for more info) start drawing a line.

Then in Motion_Event.ACTION_MOVE carry on drawing the line until they stop.

In Motion_Event.ACTION_UP if they are in another view do what you gotta do. If they arent then you erase the line and pretend it never happened.

Community
  • 1
  • 1
ilovepjs
  • 604
  • 3
  • 8
  • Thanks - that definitely helped clear things up!. Would you be able to show how the line can be drawn from one view to another. When I have tried, the line cannot move out of the first views layout boundaries. Do I need to draw the line on top of all the other view? In which case how do I do that? –  Oct 13 '13 at 17:34
  • @RiThBo have a google and search around if you are still stuck post antoher question, [heres a start](http://stackoverflow.com/questions/3616676/how-to-draw-a-line-in-android/5847729#5847729). Please mark the answer as accepted if it helped to close the question – ilovepjs Oct 13 '13 at 18:05
  • I have searched around a lot. I know how to draw a line with the canvas.drawLine(). Part of this question was to solve the problem I am having of the line not being drawn to the next view. The line cannot be drawn past the layout boundaries of the first view, so I cannot draw a line between the two views. –  Oct 13 '13 at 18:15
  • 1
    post your code, what context are you passing into your canvas, are you not passing in the activty (the whole screen) or the view ... from googling i found [this](http://stackoverflow.com/questions/13616223/android-draw-line-between-two-views) it seems to match your question – ilovepjs Oct 13 '13 at 18:43
  • Thanks for the link. I have done something like this already. The problem now is because I am using a `TableLayout`. I would like to draw a line between views INSIDE of the`TableLayout`. I can draw a line from one view to another, but not inside the layout. –  Oct 13 '13 at 19:43
  • I have added some of my code. At the moment, no line is being drawn as far as I can see. –  Oct 13 '13 at 20:01