Android item swiping on listview

Question

I'm struggling with this topic on Android Listview since a few days and I don't seem to get it right. I just can't understand how to do it. I've learned the best I could about Adapters ( BaseAdapter specially) but still couldn't think in a way to do this.

I've searched on the web for information but didn't quite get it.

• What I wish to do is the following: I want to create a ListView of contacts.
• Each row has 3 horizontal sections: a photo that is constant, content x and content y (this last one is out of the screen and is invisible)
• And I wish that when the user swipes a single item from right to left, the content (with information x) fades out. The other content (with information Y) slides in from out of the screen, with right to left orientation, at the same time.
• When the user swipes back (from left to right) the content y swipes out again and the initial content x fades in.

I just can't to this, so I'm asking your help please. Thank you very much for your time and effort

Answer 1

Adding such animations to a ListView is no problem, I built this solution for a normal non-custom ListView in a few minutes, generally this sort of thing works on any ListView out of the box, it's all just in the adapter. The only thing missing in my answer is the swipe detection, unfortunately I don't have the time to test that right now. But swipe detection is not difficult and there are a ton of examples if you google it. Anyway if you have questions, feel free to ask.

Result:

I am using a simple BaseAdapter with ViewHolder pattern, nothing special, I will post the getView method anyway for clarification:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if(getItemId(position) == TEST_VIEW_ID) {
        TestViewModel viewModel = (TestViewModel) getItem(position);

        TestRow row;
        if(convertView == null) {
            convertView = this.inflater.inflate(TestRow.LAYOUT, parent, false);
            row = new TestRow(convertView); // Here the magic happens
            convertView.setTag(row);
        }

        row = (TestRow) convertView.getTag();
        row.bind(viewModel);
    }

    return convertView;
}

In my ViewHolder class, here called TestRow I created a few helper methods for the animations, I will explain them further below, but here first my code from TestRow :

public class TestRow {

    public static final int LAYOUT = R.layout.list_item_test;

    public ImageView ivLogo;
    public TextView tvFadeOut;
    public TextView tvSlideIn;

    public TestRow(View view) {
        this.ivLogo = (ImageView) view.findViewById(R.id.ivLogo);
        this.tvFadeOut = (TextView) view.findViewById(R.id.tvFadeOut);
        this.tvSlideIn = (TextView) view.findViewById(R.id.tvSlideIn);

        this.ivLogo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // When the ImageView is clicked the animations are applied to the TextViews.
                if(tvFadeOut.getVisibility() == View.VISIBLE) {
                    fadeOutView(tvFadeOut);
                    slideInView(tvSlideIn);
                } else {
                    fadeInView(tvFadeOut);
                    slideOutView(tvSlideIn);
                }
            }
        });
    }

    public void bind(TestViewModel viewModel) {
        // Nothing to do here
    }
}

And here are the helper methods i use for the animations:

private void fadeOutView(View view) {
    Animation fadeOut = AnimationUtils.loadAnimation(view.getContext(), R.anim.fade_out);
    if (fadeOut != null) {
        fadeOut.setAnimationListener(new ViewAnimationListener(view) {
            @Override
            protected void onAnimationStart(View view, Animation animation) {

            }

            @Override
            protected void onAnimationEnd(View view, Animation animation) {
                view.setVisibility(View.GONE);
            }
        });
        view.startAnimation(fadeOut);
    }
}

private void fadeInView(View view) {
    Animation fadeIn = AnimationUtils.loadAnimation(view.getContext(), R.anim.fade_in);
    if (fadeIn != null) {
        fadeIn.setAnimationListener(new ViewAnimationListener(view) {
            @Override
            protected void onAnimationStart(View view, Animation animation) {
                view.setVisibility(View.VISIBLE);
            }

            @Override
            protected void onAnimationEnd(View view, Animation animation) {

            }
        });
        view.startAnimation(fadeIn);
    }
}

private void slideInView(View view) {
    Animation slideIn = AnimationUtils.loadAnimation(view.getContext(), R.anim.slide_in_right);
    if (slideIn != null) {
        slideIn.setAnimationListener(new ViewAnimationListener(view) {
            @Override
            protected void onAnimationStart(View view, Animation animation) {
                view.setVisibility(View.VISIBLE);
            }

            @Override
            protected void onAnimationEnd(View view, Animation animation) {

            }
        });
        view.startAnimation(slideIn);
    }
}

private void slideOutView(View view) {
    Animation slideOut = AnimationUtils.loadAnimation(view.getContext(), R.anim.slide_out_right);
    if (slideOut != null) {
        slideOut.setAnimationListener(new ViewAnimationListener(view) {
            @Override
            protected void onAnimationStart(View view, Animation animation) {

            }

            @Override
            protected void onAnimationEnd(View view, Animation animation) {
                view.setVisibility(View.GONE);
            }
        });
        view.startAnimation(slideOut);
    }
}

private abstract class ViewAnimationListener implements Animation.AnimationListener {

    private final View view;

    protected ViewAnimationListener(View view) {
        this.view = view;
    }

    @Override
    public void onAnimationStart(Animation animation) {
        onAnimationStart(this.view, animation);
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        onAnimationEnd(this.view, animation);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }

    protected abstract void onAnimationStart(View view, Animation animation);
    protected abstract void onAnimationEnd(View view, Animation animation);
}

These are the animation xml's I use:

fade in:

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <alpha
            android:fromAlpha="0"
            android:toAlpha="1"
            android:duration="700"/>
</set>

fade out:

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <alpha
            android:fromAlpha="1"
            android:toAlpha="0"
            android:duration="700"/>
</set>

slide in:

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <translate
            android:fromXDelta="100%" android:toXDelta="0%"
            android:duration="700"/>
</set>

slide out:

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
    <translate
            android:fromXDelta="0%" android:toXDelta="100%"
            android:duration="700"/>
</set>

Answer 2

Use this xml in res/anim/ (FOR ANIMATION PURPOSE)

This is for left to right animation:

<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="false">
  <translate android:fromXDelta="-100%" android:toXDelta="0%"
         android:fromYDelta="0%" android:toYDelta="0%"
         android:duration="700"/>
</set>

This is for right to left animation:

<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="false">
  <translate
 android:fromXDelta="0%" android:toXDelta="100%"
 android:fromYDelta="0%" android:toYDelta="0%"
 android:duration="700" />
</set>

In your coding use intent like for left to right:

this.overridePendingTransition(R.anim.animation_enter,
               R.anim.animation_leave);

In your coding use intent like for right to left

this.overridePendingTransition(R.anim.animation_leave,
                           R.anim.animation_enter);

For Custom List View u can use this Code: http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

Just catch Gesture event and apply animation, and make one layout which will appear-disappear on gesture event.

---

If u are Using for normal purpose than working example of exactly what u want is here: https://github.com/47deg/android-swipelistview