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 ......
President Barack Obama had a brief Honda's ASIMO (Humanoid robot)during his visit to japan at Tokyo Miraikan Science Expo.
.gif)
.jpg)
