Question

I am trying to create app which is match text with appropriate images by pointing with line.

I want to create app exactly same which is shown in the below image:

can any one please give me an idea?

This is my main class:

public class MatchActivity extends Activity {
                    ArrayAdapter<String> listadapter;
                    float x1;
                    float y1;
                    float x2;
                    float y2;
                    @Override
                    public void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.main);
                        String[] s1 = { "smiley1", "smiley2", "smiley3" };
                        ListView lv = (ListView) findViewById(R.id.text_list);
                        ArrayList<String> list = new ArrayList<String>();
                        list.addAll(Arrays.asList(s1));
                        listadapter = new ArrayAdapter<String>(this,R.layout.rowtext, s1); 
                        lv.setAdapter(listadapter);
                        GridView gv = (GridView) findViewById(R.id.image_list);
                        gv.setAdapter(new ImageAdapter(this));
                        lv.setOnItemClickListener(new OnItemClickListener() {
                          public void onItemClick(AdapterView<?> arg0, View v, int arg2,
                                    long arg3){                   
                               x1=v.getX();
                               y1=v.getY();
                               Log.d("list","text positions x1:"+x1+" y1:"+y1);
                           }
                        });

                    gv.setOnItemClickListener(new OnItemClickListener() {
                        public void onItemClick(AdapterView<?> arg0, View v, int arg2,
                            long arg3){
                                  DrawView draw=new DrawView(MatchActivity.this);
                          x2=v.getX();
                          y2=v.getY();
                              draw.position1.add(x1);
                              draw.position1.add(y1);
                          draw.position2.add( x2);
                              draw.position2.add(y2);
                          Log.d("list","image positions x2:"+x2+" y2:"+y2);
                     LinearLayout ll=LinearLayout)findViewById(R.id.draw_line);  
                                    ll.addView(draw);

                               }
                            });

                    }

                        }

This is my drawing class to draw a line:

 public class DrawView extends View {
                  Paint paint = new Paint();
                  private List<Float> position1=new ArrayList<Float>();
                  private List<Float> position2=new ArrayList<Float>();;

                    public DrawView(Context context) {
                        super(context);
                        invalidate();
                        Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;

                    }

                    @Override
                    public void onDraw(Canvas canvas) {
                         super.onDraw(canvas);
                         Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);
                        assert position1.size() == position2.size();
                    for (int i = 0; i < position1.size(); i += 2) {
                        float x1 = position1.get(i);
                        float y1 = position1.get(i + 1);
                        float x2 = position2.get(i);
                        float y2 = position2.get(i + 1);
                                paint.setColor(Color.BLACK);
                        paint.setStrokeWidth(3);
                                canvas.drawLine(x1,y1, x2,y2, paint);
                        }
                    }

                }

My layout main.xml file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:gravity="center_horizontal">

    <ListView
        android:id="@+id/text_list"
        android:layout_width="150dp"
        android:layout_height="fill_parent" 
        />

    <LinearLayout
        android:id="@+id/draw_line"
        android:layout_width="150dp"
        android:layout_height="fill_parent"
        android:background="#cccccc" />

    <GridView
        android:id="@+id/image_list"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"
        android:columnWidth="150dp"/>


</LinearLayout>

My Logcat details:

First time selection of text and image:

10-19 10:42:23.672: D/Text list(653): Clicking on text co-ordinates are:0.0 ,151.0
10-19 10:42:25.831: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:42:25.861: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

Second time selection of text and image:

10-19 10:42:58.512: D/Text list(653): Clicking on text co-ordinates are:0.0 ,302.0
10-19 10:43:00.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,0.0
10-19 10:43:00.303: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

Third time selection of text and image:

10-19 10:43:24.962: D/Text list(653): Clicking on text co-ordinates are:0.0 ,0.0
10-19 10:43:26.144: D/Image list(653): Clicking on image co-ordinates are:0.0 ,320.0
10-19 10:43:26.261: D/onDraw()(653): In onDraw() co-ordinates of text position:[0.0, 151.0] image position:[0.0, 320.0]

Thanks in advance .

Answer 1

I would probably do this in a custom component, where you also render the images and texts. Detect touches, and use a simple algorithm to detect what they hit (e.g. divide by the height of each component to get which line, and test to see which side (left or right) the touch hits. You probably don’t have to bother with text and image bounds. Store the connected components in a list, and calculate the coordinates of the lines given the connected components (more or less same as for detecting touches but inversed).

Some small comments on your code: Keep the variables that are local to methods in the methods, Float and float are automatically converted, and don’t use arrays to represent objects that are better represented as classes (p1.getX() is more readable than p1.get(0)).

Edit: If you just want to draw lines between your points you can do something like this:

public void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  Log.d("on draw","on draw position1:"+position1+" position2:"+position2);

  assert position1.size() == position2.size();

  for (int i = 0; i < position1.size(); i += 2) {
     float x1=position1.get(i);
     float y1=position1.get(i+1);
     float x2=position2.get(i);
     float y2=position2.get(i+1);
     paint.setColor(Color.BLACK);
     paint.setStrokeWidth(3);
     canvas.drawLine(x1,y1+75, x2+300,y2, paint);
  }
}

But now you have to make sure that the user clicks on the components in the right order. If you click twice on the same column you will have problems. You will have to solve that in the click handlers. The biggest issue I have with this is the hard coded constants 75 and 300. I don’t see your layout so I don’t know what you did there, but I’m quite sure that you will be better off using one component that draws everything.

Edit: Rewrite

This is a cleaned up version of your MatchActivity (untested though):

package com.example.mediakey;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.ListView;

public class MatchActivity extends Activity {
    ArrayAdapter<String> listadapter;
    DrawView draw;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        String[] s1 = { "smiley1", "smiley2", "smiley3" };
        ListView lv = (ListView) findViewById(R.id.text_list);
        ArrayList<String> list = new ArrayList<String>();
        list.addAll(Arrays.asList(s1));
        listadapter = new ArrayAdapter<String>(this, R.layout.rowtext, s1);
        lv.setAdapter(listadapter);
        GridView gv = (GridView) findViewById(R.id.image_list);
        gv.setAdapter(new ImageAdapter(this));

        // This should be done in the layout xml
        // I moved it here to do it only once not for every click
        // I don't know how your layout is defined but it seems as this should
        //   be the parent component of the text and image views and it's not.
        //   If it works like this I don't think you should bother with it.
        //   Otherwise post your layout file.
        LinearLayout ll= (LinearLayout) findViewById(R.id.draw_line);
        draw = new DrawView(this);
        ll.addView(draw);

        lv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
                float x1 = v.getX();
                float y1 = v.getY();
                draw.addSourcePoint(x1, y1);
                Log.d("list","text positions x1:"+x1+" y1:"+y1);
            }
        });

        gv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> arg0, View v, int arg2, long arg3){
                float x2 = v.getX();
                float y2 = v.getY();
                draw.addDestinationPoint(x2, y2);
                Log.d("list","image positions x2:"+x2+" y2:"+y2);
            }
        });

    }
}

And here is a rewritten DrawView (also untested):

package com.example.mediakey;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

public class DrawView extends View {
    Paint paint = new Paint();
    private List<Float> position1=new ArrayList<Float>();
    private List<Float> position2=new ArrayList<Float>();;

    public DrawView(Context context) {
        super(context);
        invalidate();
        Log.d("drawview","In DrawView class position1:"+position1+" position2:"+position2) ;
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d("on draw","IN onDraw() position1:"+position1+" position2:"+position2);

        assert position1.size() == position2.size();

        for (int i = 0; i < position1.size(); i += 2) {
            float x1 = position1.get(i);
            float y1 = position1.get(i + 1);
            float x2 = position2.get(i);
            float y2 = position2.get(i + 1);
            paint.setColor(Color.BLACK);
            paint.setStrokeWidth(3);
            canvas.drawLine(x1,y1, x2,y2, paint);
        }
    }

    public void addSourcePoint(float x1, float y1) {
        position1.add(x1);
        position1.add(y1);
    }

    public void addDestinationPoint(float x2, float y2) {
        position2.add(x2);
        position2.add(y2);
        invalidate();
    }
}

Now you need to check which of the add*Points methods where called last and if the same is called twice in a row you need to handle that. You need to solve this your self.