Thursday, October 15, 2009

Layout Animation

Layout Animation can be used to add visual effects on any controls derived from ViewGroup, such as ListView. ListView is a view that shows items in a vertically scrolling list. The items come from the ListAdapter associated with this view.

In this article, I will have a example to show how to implement a simple Layout Animation.



Create a Android Application named AndroidLayoutAnimation.

- Create a new folder named /anim under /res

- Create two xml file under /res/anim to handle the animation
list_layout_controller.xml
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="50%"
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="2000"
android:pivotX="10%"
android:pivotY="10%"
android:startOffset="100" />
</set>


- Modify main.xml to have a ListView and Button.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView
android:id="@+id/myListView"
android:persistentDrawingCache="animation|scrolling"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layoutAnimation="@anim/list_layout_controller" />
/>
<Button
android:id="@+id/myRestartButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Restart"
/>
</LinearLayout>


- Modify AndroidLayoutAnimation.java to setContentView() using listlayout.xml, and SetupListView(). In order to show the effect, a button is used to restart the animation.
package com.exercise.AndroidLayoutAnimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;

public class AndroidLayoutAnimation extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

loadScreen();
}

private Button.OnClickListener MyRestartButtonOnClickListener
= new Button.OnClickListener(){

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
loadScreen();
}
};

private void loadScreen(){
setContentView(R.layout.main);
SetupListView();

Button MyRestartButton = (Button)findViewById(R.id.myRestartButton);
MyRestartButton.setOnClickListener(MyRestartButtonOnClickListener);
}

private void SetupListView()
{
String[] listItems = new String[] {
"Hello!",
"It's a Demo to use Layout Animation",
"Is it Great?",
"android-er.blogspot.com"
};

ArrayAdapter<String> listItemAdapter
= new ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
listItems);

ListView lv = (ListView)this.findViewById(R.id.myListView);
lv.setAdapter(listItemAdapter);
}
}


Download the files.

1 comment:

Paul Ciel said...

great ,though it's old version of android , but for me ,a beginner ,this post is good example for Layout Animation