On Touch Listener does not release button when finger is moved Android

Question

I have a RelativeLayout with 15 buttons, I am working on a new project and with OnTouchListener, I want my app to do something like this: When user touches for example button 1, Mp1 will start playing until user lift his finger or move it to button 2, then mp2 on button 2 should start and so on.

But here is what happens, part where user touches the screen and lift is working fine, but if user move his finger(not lift) if button 1 was pressed it will still be in pressed state (action down) until user lift his finger. Something like this:

My question:

What I need to add to when finger leave button border to stop the button and switch on whichever button is pressed(where finger is touching)? My code:

sound1.setOnTouchListener(new OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
                    pressed1 = true;
                    mp1 = MediaPlayer.create(MainClass.this, R.raw.item1);
                    mp1.start();
                    sound1.setBackgroundResource(R.drawable.pad_pressed);
                    if (looping == true) {
                        mp1.setLooping(true);
                    } else if (looping == false) {
                        mp1.setLooping(false);
                    }

                } else if (event.getAction() == android.view.MotionEvent.ACTION_UP) {
                    pressed1 = false;
                    mp1.stop();
                    mp1.reset();
                    mp1.release();
                    sound1.setBackgroundResource(R.drawable.pad_normal);
                }
                return true;
            }
        });

Answer 1

Try this:

sound1.setOnTouchListener(new OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == android.view.MotionEvent.ACTION_DOWN) {
                    pressed1 = true;
                    mp1 = MediaPlayer.create(MainClass.this, R.raw.item1);
                    mp1.start();
                    sound1.setBackgroundResource(R.drawable.pad_pressed);
                    if (looping == true) {
                        mp1.setLooping(true);
                    } else if (looping == false) {
                        mp1.setLooping(false);
                    }

                } else if (event.getAction() == android.view.MotionEvent.ACTION_UP || event.getAction() == android.view.MotionEvent.ACTION_CANCEL) {
                    pressed1 = false;
                    mp1.stop();
                    mp1.reset();
                    mp1.release();
                    sound1.setBackgroundResource(R.drawable.pad_normal);
                }
                return true;
            }
        });

ACTION_CANCEL occurs when the parent takes possession of the motion. You can find more about MotionEvents here.

Answer 2

You have to focus on RelativeLayout.

MyActivity.java

public class MyActivity extends Activity {

private RelativeLayout mainLayout;
private TextView myTag;
private TextView xcordview;
private TextView ycordview;

private MediaPlayer mp1;
private String currentTag;
private boolean areaDetected;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    mainLayout = (RelativeLayout) findViewById(R.id.main_layout);
    myTag = (TextView) findViewById(R.id.tag);
    xcordview = (TextView) findViewById(R.id.x_view);
    ycordview = (TextView) findViewById(R.id.y_view);
    currentTag = "";
    initEvent();
}

private void initEvent() {
    mainLayout.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {

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

            xcordview.setText("X : " + String.valueOf(x));
            ycordview.setText("Y : " + String.valueOf(y));

            areaDetected = false;
            for (int i = 0; i < mainLayout.getChildCount(); i++) {
                View currentButton = mainLayout.getChildAt(i);
                if (currentButton instanceof Button) {
                    Button b = (Button) currentButton;
                    String tag = b.getTag().toString();

                    if (!pointInside(x, y, b.getLeft(), b.getRight(), b.getTop(), b.getBottom())) {
                        b.setText("");
                        // b.setBackgroundResource(getResources().getColor(android.R.color.black));
                    } else {
                        areaDetected = true;
                        if (!currentTag.equals(tag)) {
                            currentTag = tag;
                            stopPlaying();
                            b.setText(tag);
                            mp1 = getMediaPlayer(tag);
                            mp1.start();
                            // b.setBackgroundResource(getResources().getColor(android.R.color.white));
                        }
                    }
                }
            }
            if (!areaDetected) {
                currentTag = "";
                stopPlaying();
            }
            myTag.setText("Current tag : " + currentTag);
            return true;
        }
    });
}

private void stopPlaying() {
    if (mp1 != null) {
        mp1.stop();
        mp1.release();
        mp1 = null;
    }
}

private MediaPlayer getMediaPlayer(String tag) {
    if (tag.equals("b1")) {
        return MediaPlayer.create(MyActivity.this, R.raw.coffee_and_snow);
    }
    return MediaPlayer.create(MyActivity.this, R.raw.coffee_and_snow2);
}

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

and the xml file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">

    <com.example.antoine.touchtest.MyButton
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tag="b1" />

    <com.example.antoine.touchtest.MyButton
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b1"
        android:tag="b2" />

    <com.example.antoine.touchtest.MyButton
        android:id="@+id/b3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b2"
        android:tag="b3" />

    <com.example.antoine.touchtest.MyButton
        android:id="@+id/b4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/b3"
        android:tag="b4" />

    <TextView
        android:id="@+id/x_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/y_view"
        android:text="X : " />

    <TextView
        android:id="@+id/tag"
        android:layout_above="@+id/x_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Current tag : " />

    <TextView
        android:id="@+id/y_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Y : " />
</RelativeLayout>

Finally my custom button

MyButton

public class MyButton extends Button {

    public MyButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }

    public MyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public MyButton(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        // return super.onTouchEvent(event);
        return false;
    }

}

A big thanks to this post ==> Get button coordinates and detect if finger is over them - Android