× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Android item swiping on listview

Xaver Kapeller
Mar 13, 2015
<p>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.</p> <p>Result:<br> <img src="http://i.stack.imgur.com/Mc1Pi.gif" alt="enter image description here"></p> <p>I am using a simple BaseAdapter with ViewHolder pattern, nothing special, I will post the getView method anyway for clarification:</p> <pre><code>@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; } </code></pre> <p>In my ViewHolder class, here called <code>TestRow</code> I created a few helper methods for the animations, I will explain them further below, but here first my code from <code>TestRow</code>:</p> <pre><code>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 } } </code></pre> <p>And here are the helper methods i use for the animations:</p> <pre><code>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); } </code></pre> <p>These are the animation xml's I use:</p> <p>fade in:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"&gt; &lt;alpha android:fromAlpha="0" android:toAlpha="1" android:duration="700"/&gt; &lt;/set&gt; </code></pre> <p>fade out:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"&gt; &lt;alpha android:fromAlpha="1" android:toAlpha="0" android:duration="700"/&gt; &lt;/set&gt; </code></pre> <p>slide in:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"&gt; &lt;translate android:fromXDelta="100%" android:toXDelta="0%" android:duration="700"/&gt; &lt;/set&gt; </code></pre> <p>slide out:</p> <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"&gt; &lt;translate android:fromXDelta="0%" android:toXDelta="100%" android:duration="700"/&gt; &lt;/set&gt; </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/22478114/Android%20item%20swiping%20on%20listview/22479500">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus