Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android ListView Swipe for Action like Twitter List

I'm trying to implement the "swipe for action" feature - like you can see in the "new" twitter app. A closer description you find at swipe for action description.

Now, are there any ideas/solution how to implement this feature?

Thanks!

like image 540
Superroot Avatar asked Jul 02 '11 12:07

Superroot


2 Answers

Use a GestureDetector in each row, and wrap the row contents itself in a ViewFlipper. On a swipe, switch children of the ViewFlipper.

I have a ViewSwiper that combines a GestureDetector and ViewFlipper, but it is designed to work in either direction (e.g., from the regular row, a swipe left or right would switch to the actions), which may or may not be desirable. But, it should give you an idea of how this might work.

like image 148
CommonsWare Avatar answered Nov 17 '22 12:11

CommonsWare


I did something similiar to what you need - you can find some info about there. I'm doing some manual stuff there but it works nice. For your convenience here is the code I've used:

OnTouchListener gestureListener = new View.OnTouchListener() {

    private int padding = 0;
    private int initialx = 0;
    private int currentx = 0;
    private ViewHolder viewHolder;

    public boolean onTouch(View v, MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            padding = 0;
            initialx = (int) event.getX();
            currentx = (int) event.getX();
            viewHolder = ((ViewHolder) v.getTag());
        }

        if (event.getAction() == MotionEvent.ACTION_MOVE) {
            currentx = (int) event.getX();
            padding = currentx - initialx;
        }

        if (event.getAction() == MotionEvent.ACTION_UP ||
            event.getAction() == MotionEvent.ACTION_CANCEL) {
            padding = 0;
            initialx = 0;
            currentx = 0;
        }

        if (viewHolder != null) {
            if (padding == 0) {
                v.setBackgroundColor(0xFF000000);
                if (viewHolder.running)
                    v.setBackgroundColor(0xFF058805);
            }
            if (padding > 75) {
                viewHolder.running = true;
                v.setBackgroundColor(0xFF00FF00);
                viewHolder.icon.setImageResource(R.drawable.clock_running);
            }
            if (padding < -75) {
                viewHolder.running = false;
                v.setBackgroundColor(0xFFFF0000);
            }
            v.setPadding(padding, 0, 0, 0);
        }
        return false;
    }
};
like image 37
MariuszP Avatar answered Nov 17 '22 12:11

MariuszP