Animate listview rows, what is the proper place to do this?

Issue

I am trying to animate the rows of a Nav drawer:

I want the icon to rotate 30 degrees and I want the whole row to slide in from left.

So while the row is sliding, the image should rotate 30 degrees and slide too.

I have the following method to do this:

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            
            
            
            LayoutInflater mInflater = (LayoutInflater)
                    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(R.layout.drawer_list_item, null);
        }

        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
        TextView txtCount = (TextView) convertView.findViewById(R.id.counter);
        
        
        animTranslate = AnimationUtils.loadAnimation(MainActivity.con,
                R.anim.rotate_nav_drawer);
        txtTitle.setTypeface(tf); 
        txtTitle.setTextSize(18);

        Animation rotation = AnimationUtils.loadAnimation(MainActivity.con, R.anim.rotatenav);
        
        imgIcon.setImageResource(navDrawerItems.get(position).getIcon());    
        
        imgIcon.startAnimation(rotation);
        imgIcon.startAnimation(animTranslate);
        txtTitle.setAnimation(animTranslate);
        
        txtTitle.setText(navDrawerItems.get(position).getTitle());

        // displaying count
        // check whether it set visible or not
        if(navDrawerItems.get(position).getCounterVisibility()){
            txtCount.setText(navDrawerItems.get(position).getCount());
        }else{
            // hide the counter view
            txtCount.setVisibility(View.GONE);
        }

        return convertView;
    } 

Problems:

The image does not rotate but slides in. The animation happens only once, that is when the nav drawer is opened for the first time.

What do I miss here?

Here are my animations xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="900"
        android:fromXDelta="30%"
        android:toXDelta="0%" >
    </translate>

</set>

and

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="30" />

Although I can call these animations on navDrawerOpen, but I am clueless as to how to reference the individual views there.

Edit:

Here is my complete adapter:

public class NavDrawerListAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<NavDrawerItem> navDrawerItems;
    String fontPath = "fonts/HelveticaNeue-Light.otf";
    Typeface tf; 


    Animation animTranslate;
    
    public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){
        this.context = context;
        this.navDrawerItems = navDrawerItems;
        tf = Typeface.createFromAsset(context.getAssets(), fontPath);
    }

    @Override
    public int getCount() {
        return navDrawerItems.size();
    }

    @Override
    public Object getItem(int position) {       
        return navDrawerItems.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            
            
            
            LayoutInflater mInflater = (LayoutInflater)
                    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(R.layout.drawer_list_item, null);
        }

        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
        TextView txtCount = (TextView) convertView.findViewById(R.id.counter);
        
        
        animTranslate = AnimationUtils.loadAnimation(MainActivity.con,
                R.anim.rotate_nav_drawer);
        txtTitle.setTypeface(tf); 
        txtTitle.setTextSize(18);

        Animation rotation = AnimationUtils.loadAnimation(MainActivity.con, R.anim.rotatenav);
        
        imgIcon.setImageResource(navDrawerItems.get(position).getIcon());    
        
    //  imgIcon.startAnimation(rotation);
    //  imgIcon.startAnimation(animTranslate);
    //  txtTitle.setAnimation(animTranslate);
        
        txtTitle.setText(navDrawerItems.get(position).getTitle());

        // displaying count
        // check whether it set visible or not
        if(navDrawerItems.get(position).getCounterVisibility()){
            txtCount.setText(navDrawerItems.get(position).getCount());
        }else{
            // hide the counter view
            txtCount.setVisibility(View.GONE);
        }

        return convertView;
    }

}

Solution

Use interpolator and make a few changes to your xml. Also, as stated by Bruce add the translateAnimation to rotate_nav_drawer_image.xml.
The xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
 <!--- android:interpolator="@android:anim/linear_interpolator"
       If you add this intepolator here remove it from translate and rotate-->
 android:fillAfter="true"
 >
<translate
    android:duration="900"
    android:fromXDelta="30%"
    android:toXDelta="0%"
    android:interpolator="@android:anim/linear_interpolator"
      />
<rotate
    android:duration="600"
    android:fromDegrees="0"
    android:toDegrees="30"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatMode="reverse" <!-- "reverse" to have the animation reverse direction with each iteration or "repeat" to have the animation loop from the beginning each time. -->
    android:repeatCount="-1"  <!-- can also use "infinite" -->
    android:interpolator="@android:anim/cycle_interpolator"    <!--You can exeriment with linear_interpolator... -->
          />

Add it to your imageView

animTranslateRotImage = AnimationUtils.loadAnimation(myContext,
            R.anim.rotate_nav_drawer_image);
imgIcon.startAnimation(animTranslateRotImage);

If the animation shows only first time the navigation Drawer is opened. Call invalidateViews() on your drawer listView to force it to be redrawn. Like

mDrawerList = (ListView) findViewById(R.id.left_drawer);
mDrawerList.setAdater( //.....
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {


        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            getActionBar().setTitle(mDrawerTitle);
            // Force it to be redrawn.
            mDrawerList.invalidateViews();

            /* If this did not work call
               use mDrawerList.refreshDrawableState() or
               mDrawerAdapter.notifyDataSetChanged();
            */


            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }
    };

Answered By - Mohammed Ali