How to animate the imageview outside of its parent layout?

How animate the imageView across the layout on android?

• 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:

  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);