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