ListView Animation Tutorial

ListView Animation Tutorial

In this tutorial you are going to know about the animation in lsitview so first learn to create a basic listview as shown above .

This tutorial will show you how to animate the list view using plenty of animation.

1)First  create a new android application as you created for basic listview.

2)Now you have to create a folder "anim" under res folder 

3)you have to create a different XML file inside the anim folder to create the animation.

4)Let  follow the XML as shown below,create the following xml file in the anim folder

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

                       android:duration="100"
                       android:fromAlpha="0.0"

                       android:interpolator="@android:anim/accelerate_interpolator"

                     android:toAlpha="1.0" />

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

                 <translate android:fromXDelta="100%p" android:toXDelta="0"

                     android:duration="300"/>
                 <alpha android:fromAlpha="0.0" android:toAlpha="1.0"

                   android:duration="300" />
               </set>

*Push Left Out
                           <?xml version="1.0" encoding="utf-8"?>
                  <set xmlns:android="http://schemas.android.com/apk/res/android">
                  <translate android:fromXDelta="0" android:toXDelta="-100%p"

                  android:duration="300"/>

                  <alpha android:fromAlpha="1.0" android:toAlpha="0.0"

                   android:duration="300" />
                  </set>

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

               <translate android:fromYDelta="100%p" android:toYDelta="0"

                android:duration="500"/>
             <alpha android:fromAlpha="0.0" android:toAlpha="1.0"

              android:duration="500" />
           </set>

*Push Up Out
                        <?xml version="1.0" encoding="utf-8"?>
                     <set xmlns:android="http://schemas.android.com/apk/res/android">
                    <translate android:fromYDelta="0" android:toYDelta="-100%p"

                      android:duration="500"/>
                   <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
                      android:duration="500" />
                     </set>

*Hyper Space In
                               <?xml version="1.0" encoding="utf-8"?>
                   <alpha xmlns:android="http://schemas.android.com/apk/res/android" 
                 android:fromAlpha="0.0" android:toAlpha="1.0" 
                 android:duration="300" android:startOffset="1200" />

*Hyper Space Out
                               <?xml version="1.0" encoding="utf-8"?>
                     <set xmlns:android="http://schemas.android.com/apk/res/android"                              android:shareInterpolator="false">  
               <scale
               android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:fromXScale="1.0"
                android:toXScale="1.4"

                 android:fromYScale="1.0"

                 android:toYScale="0.6"
                 android:pivotX="50%"
                 android:pivotY="50%"
                 android:fillAfter="false"
                 android:duration="700" />
             <set
                android:interpolator="@android:anim/accelerate_interpolator"
                android:startOffset="700">

                <scale
                android:fromXScale="1.4"
                android:toXScale="0.0"
               android:fromYScale="0.6"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:duration="400" />
             <rotate
              android:fromDegrees="0"
              android:toDegrees="-45"
              android:toYScale="0.0"
              android:pivotX="50%"
              android:pivotY="50%"
              android:duration="400" />

            </set>

            </set>

*Shake

               <?xml version="1.0" encoding="utf-8"?>
          <translate xmlns:android="http://schemas.android.com/apk/res/android"
          android:fromXDelta="0" android:toXDelta="10"
           android:duration="1000" android:interpolator="@anim/cycle" />

*Wave Scale

                      <set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
     <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="100" />

    <scale
        android:fromXScale="0.5" android:toXScale="1.5"
        android:fromYScale="0.5" android:toYScale="1.5"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="200" />
    <scale

        android:fromXScale="1.5" android:toXScale="1.0"
        android:fromYScale="1.5" android:toYScale="1.0"
        android:pivotX="50%" android:pivotY="50%"
        android:startOffset="200"
        android:duration="100" />
</set>

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

                    android:interpolator="@android:anim/accelerate_interpolator">
                    <translate android:fromYDelta="-100%" android:toXDelta="0"

                    android:duration="100" />

                   <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
                   android:duration="50" />

                   </set>
*Slide In Top To Bottom
                    <?xml version="1.0" encoding="utf-8"?>
                         <set>
                           <set xmlns:android="http://schemas.android.com/apk/res/android"
                           android:interpolator="@android:anim/accelerate_interpolator">
                          <translate android:fromYDelta="-100%" android:toXDelta="0"

                          android:duration="100" />

                            <alpha android:fromAlpha="0.0" android:toAlpha="1.0"

                            android:duration="50" />
                        </set>
    

                         </set>

*Cycle
             <cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
                   android:cycles="7" />

After creating the XML file now its time to code the MainActivity.java .

MainActivity.java

                        package com.example.listviewanimation;

import java.util.ArrayList;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.view.animation.ScaleAnimation;

import android.view.animation.TranslateAnimation;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.TextView;

public class MainActivity extends Activity {

private ListView listview;

private DisplayMetrics metrics;

private int mode = 1;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

metrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(metrics);

listview = new ListView(this);

listview.setFadingEdgeLength(0);

ArrayList<String> strings = new ArrayList<String>();

for (int i = 0; i < 300; i++) {

strings.add("Item:#" + (i + 1));

}

MainAdapter mAdapter = new MainAdapter(this, strings, metrics);

listview.setAdapter(mAdapter);

setContentView(listview);

}

public boolean onCreateOptionsMenu(Menu menu) {

boolean result = super.onCreateOptionsMenu(menu);

menu.add(Menu.NONE, 1, 0, "TranslateAnimation1");

menu.add(Menu.NONE, 2, 0, "TranslateAnimation2");

menu.add(Menu.NONE, 3, 0, "ScaleAnimation");

menu.add(Menu.NONE, 4, 0, "fade_in");

menu.add(Menu.NONE, 5, 0, "hyper_space_in");

menu.add(Menu.NONE, 6, 0, "hyper_space_out");

menu.add(Menu.NONE, 7, 0, "wave_scale");

menu.add(Menu.NONE, 8, 0, "push_left_in");

menu.add(Menu.NONE, 9, 0, "push_left_out");

menu.add(Menu.NONE, 10, 0, "push_up_in");

menu.add(Menu.NONE, 11, 0, "push_up_out");

menu.add(Menu.NONE, 12, 0, "shake");

return result;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

mode = item.getItemId();

return super.onOptionsItemSelected(item);

}

public class MainAdapter extends ArrayAdapter<String> {

private Context context;

private LayoutInflater mInflater;

private ArrayList<String> strings;

private DisplayMetrics metrics_;

private class Holder {

public TextView textview;

}

public MainAdapter(Context context, ArrayList<String> strings,

DisplayMetrics metrics) {

super(context, 0, strings);

this.context = context;

this.mInflater = (LayoutInflater) this.context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

this.strings = strings;

this.metrics_ = metrics;

}

@Override

public View getView(final int position, View convertView,

ViewGroup parent) {

final String str = this.strings.get(position);

final Holder holder;

if (convertView == null) {

convertView = mInflater.inflate(

android.R.layout.simple_list_item_1, null);

convertView.setBackgroundColor(0xFF202020);

holder = new Holder();

holder.textview = (TextView) convertView

.findViewById(android.R.id.text1);

holder.textview.setTextColor(0xFFFFFFFF);

holder.textview.setBackgroundResource(R.drawable.background);

convertView.setTag(holder);

} else {

holder = (Holder) convertView.getTag();

}

holder.textview.setText(str);

Animation animation = null;

switch (mode) {

case 1:

animation = new TranslateAnimation(metrics_.widthPixels / 2, 0,

0, 0);

break;

case 2:

animation = new TranslateAnimation(0, 0, metrics_.heightPixels,

0);

break;

case 3:

animation = new ScaleAnimation((float) 1.0, (float) 1.0,

(float) 0, (float) 1.0);

break;

case 4:

 animation = AnimationUtils.loadAnimation(context, R.anim.fadein);

break;

case 5:

animation = AnimationUtils.loadAnimation(context, R.anim.hyperspacein);

break;

case 6:

animation = AnimationUtils.loadAnimation(context, R.anim.hyperspaceout);

break;

case 7:

animation = AnimationUtils.loadAnimation(context, R.anim.wavescale);

break;

case 8:

animation = AnimationUtils.loadAnimation(context, R.anim.pushleftin);

break;

case 9:

animation = AnimationUtils.loadAnimation(context, R.anim.pushleftout);

break;

case 10:

animation = AnimationUtils.loadAnimation(context, R.anim.pushupin);

break;

case 11:

animation = AnimationUtils.loadAnimation(context, R.anim.pushupout);

break;

case 12:

animation = AnimationUtils.loadAnimation(context, R.anim.shake);

break;

}

// animation.setDuration(500);

convertView.startAnimation(animation);

animation = null;

return convertView;

}

}

}

Now the Listview Animation is ready ......