Post
Ask Question

Animation In Android

Flip Animation in Android

 
The animation is an important class in Android application development. Here I am going to describe to you 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 into 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 into 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. }   
            Please see the screen shots,
             
             
             
            Read more articles on Android


            Similar Articles