How animate the imageView across the layout on android?

Question

I trying to animate the ImageView from child layout(Relativelayout) to parent layout(Relative layout). the imageview is not getting painted while entering into the parent layout.

enter code 




/** Called when the activity is first created. */

private static final int   SWIPE_MIN          = 20;
private static final int   SWIPE_MAX_OFF_PATH = 250;
private static final int   SWIPE_THRESHOLD    = 20;
GestureDetector detector;
ImageView topImage;
ImageView bottomImage;
ImageView aView;
RelativeLayout rlBottomChild;
RelativeLayout rlTopChild;
FrameLayout flTopChild;
FrameLayout flBottomChild;
RelativeLayout table;
RelativeLayout relativeLayout ;
FrameLayout frameLayout ;
WindowManager wManger;
int screenWidth;
int screenHeight;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    wManger = getWindowManager();
    screenWidth = wManger.getDefaultDisplay().getWidth();
    screenHeight = wManger.getDefaultDisplay().getHeight();
    detector = new GestureDetector(this);

    bottomImage = new ImageView(this);
    bottomImage.setImageResource(R.drawable.icon);
    bottomImage.setOnTouchListener(this);
    bottomImage.setDrawingCacheEnabled(true);

    topImage = new ImageView(this);
    topImage.setImageResource(R.drawable.icon);
    topImage.setOnTouchListener(this);
    topImage.setDrawingCacheEnabled(true);


    initRelativeLayout();


    setContentView(relativeLayout);
}


/**
 * <p> Used to </p>
 */
private void initRelativeLayout() {



    // Top Player 
    rlTopChild = new RelativeLayout(this);
    rlTopChild.setId(1);
    LayoutParams p2 = new LayoutParams(LayoutParams.FILL_PARENT  , ((10*screenHeight)/100));
    p2.addRule(RelativeLayout.ALIGN_PARENT_TOP);
    rlTopChild.setBackgroundColor(Color.BLUE);
    rlTopChild.addView(topImage);
    rlTopChild.setLayoutParams(p2);

    // Bottom Player 
    rlBottomChild = new RelativeLayout(this);
    rlBottomChild.setId(3);
    LayoutParams p = new LayoutParams(LayoutParams.FILL_PARENT  , ((10*screenHeight)/100));
    p.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    rlBottomChild.setBackgroundColor(Color.BLUE);
    rlBottomChild.addView(bottomImage);
    rlBottomChild.setClipChildren(false);
    rlBottomChild.setLayoutParams(p);


    // Table Layout 
    table = new RelativeLayout(this);
    table.setId(2);
    LayoutParams p3 = new LayoutParams(LayoutParams.FILL_PARENT  , ((50*screenHeight)/100));
    p3.addRule(RelativeLayout.CENTER_IN_PARENT);
    p3.addRule(RelativeLayout.BELOW , rlTopChild.getId());
    p3.addRule(RelativeLayout.ABOVE , rlBottomChild.getId());
    table.setBackgroundColor(Color.WHITE);
    table.setLayoutParams(p3);


    relativeLayout =new RelativeLayout(this);
    relativeLayout.setBackgroundColor(Color.GREEN);
    relativeLayout.addView(rlBottomChild);
    relativeLayout.addView(rlTopChild);
    relativeLayout.addView(table);
}

/**
 * <p> Overriding the method </p>
 * @param v
 * @param event
 * @return
 * @see android.view.View.OnTouchListener#onTouch(android.view.View, android.view.MotionEvent)
 */
@Override
public boolean onTouch(View v, MotionEvent event) {
    return  detector.onTouchEvent(event);

}

/**
 * <p> Overriding the method </p>
 * @param e
 * @return
 * @see android.view.GestureDetector.OnGestureListener#onDown(android.view.MotionEvent)
 */
@Override
public boolean onDown(MotionEvent e) {
    // TODOAuto-generated method stub
    return true;

}

/**
 * <p> Overriding the method </p>
 * @param e1
 * @param e2
 * @param velocityX
 * @param velocityY
 * @return
 * @see android.view.GestureDetector.OnGestureListener#onFling(android.view.MotionEvent, android.view.MotionEvent, float, float)
 */
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    try {
        if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH){
            return false;
        }
        if (e1.getX() - e2.getX() > SWIPE_MIN && Math.abs(velocityX) > SWIPE_THRESHOLD) {
           debug("Left Swipe");
           TranslateAnimation animation= new TranslateAnimation(e1.getX(),e2.getX(),e1.getY() ,e2.getY());
           animation.setAnimationListener(this);
           animation.setDuration(3000);
           bottomImage.startAnimation(animation);
        } else if (e2.getX() - e1.getX() > SWIPE_MIN && Math.abs(velocityX) > SWIPE_THRESHOLD) {
            debug("Right Swipe ");
            debug("Swipe down ...");
            TranslateAnimation animation= new TranslateAnimation(e1.getX(),e2.getX(),e1.getY() ,e2.getY());
            animation.setAnimationListener(this);
            animation.setDuration(3000);
            topImage.startAnimation(animation);
        } else if (e1.getY() - e2.getY() > SWIPE_MIN && Math.abs(velocityX) > SWIPE_THRESHOLD) {
           debug("Swipe up ... ");
           TranslateAnimation animation= new TranslateAnimation(e1.getX(),e2.getX(),e1.getY() ,e2.getY());
           animation.setAnimationListener(this);
           animation.setDuration(3000);
           bottomImage.startAnimation(animation);
        } else if (e2.getY() - e1.getY() > SWIPE_MIN && Math.abs(velocityX) > SWIPE_THRESHOLD) {
            debug("Swipe down ...");
            TranslateAnimation animation= new TranslateAnimation(e1.getX(),e2.getX(),e1.getY() ,e2.getY());
            animation.setAnimationListener(this);
            animation.setDuration(3000);
            topImage.startAnimation(animation);
        }
    } catch (Exception e) {
        // nothing
    }
    return true;

}

/**
 * <p> Used to </p>
 * @param string
 */
private void debug(String string) {
    Log.d("TAGGG", string);         
}

/**
 * <p> Overriding the method </p>
 * @param e
 * @see android.view.GestureDetector.OnGestureListener#onLongPress(android.view.MotionEvent)
 */
@Override
public void onLongPress(MotionEvent e) {
    // TODOAuto-generated method stub

}

/**
 * <p> Overriding the method </p>
 * @param e1
 * @param e2
 * @param distanceX
 * @param distanceY
 * @return
 * @see android.view.GestureDetector.OnGestureListener#onScroll(android.view.MotionEvent, android.view.MotionEvent, float, float)
 */
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    // TODOAuto-generated method stub
    return true;

}

/**
 * <p> Overriding the method </p>
 * @param e
 * @see android.view.GestureDetector.OnGestureListener#onShowPress(android.view.MotionEvent)
 */
@Override
public void onShowPress(MotionEvent e) {
    // TODOAuto-generated method stub

}

/**
 * <p> Overriding the method </p>
 * @param e
 * @return
 * @see android.view.GestureDetector.OnGestureListener#onSingleTapUp(android.view.MotionEvent)
 */
@Override
public boolean onSingleTapUp(MotionEvent e) {
    // TODOAuto-generated method stub
    return true;

}

/**
 * <p> Overriding the method </p>
 * @param animation
 * @see android.view.animation.Animation.AnimationListener#onAnimationEnd(android.view.animation.Animation)
 */
@Override
public void onAnimationEnd(Animation animation) {
    // TODOAuto-generated method stub

}

/**
 * <p> Overriding the method </p>
 * @param animation
 * @see android.view.animation.Animation.AnimationListener#onAnimationRepeat(android.view.animation.Animation)
 */
@Override
public void onAnimationRepeat(Animation animation) {
    // TODOAuto-generated method stub

}

/**
 * <p> Overriding the method </p>
 * @param animation
 * @see android.view.animation.Animation.AnimationListener#onAnimationStart(android.view.animation.Animation)
 */
@Override
public void onAnimationStart(Animation animation) {
}

}

here

Thanks. jega

Answer 1

In order to draw a View outside its parent you need to set clipChildren to false in the parent View.

Add the following lines in your code and it should now work:

relativeLayout.setClipChildren(false);
rlBottomChild.setClipChildren(false);
rlTopChild.setClipChildren(false);

Answer 2

Android offers a custom 2D graphics library for drawing and animating shapes and images. The android.graphics.drawable and android.view.animation packages are where you'll find the common classes used for drawing and animating in two-dimensions.

http://developer.android.com/guide/topics/graphics/2d-graphics.html