Android listview, swipe to action [closed]

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?

Coombs

You could try implementing swipe to dismiss and adapt the code so that instead of deleting the row you show a hidden image. – Kinglet

Did you ever solve this? I'm looking to do something similar. – Libava

No, I haven't found any well documented example – Coombs

I ended up creating my own solution. I will be open sourcing it soon and will respond after. It is a little different but should be very adaptable to your use. I might even be able to roll it into incorporating your use case. – Libava

U can try with this library. github.com/47deg/android-swipelistview – Opera

#17521250 Did you already tried this? In my opinion, swipe gesture would be applicable to listview. – Madly

This library shows a layout upon swiping on a row. You can specify your image in that layout. Although, its main purpose is deletion but you can use it for this purpose. It also has support to specify swipe direction. github.com/chinmoy12/Delete-ListView-Row-Like-iOS – Haiduk

I hope it will help you to over come your problem find the Library file it has all the swipe list view options > try with this link – Astrogate

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>

Kristin

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.

Kennithkennon

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.

Proportioned