Search code examples
javaandroidmotionevent

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


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));
}

}

Solution

  • 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>