how to make translation animation for each listview items

Question

i have a listview with override getView method to populate it. now, i want to make each item of the list to animate or moving from the right side of the screen to the left side where the item should normally appear.

the animation of each item should not start at the same time, it must delay for couple ms before the other items moving...

well, this is my adapter class:

public class MyAdapter extends ArrayAdapter<String>{

    private Context context;
    private String[] info;

    public MyAdapter(Context context, int resource,
            String[] objects) {
        super(context, resource, objects);
        // TODO Auto-generated constructor stub
        this.context = context;
        this.info = objects;

    }

    protected class RowViewHolder {
        public TextView text1;
        public CheckBox cb;
        public String ss;
    }

    @Override
    public View getView(int pos, View inView, ViewGroup parent) {
           View vix = inView;

           RowViewHolder holder;

           if (vix == null) {
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                vix = inflater.inflate(R.layout.check_list, null);
           }    
                holder = new RowViewHolder();

                holder.text1 = (TextView) vix.findViewById(R.id.info_group);
                holder.text1.setText(info[pos]);

                holder.ss = info[pos];

                holder.cb = (CheckBox) vix.findViewById(R.id.check);
                holder.cb.setTag(holder.ss);
                holder.cb.setOnCheckedChangeListener(CbListen);

                vix.setTag(holder);

           return vix;
    }

    private OnCheckedChangeListener CbListen = new OnCheckedChangeListener(){
        @Override
        public void onCheckedChanged(CompoundButton com, boolean pool) {
            // TODO Auto-generated method stub
            String state = (com.getTag()).toString();

            if(com.isChecked()){
                System.out.println(state+" CHECKED");
            }else{
                System.out.println(state+" UNCHECKED");
            }
        }
    };

}

any idea? :)

UPDATE

Well, surely it is! LOL :p

just download those ApiDemos "like what have Farhan said" and you guys will find some kind like LayoutAnimation2 sample at the package view.

there, each items of the list is being animated to populate downward by translate-animation while the alpha is changing respectively.

here's what i do for my case:

AnimationSet set = new AnimationSet(true);

    Animation animation = new AlphaAnimation(0.0f, 1.0f);
    animation.setDuration(500);
    set.addAnimation(animation);

    animation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF, 50.0f,Animation.RELATIVE_TO_SELF, 0.0f,
        Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f
    );
    animation.setDuration(1000);
    set.addAnimation(animation);

    LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);

    group_list.setLayoutAnimation(controller);

i put this below my setAdapter() function, you guys can make it look more cozy with accelerate-decelerate etc effects.

:p

Solution 1

@user724861 has given the perfect answer!! how ever i found it's confusing where to put the code he has suggested...i put that code in my ListFragment activity as follow..

public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);        

    AnimationSet set = new AnimationSet(true);
    Animation animation = new AlphaAnimation(0.0f, 1.0f);
    animation.setDuration(300);
    set.addAnimation(animation);

    /*animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 50.0f,
            Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,
            0.0f, Animation.RELATIVE_TO_SELF, 0.0f);
    animation.setDuration(10);
    set.addAnimation(animation); just comment if you don't want :) */ 
    LayoutAnimationController controller = new LayoutAnimationController(
            set, 0.5f);

    lv.setLayoutAnimation(controller);

    adapter = new LazyAdapter(getActivity(), numResults, nodes, tabType);
    setListAdapter(adapter);
}

Solution 2

Using LayoutAnimations!

In the docs you can set via android:layoutAnimation xml attr

see here

Solution 3

the animation of each item should not start at the same time

If you want it, you can do something like this:

layout_controller.xml:

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="30%"
android:animation="@anim/scale" />

scale.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
  android:fromXScale="0.1"
  android:toXScale="1"
  android:fromYScale="0.1"
  android:toYScale="1.0"
  android:duration="800"
  android:pivotX="10%"
  android:pivotY="10%"
  android:startOffset="100" />
</set>

And then in your Java after SetListAdapter() paste the following code:

LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(
 this, R.anim.layout_controller);
getListView().setLayoutAnimation(controller);

note that "android:delay" makes animations start with delay after previous one.

Solution 4

getView() populate each items in your activity. try to create your animation into getView with Timer.

Solution 5

package com.Animation1;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.AdapterView;
import java.util.ArrayList;

public class Animation1Activity extends ListActivity implements 
                                AdapterView.OnItemSelectedListener {
    Animation anim = null;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        anim = AnimationUtils.loadAnimation( this, R.anim.magnify );
        setContentView(R.layout.main);
        ListView v = getListView();     // set up item selection listener
        v.setOnItemSelectedListener( this );    // see OnItemSelectedListener methods below
        ArrayList<String> items = new ArrayList<String>();
        items.add( "Red" );
        items.add( "Grey" );
        items.add( "Cyan" );
        items.add( "Blue" );
        items.add( "Green" );
        items.add( "Yellow" );
        items.add( "Black" );
        items.add( "White" );
        ArrayAdapter itemsAdapter = new ArrayAdapter( this, R.layout.row, items );
        setListAdapter( itemsAdapter );
    }

    protected void onListItemClick(ListView l, 
                                    View v, 
                                    int position,
                                    long id) {
      v.startAnimation( anim );
    }

// --- AdapterView.OnItemSelectedListener methods --- 
    public void onItemSelected(AdapterView parent, 
            View v, 
            int position, 
            long id) {
      v.startAnimation( anim );
    }

    public void onNothingSelected(AdapterView parent) {}
}

View more solutions

Comments

[Ahmad Arslan]

I have made this method in my base activity and i just call wow awesome thanks

[صلي علي محمد - Atef Farouk]

I used it to animate arrayList. Thanks