Android - How to move ImageView on Swipe

Question

I am new to implement Swipe Gesture for Android application. I am trying to swipe an ImageView from Left to Right of the screen using the below code:

 public class MainActivity extends Activity implements OnClickListener{
private static final int SWIPE_MIN_DISTANCE = 10;
private static final int SWIPE_MAX_OFF_PATH = 250;
private static final int SWIPE_THRESHOLD_VELOCITY = 200;
private GestureDetector gestureDetector;
View.OnTouchListener gestureListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ImageView btnSwipe = (ImageView)findViewById(R.id.imgBtnSwipe);
    btnSwipe.setOnClickListener(this);
    gestureDetector = new GestureDetector(this, new MyGestureDetector());
    gestureListener = new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
            return gestureDetector.onTouchEvent(event);
        }
    };
    btnSwipe.setOnTouchListener(gestureListener);
}
class MyGestureDetector extends SimpleOnGestureListener {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        try {
            if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                return false;
            if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(MainActivity.this, "Left Swipe", Toast.LENGTH_SHORT).show();
            }  else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(MainActivity.this, "Right Swipe", Toast.LENGTH_SHORT).show();
            }
        } catch (Exception e) {
            // nothing
        }
        return false;
    }

}
@Override
public void onClick(View v) {
}
}

I am getting Toast message as Right Swipe. But image is not moving. How can i implement that? Please help me with sample code/links.

Dreadful

Answer 1

I found a simple solution as below:

For Right Swipe(towards Right):

btnSwipe.setTranslationX(e2.getX());

For Left Swipe(towards Left)"

btnSwipe.setTranslation(e1.getX());

Now, the ImageView is transiting from Right to Left and Left to Right horizontally. But this works from Android API Level 11 onwards.

Dreadful

on the second, "swipe towards left", i guess it must be setTranslationX again, right? – Lisbethlisbon

when i try to use "setTranslation" with an View (here is btnSwipe ImageView), there is an error: "the method setTranslationX is undefined for the type View" same error for ImageView. any ideas? – Lisbethlisbon

What is your API Level? If it's less than 11, then you won't have this functionality. – Distefano

Answer 2

You need to use PagerAdapter for swiping feature. Something like this :

public class FullScreenImageAdapter extends PagerAdapter {

//Stores all the image paths
private ArrayList<String> _imagePaths;

.........


 @Override
    public Object instantiateItem(ViewGroup container, int position) {
//This method is called each time user swipes the screen
//Write suitable code to display next image on the screen
}

......

}

Here is the link for official documentation.

http://developer.android.com/training/animation/screen-slide.html http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html

Here is the link for an excellent tutorial about Image Slider

http://www.androidhive.info/2013/09/android-fullscreen-image-slider-with-swipe-and-pinch-zoom-gestures/

Ambroseambrosi

I dont need to move the page. I just need to move the imageview on Swipe(from left to right)... When the image goes to the right end, just switch the activity. I dont need of PageAdapter or ViewFlipper as they transists the whole page... – Dreadful

Oh..how about using horizontal ListView? Fill your horizontal ListView adapter with images and the layout for each List Item is an ImageView. – Ambroseambrosi

@AbhishekV He said he has only one image view and he want to swipe it by using TouchEvents. – Carree

I am not doing a sample application. As i said, I have an ImageView. When i start touching and swiping the screen, i need this imageView to Swiping position X. When the swipe reaches to end of X Position, I need to navigate to another Activity. With the above code, I am able to listen Swiping Gesture. But, how can i move an Image to Swiping position? Thats only thing i need to implement. @AbhishekV Hope you understand. – Dreadful