how to swipe a button onTouch event in android

Question

How to swipe a button on touch event android with directions left,right, up,down..?...I am new to android and want to develop a callback application.Please help by providing some links

callbackButton.setOnTouchListener(new OnTouchListener() {

    private float currX;
    private float currY;

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

        float x1 = 0, x2, y1 = 0, y2, dx, dy , oldx =0,oldy=0;
        String direction;

        switch(event.getAction()) {

        case MotionEvent.ACTION_DOWN:
            oldx = event.getX();
            oldy = event.getY();
            break;

        case MotionEvent.ACTION_MOVE:

            x2 = event.getX();
            y2 = event.getY();
            dx = x2-x1;
            dy = y2-y1;

            // Use dx and dy to determine the direction
            if(Math.abs(dx) > Math.abs(dy)) {
                if(dx>0) {
                    direction = "right";
                    Log.e("right...","moving..");
                }else{
                    direction = "left";
                    Log.e("left...","moving..");
                }
            } else {
                if(dy>0) {
                    direction = "down";
                    Log.e("down...","moving..");

                    currX = event.getRawX();
                    currY = event.getRawY();

                    Log.e("x=", ""+(currX-oldx));
                    Log.e("y=", ""+(currY-oldy));

                    MarginLayoutParams marginParams = new MarginLayoutParams(v.getLayoutParams());
                    marginParams.setMargins((int)(currX-oldx), (int)(currY-oldy),0, 0);

                    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
                    v.setLayoutParams(layoutParams);
                } else {
                    direction = "up";
                    Log.e("up...","moving..");
                }
            }
        }
        return true;
    }
});

This is my code for imageButton moving on touch event. But this code is not working as I want

Answer 1

Check my blogspot in which I have shown the drag drop image onTouch event.

Edit: here is the full code:

First of all create android project in your eclipse and create a class and layout file as below:

MainActivity.java

public class MainActivity extends Activity
{
private ImageView m_ivImage, m_ivImage1;
private int m_counter = 0;
float m_lastTouchX, m_lastTouchY, m_posX, m_posY, m_prevX, m_prevY, m_imgXB, m_imgYB, m_imgXC, m_imgYC, m_dx, m_dy;
private LinearLayout m_llTop;
private AbsoluteLayout m_alTop;
private Button m_btnAddView, m_btnRemove;
private Context m_context;

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);

m_context = this;

m_prevX = 0;
m_prevY = 0;
m_imgXB = 50;
m_imgYB = 100;
m_imgXC = 150;
m_imgYC = 100;

m_ivImage = (ImageView) findViewById(R.id.ivImage);
m_ivImage1 = (ImageView) findViewById(R.id.ivImage1);
m_llTop = (LinearLayout) findViewById(R.id.llTop);
m_alTop = (AbsoluteLayout) findViewById(R.id.alTop);
m_btnAddView = (Button) findViewById(R.id.btnAdd);
m_btnRemove = (Button) findViewById(R.id.btnRemove);

m_ivImage.setOnTouchListener(m_onTouchListener);
m_ivImage1.setOnTouchListener(m_onTouchListener);
m_btnAddView.setOnClickListener(m_onClickListener);
m_btnRemove.setOnClickListener(m_onClickListener);

}

OnClickListener m_onClickListener = new OnClickListener(){

@Override
public void onClick(View p_v)
{
switch (p_v.getId())
{
case R.id.btnAdd:
addView();
break;
case R.id.btnRemove:
removeView();
break;
default:
break;
}
}
};

OnTouchListener m_onTouchListener = new OnTouchListener(){

@Override
public boolean onTouch(View p_v, MotionEvent p_event)
{
switch (p_event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
m_lastTouchX = p_event.getX();
m_lastTouchY = p_event.getY();
break;
}
case MotionEvent.ACTION_UP:
{
break;
}

case MotionEvent.ACTION_MOVE:
{
m_dx = p_event.getX() - m_lastTouchX;
m_dy = p_event.getY() - m_lastTouchY;

m_posX = m_prevX + m_dx;
m_posY = m_prevY + m_dy;

if (m_posX > 0 && m_posY > 0 && (m_posX + p_v.getWidth()) < m_alTop.getWidth() && (m_posY + p_v.getHeight()) < m_alTop.getHeight())
{
p_v.setLayoutParams(new AbsoluteLayout.LayoutParams(p_v.getMeasuredWidth(), p_v.getMeasuredHeight(), (int) m_posX, (int) m_posY));

m_prevX = m_posX;
m_prevY = m_posY;

}

break;
}
}
return true;
}
};

/**
* Add view dynamically for drag and drop
*/
private void addView()
{
ImageView m_img = new ImageView(m_context);
TextView m_tv=new TextView(m_context);
if (m_counter < 5)
{
if (m_counter % 2 == 0)
{
m_img.setBackgroundResource(R.drawable.bol_green);
m_tv.setText("Hello! Drag Me! ");
m_alTop.addView(m_tv, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXB), ((int) m_imgYB)));
m_alTop.addView(m_img, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXB), ((int) m_imgYB)));
}
else
{
m_img.setBackgroundResource(R.drawable.bol_paars);
m_alTop.addView(m_img, new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT, ((int) m_imgXC), ((int) m_imgYC)));
}
m_counter++;
if (m_counter == 5)
m_btnAddView.setEnabled(false);
}

m_img.setOnTouchListener(m_onTouchListener);
m_tv.setOnTouchListener(m_onTouchListener);
}

public void removeView()
{
m_counter = 0;
m_alTop.removeAllViews();
m_alTop.invalidate();
m_btnAddView.setEnabled(true);
}
}

main_layout.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/llTop" 
    android:layout_width="fill_parent" android:layout_height="fill_parent" 
    android:orientation="vertical" > <AbsoluteLayout 
    android:id="@+id/alTop" android:layout_width="fill_parent" 
    android:layout_height="0dp" android:layout_margin="10dp" 
    android:layout_weight=".70" > <ImageView android:id="@+id/ivImage" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_marginTop="10dp" 
    android:src="@drawable/ic_menu_share" android:visibility="gone" /> 
<ImageView android:id="@+id/ivImage1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_marginLeft="10dp" 
    android:layout_marginTop="10dp" android:layout_x="193dp" 
    android:layout_y="29dp" android:src="@drawable/ic_launcher" /> 
</AbsoluteLayout> <LinearLayout android:layout_width="wrap_content" 
    android:layout_height="0dp" android:layout_gravity="center" 
    android:layout_weight=".30" > <Button android:id="@+id/btnAdd" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_marginTop="10dp" 
    android:text="Add View" /> <Button android:id="@+id/btnRemove" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_marginTop="10dp" 
    android:text="Remove View" android:visibility="visible" /> 
</LinearLayout> </LinearLayout>

Here is the boundary file xml code which shows the border of the layout in which object moves.

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
        <stroke android:width="1dp" android:color="#000000"/>
        <corners 
            android:topLeftRadius="8dp" android:topRightRadius="8dp" 
            android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/> 
        <padding android:left="0dp" android:top="0dp" android:right="0dp" 
            android:bottom="0dp"/> <gradient android:angle="270" 
            android:endColor="#FFFFFF" android:startColor="#FFFFFF" 
            android:type="linear" android:centerColor="#FFFFFF"/>
</shape>
    </item> 
</selector>

Answer 2

Here you will find an explaination on how to handle touch events:

http://developer.android.com/guide/topics/ui/ui-events.html

Then, in the on touch method, you need to

• detect when the user put his finger down
• store the finger's position
• detect when the user moves
• compare with previous position
• detect when the user stops touching the screen

Example (using code from http://developer.android.com/training/graphics/opengl/touch.html)

@Override
public boolean onTouchEvent(MotionEvent e) {
    // MotionEvent reports input details from the touch screen
    // and other input controls. In this case, you are only
    // interested in events where the touch position changed.

    float x = e.getX();
    float y = e.getY();

        switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mIsDown = true;
            break;
        case MotionEvent.ACTION_MOVE:

            float dx = x - mPreviousX;
            float dy = y - mPreviousY;

            // Here you can try to detect the swipe. It will be necessary to
            // store more than the previous value to check that the user move constantly in the same direction
            detectSwipe(dx, dy);

        case MotionEvent.ACTION_UP:
            mIsDown = false;
            break;
    }

    mPreviousX = x;
    mPreviousY = y;
    return true;
}

With this simple case, you wouldn't even need to stor when the user puts his finger down or up (since moving implies a finger down) but it can be useful to have the boolean value stored)

Good luck with your app

EDIT:

It seems you edited your post with some code. You say that you don't get the explected results but you don't say what you get. This might be useful for us to help you.

You should try to find if a library that detects swipe movements already exists. I'm pretty sure there is many out there

EDIT 2: I assume you button is a simple android.Button. One solution could be to create a class that extends Button (ex: MySwipableButton). in your xml, you create a layout that contains your MySwipableButton, and give it enought place to be moved (for example, it has width=fill_parent, since you want it to swipe on the while screen). MySwipableButton implements onTouch to store the position in which the button should be (using the method you already have) MySwipableButton would also overwrite onDraw(Graphics g). In onDraw, you would paint the button (super.draw()) at the place it must be (regarding the current swipe) and leave the rest of the view empty