Get button coordinates and detect if finger is over them - Android

Question

I have 4 buttons in my android app activity. This is what it looks like:

As you can see, the textViews at the bottom of the screen display the x and y coordinates. The coordinates are in reference to a relative layout. (See below given code)

Now, what I want to do is get the x and y coordinates of the 4 buttons at runtime and then figure out if my finger is touching the buttons while moving or not. In simple words, I want to press the buttons by swiping my finger over them instead of lifting and touching. How can I achieve it? I want to implement it in my piano application.

I was able to get the coordinates on screen and they change as I move my finger.
So, my question is How can I get the coordinates of the buttons and detect if my finger is swiping above them?:
XML

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:id="@+id/relativelayout">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Y Cord : "
    android:layout_marginLeft="10dp"
    android:layout_marginBottom="10dp"
    android:id="@+id/textView"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="X Cord : "
    android:layout_marginLeft="10dp"
    android:layout_marginBottom="10dp"
    android:id="@+id/textView2"
    android:layout_above="@+id/textView"
    android:layout_alignParentLeft="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:id="@+id/textView3"
    android:textColor="#000000"
    android:layout_below="@+id/textView2"
    android:layout_toRightOf="@+id/textView" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:id="@+id/textView4"
    android:textColor="#000000"
    android:layout_marginBottom="10dp"
    android:layout_above="@+id/textView"
    android:layout_toRightOf="@+id/textView" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button"
    android:textColor="#000000"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:textColor="#000000"
    android:id="@+id/button2"
    android:layout_below="@+id/button"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:textColor="#000000"
    android:id="@+id/button3"
    android:layout_below="@+id/button2"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Button"
    android:id="@+id/button4"
    android:textColor="#000000"
    android:layout_below="@+id/button3"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true" />

</RelativeLayout>

Java

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextView xcordview = (TextView) findViewById(R.id.textView4);
    final TextView ycordview = (TextView) findViewById(R.id.textView3);
    RelativeLayout touchview = (RelativeLayout) findViewById(R.id.relativelayout);
    touchview.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            xcordview.setText(String.valueOf(event.getX()));
            ycordview.setText(String.valueOf(event.getY()));
            return true;
        }
    });

  }
}

Thank you all very very much!

Update:

public class MainActivity extends Activity {
RelativeLayout touchview;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextView xcordview = (TextView) findViewById(R.id.textView4);
    final TextView ycordview = (TextView) findViewById(R.id.textView3);
    touchview = (RelativeLayout) findViewById(R.id.relativelayout);
    touchview.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            xcordview.setText(String.valueOf(event.getX()));
            ycordview.setText(String.valueOf(event.getY()));
            for(int i = 0; i < touchview.getChildCount(); i++){
                if(checkInterSection(touchview.getChildAt(i), event.getRawX(), event.getRawY())){
                    Button button = (Button) findViewById(R.id.button);
                    button.setBackgroundColor(Color.BLUE);
                    break;
                }
            }
            return true;
        }
    });

}
private boolean checkInterSection(View view, float rawX, float rawY) {
    int[] location = new int[2];
    view.getLocationOnScreen(location);
    int x = location[0];
    int y = location[1];
    int width = view.getWidth();
    int height = view.getHeight();
    //Check the intersection of point with rectangle achieved
    return (!(rawX < x || rawY > x + width || rawY < y || rawY > y + height));
}

}

Answer 1

package com.example.touch;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    Button b1, b2, b3, b4;

    int b1x1, b1x2, b1y1, b1y2;

    private TextView xcordview;
    private TextView ycordview;
    private TextView buttonIndicator;
    private RelativeLayout touchview;
    private static int defaultStates[];
    private Button mLastButton;
    private final static int[] STATE_PRESSED = {
            android.R.attr.state_pressed,
            android.R.attr.state_focused  
                    | android.R.attr.state_enabled };

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        xcordview = (TextView) findViewById(R.id.textView4);
        ycordview = (TextView) findViewById(R.id.textView3);
        buttonIndicator = (TextView) findViewById(R.id.button_indicator);
        touchview = (RelativeLayout) findViewById(R.id.relativelayout);

        b1 = (Button) findViewById(R.id.button1);
        b2 = (Button) findViewById(R.id.button2);
        b3 = (Button) findViewById(R.id.button3);
        b4 = (Button) findViewById(R.id.button4);
        defaultStates = b1.getBackground().getState();

    }

    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();

        touchview.setOnTouchListener(new View.OnTouchListener() {

            private boolean isInside = false;

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                int x = (int) event.getX();
                int y = (int) event.getY();

                xcordview.setText(String.valueOf(x));
                ycordview.setText(String.valueOf(y));

                for (int i = 0; i < touchview.getChildCount(); i++) {
                    View current = touchview.getChildAt(i);
                    if (current instanceof Button) {
                        Button b = (Button) current;

                        if (!isPointWithin(x, y, b.getLeft(), b.getRight(), b.getTop(),
                                b.getBottom())) {
                            b.getBackground().setState(defaultStates);
                        }

                        if (isPointWithin(x, y, b.getLeft(), b.getRight(), b.getTop(),
                                b.getBottom())) {
                            b.getBackground().setState(STATE_PRESSED);
                            if (b != mLastButton) {
                                mLastButton = b;
                                buttonIndicator.setText(mLastButton.getText());
                            }
                        }

                    }
                }
                return true;
            }

        });

    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        // TODO Auto-generated method stub
        super.onWindowFocusChanged(hasFocus);
    }

    static boolean isPointWithin(int x, int y, int x1, int x2, int y1, int y2) {
        return (x <= x2 && x >= x1 && y <= y2 && y >= y1);
    }
}

layout file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:text="Y Cord : "
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:text="X Cord : "
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_toRightOf="@+id/textView"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView"
        android:layout_marginBottom="10dp"
        android:layout_toRightOf="@+id/textView"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000000" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="B1"
        android:textColor="#000000" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button1"
        android:text="B2"
        android:textColor="#000000" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button2"
        android:text="B3"
        android:textColor="#000000" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/button3"
        android:text="B4"
        android:textColor="#000000" />

    <TextView
        android:id="@+id/button_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/textView4"
        android:layout_marginRight="33dp"
        android:text="No one"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button_indicator"
        android:layout_alignBottom="@+id/button_indicator"
        android:layout_marginRight="29dp"
        android:layout_toLeftOf="@+id/button_indicator"
        android:text="Entered: "
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Answer 2

private boolean checkInterSection(View view, int rawX, int raxY) {
    int[] location = new int[2];
    view.getLocationOnScreen(location);
    int x = location[0];
    int y = location[1];
    int width = view.getWidth();
    int height = view.getHeight();
    //Check the intersection of point with rectangle achieved 
    return (!(rawX < x || rawY > x + width || rawY < y || rawY > y + height)); 
}

for(int i = 0; i < touchview.getChildCount(); i++){
    if(checkInterSection(touchview.getChildAt(i), event.getRawX(), event.getRawY())){
        if(checkInterSection(touchview.getChildAt(i), event.getRawX(), event.getRawY())){
            ((Button)touchview.getChildAt(i)).setBackgroundColor(Color.BLUE);// Type casting may not be required 
        }else{
            ((Button)touchview.getChildAt(i)).setBackgroundColor(Color.WHITE);
        }
        break;
    }
}

Answer 3

getX() getY() for a OnTouchListener give coordinates relative the the cooresponding view.

If you prefer screen coordinates instead you can use one of the following

• overwrite onTouchEvent for the activity and remove OnTouchListener-s for buttons, in which case MotionEvent will report screen coordinates instead of Button coordinates

     @Override 
     public boolean onTouchEvent (MotionEvent event) {
         xcordview.setText(String.valueOf(event.getX()));
         ycordview.setText(String.valueOf(event.getY()));
         return true;
     }
  

• use getTop() getLeft() in OnTouchListener for a button:

    touchview.setOnTouchListener(new View.OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
          xcordview.setText(String.valueOf(event.getX()+v.getLeft()));
          ycordview.setText(String.valueOf(event.getY()+v.getTop()));
          return true;
      }
  });
  

You may consider using GestureDetector to detect swipes, however it isn't really necessary.

Answer 4

karioki 's solution works well. In order to make it work even when we start the move from inside one of the buttons, just add

android:clickable="false"

for every button in xml.