Animation In Android

Flip Animation in Android

Animation is an important class in Android application development. Here I am going to describe to you about how we can implement animations in Android applications. In this application I have a list view and a button. The button is aligned at the  top of the screen and a listviewis below to the button.

On clicking in the button the listview items will flip and new contents will be loaded in to the listview.
 
For this first create the main layout,
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2. xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  
  3. android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"  
  4. android:paddingRight="@dimen/activity_horizontal_margin"  
  5. android:paddingTop="@dimen/activity_vertical_margin"  
  6. android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
  7.     <Button  
  8. android:layout_width="wrap_content"  
  9. android:layout_height="wrap_content"  
  10. android:text="Flip"  
  11. android:id="@+id/flipButton"  
  12. android:layout_alignParentTop="true"  
  13. android:layout_centerHorizontal="true" />  
  14.     <ListView  
  15. android:layout_width="wrap_content"  
  16. android:layout_height="wrap_content"  
  17. android:id="@+id/listView"  
  18. android:layout_below="@+id/flipButton"  
  19. android:layout_centerHorizontal="true"  
  20. android:layout_marginTop="10dp" />  
  21. </RelativeLayout>  
Also create one more layout for the list items as follows,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:orientation="vertical" android:layout_width="match_parent"  
  4. android:layout_height="match_parent">  
  5.     <ViewFlipper  
  6. android:id="@+id/viewflipper"  
  7. android:layout_width="fill_parent"  
  8. android:layout_height="fill_parent">  
  9.         <TextView  
  10. android:layout_width="match_parent"  
  11. android:layout_height="50dp"  
  12. android:text="New Text"  
  13. android:id="@+id/itemFront" />  
  14.         <TextView  
  15. android:layout_width="match_parent"  
  16. android:layout_height="50dp"  
  17. android:text="New Text2"  
  18. android:visibility="gone"  
  19. android:id="@+id/itemBack" />  
  20.     </ViewFlipper>  
  21.   
  22.   
  23. </LinearLayout>  
Here I am using a View flipper and added two text views in to that, one for the front face and the other for the back face.
 
Now I am going to add two translate animations for fade in and fade out as follows
 
fade_in.xml,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/decelerate_interpolator">  
  4.     <translate  
  5. android:fromXDelta="-100%"  
  6. android:toXDelta="0%"  
  7. android:duration="500" />  
  8. </set>  
fade_out.xml,
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3. android:interpolator="@android:anim/decelerate_interpolator">  
  4.     <translate  
  5. android:fromXDelta="0%"  
  6. android:toXDelta="100%"  
  7. android:duration="500" />  
  8. </set>  
In the MainActivity.java file i am creating an array list for populating the listview,
  1. ArrayList<String> items = new ArrayList<String>();  
  2. for(int i=0;i<10;i++)  
  3.     items.add("item "+i);  
Now create the adapter for the listview , here I created one more method to get the back face text,
  1. public String getBackText(int i) {  
  2. if ((itemList.size() - (i + 1)) < 0)  
  3. return getItem(0);  
  4. return itemList.get(itemList.size() - (i + 1));  
  5. }  
Please see the getview method for the adapter,
  1. @Override  
  2. public View getView(int i, View view, ViewGroup viewGroup) {  
  3.     ViewHolder holder = null;  
  4. if (view == null) {  
  5.         LayoutInflater inflater = LayoutInflater.from(context);  
  6.         view = inflater.inflate(R.layout.list_item, null);  
  7.         holder = new ViewHolder();  
  8.         holder.frontText = (TextView) view.findViewById(R.id.itemFront);  
  9.         holder.backText = (TextView) view.findViewById(R.id.itemBack);  
  10.         holder.MyViewFlipper = (ViewFlipper) view.findViewById(R.id.viewflipper);  
  11.         view.setTag(holder);  
  12.     } else {  
  13.         holder = (ViewHolder) view.getTag();  
  14.     }  
  15.     holder.frontText.setText(getItem(i));  
  16.     holder.backText.setText(getBackText(i));  
  17.     Animation animationFlipIn = AnimationUtils.loadAnimation(context, R.anim.flip_in);  
  18.     Animation animationFlipOut = AnimationUtils.loadAnimation(context, R.anim.flip_out);  
  19.     animationFlipIn.setStartOffset(1000 * i);  
  20.     animationFlipOut.setStartOffset(1000 * i);  
  21.     holder.MyViewFlipper.setInAnimation(animationFlipIn);  
  22.     holder.MyViewFlipper.setOutAnimation(animationFlipOut);  
  23. if (holder.flipped)  
  24.         holder.MyViewFlipper.showPrevious();  
  25. else  
  26.  holder.MyViewFlipper.showNext();  
  27.   
  28. return view;  
  29. }  
Here I am using the Animation classes and loading the fade in and fade out animations here and put setStartOffset for some delay depending upon the index value. Please see the ViewHolder class,
  1. class ViewHolder {  
  2. private TextView frontText = null;  
  3. private TextView backText = null;  
  4. private ViewFlipper MyViewFlipper = null;  
  5. private boolean flipped = false;  
  6. }  
  7.    
Please see the screen shots,
 
 

Read more articles on Android:

Up Next
    Ebook Download
    View all
    Learn
    View all