Android list view Right / Left swipes like call logs

Question

I have an Android application in which there is List View Like this one

Now I want to perform two different activities on right/Left swipe of the List Items in the same way How native call log works

Right Swipe of list

I want this type of swipes. Can anyone know how to make it happen. Basically I wan to implement SimpleOnGestureListener.

I have read a post answered by sir gav Fling gesture detection on grid layout and after that I am successful in implementing left swipe and right swipe detection but the only thing I am not getting on which List Item the swipe has occurred.

Update 24 May 2013

Now I am able to detect swipe action using this code --

SwipeDetector.java

/**
 * Class swipe detection to View
 */
public class SwipeDetector implements View.OnTouchListener {

    public static enum Action {
        LR, // Left to right
        RL, // Right to left
        TB, // Top to bottom
        BT, // Bottom to top
        None // Action not found
    }

    private static final int HORIZONTAL_MIN_DISTANCE = 30; // The minimum
    // distance for
    // horizontal swipe
    private static final int VERTICAL_MIN_DISTANCE = 80; // The minimum distance
    // for vertical
    // swipe
    private float downX, downY, upX, upY; // Coordinates
    private Action mSwipeDetected = Action.None; // Last action

    public boolean swipeDetected() {
        return mSwipeDetected != Action.None;
    }

    public Action getAction() {
        return mSwipeDetected;
    }

    /**
     * Swipe detection
     */@Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            {
                downX = event.getX();
                downY = event.getY();
                mSwipeDetected = Action.None;
                return false; // allow other events like Click to be processed
            }
        case MotionEvent.ACTION_MOVE:
            {
                upX = event.getX();
                upY = event.getY();

                float deltaX = downX - upX;
                float deltaY = downY - upY;

                // horizontal swipe detection
                if (Math.abs(deltaX) > HORIZONTAL_MIN_DISTANCE) {
                    // left or right
                    if (deltaX < 0) {

                        mSwipeDetected = Action.LR;
                        return true;
                    }
                    if (deltaX > 0) {

                        mSwipeDetected = Action.RL;
                        return true;
                    }
                } else

                // vertical swipe detection
                if (Math.abs(deltaY) > VERTICAL_MIN_DISTANCE) {
                    // top or down
                    if (deltaY < 0) {

                        mSwipeDetected = Action.TB;
                        return false;
                    }
                    if (deltaY > 0) {

                        mSwipeDetected = Action.BT;
                        return false;
                    }
                }
                return true;
            }
        }
        return false;
    }

}

Now use it with your ListView in this fashion

    // Set the touch listener
    final SwipeDetector swipeDetector = new SwipeDetector();
    lv.setOnTouchListener(swipeDetector);

In your setOnItemClickListener you can detect the swipe events like these

lv.setOnItemClickListener(new OnItemClickListener() {


    @Override
    public void onItemClick(AdapterView <? > parent, View view,
        int position, long id) {

        if (swipeDetector.swipeDetected()) {
            if (swipeDetector.getAction() == SwipeDetector.Action.LR) {

                Toast.makeText(getApplicationContext(),
                    "Left to right", Toast.LENGTH_SHORT).show();

            }
            if (swipeDetector.getAction() == SwipeDetector.Action.RL) {

                Toast.makeText(getApplicationContext(),
                    "Right to left", Toast.LENGTH_SHORT).show();

            }
        }
    }
});

But still I am not able to animate the swipe like these:

Solution 1

OnSwipeTouchListener.java:

import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class OnSwipeTouchListener implements OnTouchListener {

    private final GestureDetector gestureDetector = new GestureDetector(new GestureListener());

    public boolean onTouch(final View view, final MotionEvent motionEvent) {

        super.onTouch(view, motionEvent);
        return gestureDetector.onTouchEvent(motionEvent);

    }

    private final class GestureListener extends SimpleOnGestureListener {

        private static final int SWIPE_THRESHOLD = 100;
        private static final int SWIPE_VELOCITY_THRESHOLD = 100;

        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                    }
                } else {
                    if (Math.abs(diffY) > SWIPE_THRESHOLD && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffY > 0) {
                            onSwipeBottom();
                        } else {
                            onSwipeTop();
                        }
                    }
                }
            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }
    public void onSwipeRight() {}
    public void onSwipeLeft() {}
    public void onSwipeTop() {}
    public void onSwipeBottom() {}
}

USAGE:

imageView.setOnTouchListener(new OnSwipeTouchListener() {

    public void onSwipeTop() {
        Toast.makeText(MyActivity.this, "top", Toast.LENGTH_SHORT).show();
    }
    public void onSwipeRight() {
        Toast.makeText(MyActivity.this, "right", Toast.LENGTH_SHORT).show();
    }
    public void onSwipeLeft() {
        Toast.makeText(MyActivity.this, "left", Toast.LENGTH_SHORT).show();
    }
    public void onSwipeBottom() {
        Toast.makeText(MyActivity.this, "bottom", Toast.LENGTH_SHORT).show();
    }

});

Solution 2

you can use Fragments for this requirement. Use FragmentPagerAdapter and overide getItem(int position) which will return you the fragment. set the adapter to viewPager and in the setOnPageChangeListener you can have the logic for calling different fragment.

Shrishail

Comments

[Nikhil Agrawal]

hmmmm... I will see and let you Know but better paste the code here only

[Jayesh]

If we can combine DSLV and SwipeListView then we can implement swipe like call in samsung.

[Syed_Adeel]

What is super.onTouch(view, motionEvent); in OnTouch method.?

[Simmant]

sir i am also getting error on super.onTouch(view, motionEvent); error is: the method onTouch(view, motionEvent) is undefined

[Make it Simple]

@simmant In Eclipse, go to Windows>Preference>Java>Compiler and select 1.6.You might be using 1.5, and 1.5 does not allow '@Override' on interfaces methods, but just on superclass method. 1.6 does.

[Boris Rusev]

Thank you for the code, I am currently using it on a list view, because I want to detect the event when the user swipes the list itself regardless of the item under his finger. And for that I have removed onDown (it's the same if it returns false) because otherwise when I fling my listview up or down it has to stop by itself, my touches have no effect.

[Kailash Dabhi]

its detection is poor. can you tell the way we can improve the detection

[Siavash]

@MakeitSimple OnTouchListener is an interface, so whats the point of calling its onTouch? I assume nothing is happening in there. Isn't the boolean value being return in that method taking care of other views handling the touch event? or maybe we need to call the onTouch of the view, not the interface?

[Ajit Sharma]

How to give color change effect while swiping?