How to use OnTouchListener to connect 2 or more ImageButtons

Question

I want to connect imagebuttons to create a word on the textview. How can I do this? The idea of using OnTouchListener is that i think its more "accurate" in my app. Heres the sample image of my app. Please help me solve this problem. I am new in android programming. I saw some codes using Motion Event and has cases ACTION_DOWN and ACTION_UP but I cant understand how it is used. Any help with codes will be highly appreciated.

here's my code:

    public class MainActivity extends Activity {

    	//VARIABLES HERE
    	
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            //R.ID.XML ..

            //randomize image display
    		
    		// DISPLAY TEXT IN TV from IMGBTN
    		OnClickListener myCommoClickListner = new OnClickListener(){

    			@Override
    			public void onClick(View arg0) {
    				Log.i(TAG,"arg0.getId() = " + arg0.getId());
                    
                    if(arg0.getId()==R.drawable.a){
                        Log.i(TAG,"arg0.getId()="+arg0.getId());
                        generatedString=generatedString+"a"; //[PLACEE RESPACTIVE CHARACTEER HERE]
                        text.setText(generatedString);
                        ((ImageButton) arg0).setImageResource(R.drawable.changea);
                        
                        
                        	
            				if (!timeHasStarted) {
            					   countDownTimer.start();
            					   timeHasStarted = true;
            					   }
            				
                    }


    			}
    			
    		};

    		
    		
    		//CUSTOMCLICKLISTENER
        }
        
        
        //COUNTDOWNTIMER

          // SEARCH WORD, ADD WORD TO LV (if in database), SCORE
        
    }

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg" >
    
            
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1"
      android:orientation="vertical"
      android:layout_marginTop="4dp"
      android:layout_marginLeft="10dp"
      android:layout_marginStart="10dp"
      android:layout_marginRight="5dp"
      android:layout_marginEnd="5dp" >
                
    <ImageButton
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />
   
    
    
    <ImageButton
        android:id="@+id/Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />
</LinearLayout>
            
            
            
 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:layout_marginTop="4dp"
    android:layout_marginLeft="5dp"
    android:layout_marginStart="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginEnd="5dp" >
    
    <ImageButton
        android:id="@+id/Button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />
                
</LinearLayout>
            
            
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:layout_marginTop="4dp"
    android:layout_marginLeft="5dp"
    android:layout_marginStart="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginEnd="5dp" >
    
    <ImageButton
        android:id="@+id/Button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

</LinearLayout>
            
            
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:layout_marginTop="4dp"
    android:layout_marginLeft="5dp"
    android:layout_marginStart="5dp"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp" >
    
    <ImageButton
        android:id="@+id/Button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />

    <ImageButton
        android:id="@+id/Button16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world" />
</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout> 
    
</LinearLayout>

Answer 1

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //I am using gridview
    GridView gv = (GridView) findViewById(R.id.gridView1);
    //this is the adapter for your 16 buttons..
    Adapter adapt; // we have not instatiate it yet..
    //this is your items to fill yyour adapter ,that is, your random letters
    ArrayList<String> letters = new ArrayList<String>(); //add your letters to it..
    //using the logic on one of my answers on your questions add 16 different letter string to this letters array.
    //i dont think i am pose to cover that right?
    //instatiate adapt here below
    adapt = new Adapter(context, R.layout.layout_containing_your_imagebutton, letters);
    gv.setAdapter(adapt); //setting the adapter

    gv.setOnTouchListener(new OnTouchListener() {// this in the ontouch

        @Override
        public boolean onTouch(View arg0, MotionEvent event) {
            // TODO Auto-generated method stub
            if(event.getAction() == MotionEvent.ACTION_DOWN){                   
                // this is when the user's hand is on the gridview
                //docode can comes here
                return true;
            }
            if(event.getAction() == MotionEvent.ACTION_MOVE){                   
                // this is when the user's hand is moving on  the gridview
                //docode can comes here
                return true;
            }
            if(event.getAction() == MotionEvent.ACTION_UP){                 
                // this is when the user's hand is raised up;;
                return true;
            }
            return false;
        }
    });
}

void dococde(ViewGroup v){ // the v here is the arg0 in the touch listener- dont forget to cast it when you reference it
    //put docode in one of the touch event that pleases you..
    String clicked_or_touch_letter_for_formation_by_user = (String) v.getFocusedChild().getTag();
    //      add clicked_or_touch_letter_for_formation_by_user to your word adapter.

}
static class Adapter extends ArrayAdapter<String> {

    ArrayList<String> list;
    Context context;
    int resource;

    public Adapter(Context context, int resource, ArrayList<String> objects) {
        super(context, resource, objects);
        // TODO Auto-generated constructor stub
        this.list = objects;
        this.context = context;
        this.resource = resource;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return list.size();
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View child = convertView;
        RecordHolder holder;
        LayoutInflater inflater = ((Activity) context).getLayoutInflater();

        if (child == null) {            
            child = inflater.inflate(resource, parent, false);//resource should be one layout with one imagebutton..
            //              that's the imagebutton you want to inflate 16 times.. or have in your gridview..
            holder = new RecordHolder();
            holder.letter = (ImageButton) child.findViewById(R.id.yourimagebuttonid); //id to your imagebutton
            child.setTag(holder);
        }else{
            holder = (RecordHolder) child.getTag();
        }
        final String iLetter = list.get(position);
        holder.letter.setTag(iLetter);
        return child;
    }

}

static class RecordHolder {
    ImageButton letter;
}

i got a lil busy.. but is just the idea or logic im talking about, try and it, note my closing tags and other formatting might be bad or mal formed so correct them with the edittors and add your respective id's and layouts and try, will work.. and dont forget to upvote or notify if it helped you

Answer 2

i will give you an idea because you made it clear you have no idea, so writing codes will make no sense, that's why you couldnt provide codes yourself, so Sir, the Imagebutton from what i see with this image is in a viewgroup, now go this documentaion to learn about viewgroups then get your touch listener or event listener, and focus it on your view group, and get the particular child -( Imagebutton) with forcus, in your view group with Viewgroup.findFocus() and then move on.. Get the idea now?? try it..

EDIT1:-= First all, great and i get you..but why dont you use gridview and make them act like they buttons, and with that you can have or be able to connet them by catching the item that was clicked and doing what you wona do.. so basically you add the letters to the items(buttons) in your adapter and then get the clicked item in your girdview here is just some intro in your adapterinflate or create a button and add the letter to it by View.setTag((String)"K-your letter") then in your onclick get it by

GridView.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, final View arg1, final int arg2,long arg3) {
         //gettting your letters
        String letter = (String) arg1.getTag();
        //add it to your word formation using any custom method.
     }
 });

this is much easier looking at what you want...plus you could style the getview..

Real Deal (Me tryna use your codes)

now coming to your way of it..declaring each imagebutton in xml, will, be a lot tedious.. so do this, in your java

for(int i = 0; i < 16){
 ImageButton ib = new ImageButton(Context);
 ib.setClickable(true);
 ib.setFocusableInTouchMode(true);
 ib.setFocucsable(true);
 ib.setTag((String)"K-your letter") // i am using tags, but save/add it they way you save it
 ViewGroup.addView(ib); // create a viewgroup object and add it to it, dont use the class like i did.. but should be like this
}

// then your viewgroup as an object setOnclick listener for it..

ViewGroup.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View view) {
            // TODO Auto-generated method stub  
            View myclickedimagebutton = ViewGroup.findFocus(); // this finds the view that has focus in the viewgroup, so the view that was clicked
            // now flirt with myclickedimagebutton
            //when you done flirting with him
            ViewGroup.clearChildFocus(myclickedimagebutton); // making sure he now loosees focus
         }
  });

NOTE my closing tags may be mal formed check it and try it, im writing from a raw hand also my code formats may also be wrong so check for silly spellings.. also when you create your viewgroup, set focusable, clickable to true.. let me know if it helps