Slide up animation for selected listview items

Question

I have a listview. I want to add one animation that is if I select one list item then it will be removed and rest of the items below that item will be shifted up with slide up animation. I have done this with linear layout by getting its child position but I am not able to understand how to slide up rest elements of listview. Please help

Below is my code for animation in dynamically created linear layout

    plus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            Animation animation1 = AnimationUtils.loadAnimation(getActivity(), R.anim.move);
            final Animation animation2 = AnimationUtils.loadAnimation(getActivity(), R.anim.moveup);

this is animation of that item on which we click

            lay1.startAnimation(animation1);

this is code for animation rest child to slide up

            final int i = lay1.getId() + 1;


            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    //Do something after 100ms

                    try {
                        LinearLayout l = (LinearLayout)                       layoutall.getChildAt(i);
                        l.startAnimation(animation2);
                        layoutall.removeView(lay1);
                    } catch (Exception e) {

                        //connectToDatabase();
                    }
                }
            }, 600);

Updated Code Thanks a lot. I was able to implement this functionality but problem is that I have used two animation in one listview but not able to implement first animation.

My code for list item to whom I want to swipe left while on click

       viewHolder.accept.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                removeListItem(viewHolder.order_card_layout, position);

            }
        });

And code for animation is

      protected void removeListItem(final View rowView, final int positon) {
    // TODO Auto-generated method stub


    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);

    Animation.AnimationListener al = new Animation.AnimationListener() {
        @Override
        public void onAnimationEnd(Animation arg0) {

            ViewHolder vh = (ViewHolder) rowView.getTag();
            //vh.needInflate = true;

        }
        @Override public void onAnimationRepeat(Animation animation) {}
        @Override public void onAnimationStart(Animation animation) {}
    };


    collapse(rowView, al);

}

but problem is that My first animation is not working that is slide right

    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);

New Updated Code I was able to implement this functionality but problem is that I have used two animations and want to do first animation on that item whom I click and another animation on all the list items below that clicked item.But my problem is that the item on which I clicked slide right and also it re appears and slide up with whole list but I want that the item on which i click will be slide right and rest will be slide up.

My code for list item to whom I want to swipe left while on click

       viewHolder.accept.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                removeListItem(viewHolder.order_card_layout, position);

            }
        });

And code for animation is

protected void removeListItem(final View rowView, final int positon) { // TODO Auto-generated method stub

    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);


    final Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
            //Do something after 100ms

            try {


                Animation.AnimationListener al = new Animation.AnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation arg0) {

                        ViewHolder vh = (ViewHolder) rowView.getTag();
                        //vh.needInflate = true;

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }

                    @Override
                    public void onAnimationStart(Animation animation) {
                    }
                };


                collapse(rowView, al);


            } catch (Exception e) {

                //connectToDatabase();
            }
        }
    }, 600);





}






            private void collapse(final View v, Animation.AnimationListener al) {
    final int initialHeight = v.getMeasuredHeight();

    Animation anim = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (interpolatedTime == 1) {
                v.setVisibility(View.GONE);
            }
            else {
                v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    if (al!=null) {
        anim.setAnimationListener(al);
    }
    anim.setDuration(600);
    v.startAnimation(anim);
}

Answer 1

Here is Code, where i am implementing both animation.

1) Slide from right while click on List-view Item-click.

2) while clicking on Delete Button, slide-up animation for remaining rows in list-view (which is already done in link i have given).

Copy below files to your anim folder.

1) fade_out.xml :

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

2) fade_in.xml :

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

3) slide_in_right.xml :

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

4) slide_out_right.xml :

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

Now add below methods and class to your activity,

//Animation
    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);
    }

Now, if you want to display animation on List Item Click then, give animation in Adapter class in which you have inflate raw_layout for listView.

5) raw_layout.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/linLayout">

    <ImageButton
        android:id="@+id/cell_trash_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/trash_can"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/cell_name_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|left"
        android:layout_marginLeft="16dp"
        android:layout_weight="1"
        android:text="cell name" />

</LinearLayout>

6) finally Apply animation to your Parent Layout of raw_layout in getView() method of adapter onClick of Parent Layout.Here My parent layout for raw_layout is LinearLayout which have id named linLayout.

vh.linLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (vh.linLayout.getVisibility() == View.VISIBLE) {
                        fadeOutView(vh.linLayout);
                        slideInView(vh.linLayout);
                    } else {
                        fadeInView(vh.linLayout);
                        slideOutView(vh.linLayout);
                    }
                }
            });

i have tried this and its working. So try this once!!

Answer 2

Here is code related to your requirement , Try this

https://github.com/paraches/ListViewCellDeleteAnimation

Download code and run it.

if you want to see demo than see this video,

http://www.youtube.com/watch?v=bOl5MIti7n0