title: Animating child view outside of parent
body: <p>I am trying to animate a view outside of its parent view and when I do the child view is not able to animate beyond its parent. I solved this by using the <code>setClipChildren(false)</code> and it worked... When the view is animated <em>up</em>. When I animate the view <em>down</em> the image is still hidden. </p>
  
  <p>Here is the code that works. This code will animate a tile button to the top of the screen:</p>
  
  <pre><code>private void setGameBoard(){
  
          brickWall.setClipChildren(false);
          brickWall.setClipToPadding(false);
  
          //Build game board
          for(int ii = 0; ii &lt; brickRows;ii++){
              final int x = ii;
  
              //Build table rows
              row = new TableRow(this.getApplicationContext());
              row.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 50));
              row.setClipChildren(false);
              row.setClipToPadding(false);
  
             // row.setBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.colorAccent, null));
  
              //Build table tiles
              for(int jj=0; jj &lt; brickColumns; jj++){
                  final int y = jj;
                  final Brick tile = new Brick(this);
                  tile.setClipBounds(null);
  
                  tile.setBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.colorPrimary, null));
  
                  //Set margins to create look of tic-tac-toe
                  TableRow.LayoutParams lp = new TableRow.LayoutParams(
                                             150, 75);
                  lp.setMargins(0,0,0,0);
  
  
                  //lp.weight = 1;
                  tile.setLayoutParams(lp);
  
                  tile.setWidth(3);
                  tile.setHeight(10);
                  tile.setOnClickListener(new View.OnClickListener() {
                      @Override
                      public void onClick(View v) {
                          if(tile.getHits() == 0){
                              tile.setBackgroundColor(ResourcesCompat.getColor(getResources(),
                                      R.color.colorGreen, null));
                              tile.addHit();
                          } else if (tile.getHits() == 1){
                              tile.setBackgroundColor(ResourcesCompat.getColor(getResources(),
                                      R.color.colorYellow, null));
                              tile.addHit();
                          }else if(tile.getHits() == 2){
                              brokenBricks++;
  
                              float bottomOfScreen = getResources().getDisplayMetrics()
                                      .heightPixels;
  
                              ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(tile, "translationY",
                                      -2000);
  // 2
                              objectAnimator.setDuration(2000);
                              tile.setHapticFeedbackEnabled(true);
                              objectAnimator.start();
                              //tile.setVisibility(View.INVISIBLE);
                              if(isRevealComplete()){
                                  brickWall.setVisibility(View.INVISIBLE);
                              }
                          }
                      }
                  });
  
                  row.addView(tile);
              }
  
              brickWall.addView(row);
          }
      } 
  </code></pre>
  
  <p>But when I adjust where the view to go to the bottom of the screen, the view below it is "swallowed" and is hidden when it gets to the bottom of the parent view:</p>
  
  <pre><code> private void setGameBoard(){
  
          brickWall.setClipChildren(false);
          brickWall.setClipToPadding(false);
  
          //Build game board
          for(int ii = 0; ii &lt; brickRows;ii++){
              final int x = ii;
  
              //Build table rows
              row = new TableRow(this.getApplicationContext());
              row.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 50));
              row.setClipChildren(false);
              row.setClipToPadding(false);
  
             // row.setBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.colorAccent, null));
  
              //Build table tiles
              for(int jj=0; jj &lt; brickColumns; jj++){
                  final int y = jj;
                  final Brick tile = new Brick(this);
                  tile.setClipBounds(null);
  
                  tile.setBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.colorPrimary, null));
  
                  //Set margins to create look of tic-tac-toe
                  TableRow.LayoutParams lp = new TableRow.LayoutParams(
                                             150, 75);
                  lp.setMargins(0,0,0,0);
  
  
                  //lp.weight = 1;
                  tile.setLayoutParams(lp);
  
                  tile.setWidth(3);
                  tile.setHeight(10);
                  tile.setOnClickListener(new View.OnClickListener() {
                      @Override
                      public void onClick(View v) {
                          if(tile.getHits() == 0){
                              tile.setBackgroundColor(ResourcesCompat.getColor(getResources(),
                                      R.color.colorGreen, null));
                              tile.addHit();
                          } else if (tile.getHits() == 1){
                              tile.setBackgroundColor(ResourcesCompat.getColor(getResources(),
                                      R.color.colorYellow, null));
                              tile.addHit();
                          }else if(tile.getHits() == 2){
                              brokenBricks++;
  
                              float bottomOfScreen = getResources().getDisplayMetrics()
                                      .heightPixels;
  
                              ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(tile, "translationY",
                                      2000);
                              objectAnimator.setDuration(2000);
                              tile.setHapticFeedbackEnabled(true);
                              objectAnimator.start();
                              //tile.setVisibility(View.INVISIBLE);
                              if(isRevealComplete()){
                                  brickWall.setVisibility(View.INVISIBLE);
                              }
                          }
                      }
                  });
  
                  row.addView(tile);
              }
  
              brickWall.addView(row);
          }
      }
  </code></pre>
  
  <p>So my question is: <strong><em>How can I animate a child view outside of a parent view below the child view?</em></strong></p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>If I remove the tiles below the tile I am trying to drop, then I am able to see the desired effect until there is another tile below it, at which point the dropping tile will go "behind" the tile that is still there. So how do I get the dropping tile to move over the children below it? </p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>One new things I've noticed is that if I move the button left or up, it works fine; but, if move it down or to the right it goes behind the other views. This leads me to believe that buttons created after the current tile have a different effect. </p>