Slide In button effect of List View item for Android

Question

I'm porting an iPhone app into android app and one of the difficulties is recreating functionalities that are native to iPhone.

I found a native functionality of iPhone: When user execute slide touch on a listed item in list view, a delete button appears.

Is there a version for this in android? Can it be used and reused/customized?

Mediate

instead of it they have specific behaviour.. Like on Long Click a list of options come.. – Citrine

I really want to know this....:) – Auberta

Answer 1

This is just a bit more complicated to achieve. This is what I would do talking from a higher level.

1. Create a custom ViewGroup/Layout to hold a list item. Inside this layout you have your text lines images or what ever you have and also the delete button. You also here listen for gestures to hide or unhide the delete button.

2. In your list adapter you are going to need to keep track of which item is showing the delete button and which is not. Also, you are going to need to apply a click listener to each of the list item delete buttons. Every time you assign these states on the list item you should setTag(...) and store the list item position so that when it's clicked you can tell which item number must be deleted.

3. After deleting you must refresh the list in order for it to take effect. Depending on what type of adapter you are using that's going to determine how you refresh the adapter.

Hopefully this makes some sense. But I definitely think this is the easiest way since I've done this a couple times with similar functionality.

Contortionist

Answer 2

I guess you could either try to implement gesture listener over the listview itself but it might be hard to get the correct id. Since I haven't done it myself I can not answer exactly.

Otherwise you might be able to your own view as the item in the listview and the have a gesture listener on all the childs.

Fling gesture detection on grid layout For some basic reading and code examples

Romanic

Answer 3

I dont think there is any built-in API function to do this.

However, a workaround would be to use the onFling function on the view in listitem. You might be able to use this to accomplish what you want.

Placer

Answer 4

This is how I realize this effect. We have a ListView lvSimple and we add onTouchListener to our lvSimple. This is my working code.

float historicX = Float.NaN, historicY = Float.NaN;
static final int DELTA = 50;
enum Direction {LEFT, RIGHT;}
...
ListView lvSimple = (ListView) findViewById(R.id.linLayout);
...
lvSimple.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) 
    {
        // TODO Auto-generated method stub
        switch (event.getAction()) 
        {
            case MotionEvent.ACTION_DOWN:
            historicX = event.getX();
            historicY = event.getY();
            break;

            case MotionEvent.ACTION_UP:
            if (event.getX() - historicX < -DELTA) 
            {
                FunctionDeleteRowWhenSlidingLeft();
                return true;
            }
            else if (event.getX() - historicX > DELTA)  
            {
                FunctionDeleteRowWhenSlidingRight();
                return true;
            } break;
            default: return false;
        }
        return false;
    }
});

where function FunctionDeleteRowWhenSlidingLeft() is calling when when we sliding to the left, FunctionDeleteRowWhenSlidingRight - to the right respectively. In this function you need paste code for animation.

ps. I'm sorry for my bad english. Always glad to help.

Tungusic