deepak - Sun Oct 28 2012 10:01:31 GMT-0400 (EDT)

Problem Statement

Need to make an animation where letters
move together to form a word. Animation 
needed is a slide right and left animation.

deepak - Sun Oct 28 2012 10:21:57 GMT-0400 (EDT)

Here is what i need to achieve

deepak - Sun Nov 04 2012 18:56:41 GMT-0500 (EST)

Steps To Achieve this

1) Create a Relative layout and add all the images
   which represent the Alphabets in the initial
   Reverse order.

2) Final step is to move the images in the first place 
    to the last place, second place to the second last
    place and do the same thing with all the other 
    images.

3) Note that the animation needs to happen together 
    for all images.

deepak - Sun Nov 04 2012 19:10:28 GMT-0500 (EST)

Challenges

To execute step 2 we need to know the position
of the images placed on the screen. The challenge
i faced was that on the oncreate method of the
activity, the view is not yet painted. Because
of this i have to let the oncreate method complete
the view creation. I have to use a Handler to trigger 
the animation separately.

deepak - Sun Nov 04 2012 19:41:28 GMT-0500 (EST)

Here is the Sample Code

package com.scramble.anim;

import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class ScrambleAnimationActivity extends Activity {
   
   
   
   private int spot1XLoc = 0;
   
   private int spot1YLoc = 0;
   
   private int spot2XLoc = 0;
   
   private int spot2YLoc = 0;
   
   private int spot3XLoc = 0;
   
   private int spot3YLoc = 0;
   
   private int spot4XLoc = 0;
   
   private int spot4YLoc = 0;
   
   private int spot5XLoc = 0;
   
   private int spot5YLoc = 0;
   
   private int spot6XLoc = 0;
   
   private int spot6YLoc = 0;
   
   private int spot7XLoc = 0;
   
   private int spot7YLoc = 0;
   
   private int spot8XLoc = 0;
   
   private int spot8YLoc = 0;
   
   private int spot9XLoc = 0;
   
   private int spot9YLoc = 0;
   
   private int spot10XLoc = 0;
   
   private int spot10YLoc = 0;
   
   
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    
    }
    
    Handler handler = new Handler() {
         @Override
         public void handleMessage(Message msg) {
       //display each item in a single line
            applyTransformtion();
       }
    };
    
    @Override
    protected void onStart() {
     super.onStart();
                 // create a new thread
     Thread background=new Thread(new Runnable() {

      @Override
      public void run() {
     
       try {
         Thread.sleep(1000);                

         handler.sendMessage(handler.obtainMessage());
        } catch (Exception e) {
         Log.v("Error", e.toString());
        }
       
      }
     });

     background.start();
    }
   
    public void getLocationOfAllSpots()
    {
        
ImageView img1 =
 (ImageView) this.findViewById(R.id.image1);
       
       int[] values= new int[2];
       img1.getLocationOnScreen(values);
       spot1XLoc = values[0];
       spot1YLoc = values[1] ;

ImageView img2 = (ImageView) 
         this.findViewById(R.id.image2);
       
        img2.getLocationOnScreen(values);
        spot2XLoc = values[0];
       spot2YLoc = values[1] ;

       
ImageView img3 = (ImageView) 
       this.findViewById(R.id.image3);
       
        img3.getLocationOnScreen(values);
        spot3XLoc = values[0];
       spot3YLoc = values[1] ;
       
       
ImageView img4 = (ImageView)
    this.findViewById(R.id.image4);
       
        img4.getLocationOnScreen(values);
        spot4XLoc = values[0];
       spot4YLoc = values[1] ;
       
ImageView img5 = (ImageView) 
this.findViewById(R.id.image5);
       
        img5.getLocationOnScreen(values);
        spot5XLoc = values[0];
       spot5YLoc = values[1] ;
       
ImageView img6 = (ImageView) 
this.findViewById(R.id.image6);
       
        img6.getLocationOnScreen(values);
        spot6XLoc = values[0];
       spot6YLoc = values[1] ;
       
ImageView img7 = (ImageView) 
this.findViewById(R.id.image7);
       
        img7.getLocationOnScreen(values);
        spot7XLoc = values[0];
       spot7YLoc = values[1] ;
       
       
ImageView img8 = (ImageView) 
this.findViewById(R.id.image8);
       
        img8.getLocationOnScreen(values);
        spot8XLoc = values[0];
       spot8YLoc = values[1] ;
       
       
ImageView img9 = (ImageView)
 this.findViewById(R.id.image9);
       
        img9.getLocationOnScreen(values);
        spot9XLoc = values[0];
       spot9YLoc = values[1] ;
       
       
ImageView img10 = (ImageView) 
this.findViewById(R.id.image10);
       
        img10.getLocationOnScreen(values);
        spot10XLoc = values[0];
       spot10YLoc = values[1] ;
       
       
       
    }
    
    public void applyTransformtion()
    {
       
        
        getLocationOfAllSpots();
        
        
        ImageView img1 =
 (ImageView) this.findViewById(R.id.image1);
        

       
         ImageView img2 = 
(ImageView) this.findViewById(R.id.image2);
        

        ImageView img3 = 
(ImageView) this.findViewById(R.id.image3);
        

        ImageView img4 = 
(ImageView) this.findViewById(R.id.image4);
        

        ImageView img5 = 
(ImageView) this.findViewById(R.id.image5);
        

        ImageView img6 = 
(ImageView) this.findViewById(R.id.image6);
        

        ImageView img7 = 
(ImageView) this.findViewById(R.id.image7);
        

        ImageView img8 =
 (ImageView) this.findViewById(R.id.image8);
        

        ImageView img9 = 
(ImageView) this.findViewById(R.id.image9);
        

        ImageView img10 =
 (ImageView) this.findViewById(R.id.image10);
                

startAnimation(img1, spot10XLoc-spot1XLoc,1);
        
startAnimation(img10, -(spot10XLoc-spot1XLoc),2);
          
startAnimation(img2, spot9XLoc - spot2XLoc+2,3);
       
startAnimation(img9, -(spot9XLoc - spot2XLoc),4);
        
startAnimation(img3, spot8XLoc - spot3XLoc+5,5);
        
startAnimation(img8, -(spot8XLoc - spot3XLoc),6);
        
startAnimation(img4, spot7XLoc - spot4XLoc-10,7);
   
startAnimation(img7, -(spot7XLoc - spot4XLoc),8);
          
startAnimation(img5, spot6XLoc - spot5XLoc-10,9);
       
startAnimation(img6, -(spot6XLoc - spot5XLoc)-15,10);
        
        
       
}
    
    
    public void startAnimation
(ImageView img,int XDelta,int flag)
    {
        TranslateAnimation a = 
new TranslateAnimation(
               0,XDelta,0,0);
       
        a.setDuration(1000);
       
        a.setFillAfter(true);
       
        img.startAnimation(a);
        
        
    }
}

deepak - Sun Nov 04 2012 19:43:16 GMT-0500 (EST)

Here is the Handler code from The full codeset

Handler handler = new Handler() {
         @Override
         public void handleMessage(Message msg) {
       //display each item in a single line
            applyTransformtion();
       }
    };
    
    @Override
    protected void onStart() {
     super.onStart();
                 // create a new thread
     Thread background=new Thread(new Runnable() {

      @Override
      public void run() {
     
       try {
         Thread.sleep(1000);                

         handler.sendMessage(handler.obtainMessage());
        } catch (Exception e) {
         Log.v("Error", e.toString());
        }
       
      }
     });

     background.start();
    }