Android listview, swipe to action

Question

I have listview with some text. I want to show images on swipe action (almost like in gmail app). For example, if I swipe from left to right - my list item is moving right, and image is sliding from the left. My list item can move right no more than image width. After swipe stops, list item is moving to start position. How could I make such thing?

Answer 1

check out this.

There you can see the listview swipe to the right to show the views.

Snap:

main_activity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:swipe="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

   <com.fortysevendeg.swipelistview.SwipeListView
            android:id="@+id/example_swipe_lv_list"
            android:listSelector="#00000000"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            swipe:swipeFrontView="@+id/front"
            swipe:swipeBackView="@+id/back"
            swipe:swipeDrawableChecked="@drawable/choice_selected"
            swipe:swipeDrawableUnchecked="@drawable/choice_unselected"
            swipe:swipeCloseAllItemsWhenMoveList="true"
            swipe:swipeMode="both"
            />

</LinearLayout>

Answer 2

you can use onFling() event of gesturedetector. it will give you the motionevent points and touch velocity points using that you can identify the gesture and can load a view using animations like left to right and right to left.

Answer 3

I couldn't find any library that does just that but it's not hard to make it by yourself. As Nick pointed out pay a look at android-swipetodismiss, look at SwipeDismissListViewTouchListener.java.

First, you have to create a custom View for you ListView's child. You will need an ImageView which is overlapped by another View that contains the text.

Then, you add an onTouch() listener to your ListView. On MotionEvent.ACTION_DOWN (when you start the gesture) you take the touch coordinates and calculate which child in the ListView you are touching, for example:

        int[] listViewCoords = new int[2];
        mListView.getLocationOnScreen(listViewCoords);
        int x = (int) motionEvent.getRawX() - listViewCoords[0];
        int y = (int) motionEvent.getRawY() - listViewCoords[1];
        View child;
        for (int i = 0; i < childCount; i++) {
            child = mListView.getChildAt(i);
            child.getHitRect(rect);
            if (rect.contains(x, y)) {
                mDownView = child;
                break;
            }
        }

On MotionEvent.ACTION_MOVE you measure the difference in X coordinates between the point you touched in MotionEvent.ACTION_DOWN and the current coordinate:

float deltaX = motionEvent.getRawX() - mDownX;

So then you have translate the View that contains the text so the ImageView is revealed:

mDownView.setTranslationX(deltaX);

When you lift your finger you just set mDownView .setTranslationX(0) and the image is covered again. This is just a guide, there are some details that are not covered but you should be able to start with this.