title: android pop out (zoom) view on focus
body: <p>I have a group of views, which I want to 'pop-out' of the screen when focused; the sort of thing you might see in a menu on a video game, for example.</p>
  
  <p>To achieve this I am adding an onfocusChaned listener to these views which runs a zoomIn animation on focus, and a zoomOut animation on losing focus:</p>
  
  <pre><code>@Override
  protected void onCreate(Bundle savedInstanceState)
  {
      super.onCreate(savedInstanceState);
      ViewGroup base = (ViewGroup) this.getLayoutInflater().inflate(R.layout.gridtest, null);
      ViewGroup container = (ViewGroup) base.getChildAt(0);
  
      this.animZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoomin);
      this.animZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoomout);
      int x=0;
  
      for(View child:this.getViews(container))
      {
          ImageView i = (ImageView) child;
          i.setPadding(10,10,10,10);
  
          if(x==0) { i.setBackgroundColor(Color.RED); x++; }
          else if(x==1) {i.setBackgroundColor(Color.GREEN); x++; }
          else if(x==2) {i.setBackgroundColor(Color.BLUE); x=0; }
  
          i.setTag(GridActivity.TAG_EMPTY);
          i.setOnFocusChangeListener(new View.OnFocusChangeListener()
          {
              @Override
              public void onFocusChange(View v, boolean hasFocus)
              {
                  if (hasFocus)
                  {
                      v.startAnimation(GridActivity.this.animZoomIn);
                  }
                  else
                  {
                      v.startAnimation(GridActivity.this.animZoomOut);
                  }
              }
          });
      }
  
      setContentView(base);
  }
  </code></pre>
  
  <p>zoomin.xml:</p>
  
  <pre><code>&lt;scale
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:zAdjustment="top"
  android:fillEnabled="true"
  android:fillAfter="true"
  android:fromXScale="1.0"
  android:toXScale="1.2"
  android:fromYScale="1.0"
  android:toYScale="1.1"
  android:pivotX="50%"
  android:pivotY="50%"
  android:duration="200" /&gt;
  </code></pre>
  
  <p>zoomout.xml:</p>
  
  <pre><code>&lt;scale
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:zAdjustment="bottom"
  android:fromXScale="1.2"
  android:toXScale="1.0"
  android:fromYScale="1.1"
  android:toYScale="1.0"
  android:duration="50" /&gt;
  </code></pre>
  
  <p>This works in so far as the views zoom in and out correctly, however the z-ordering of the views doesn't change... so the 'popped out' view is overlapped by the (smaller) view immediately to its right.</p>
  
  <p><img src="https://i.stack.imgur.com/Aw7TN.png" alt="enter image description here"></p>
  
  <p>I have tried using v.bringToFront() but that appears to move the focused view to the end of the parent layout, rather than actually re-order it z-wise.</p>
  
  <p>(edit)
  This is the effect I'm trying to duplicate
  <img src="https://i.stack.imgur.com/syqK8.png" alt="enter image description here"></p>