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?",
       "computer-help-tips.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.