title: Implicit Z-Ordering For ViewPagers
body: <p>I am trying to implement a <code>ViewPager.PageTransformer</code> that is nearly identical to the <a href="http://developer.android.com/training/animation/screen-slide.html" rel="noreferrer">example found here</a> labeled <code>DepthPageTransformer</code> (it is at the bottom of the page).</p>
  
  <p>However, instead of having the hierarchy follow a pattern where z-index decreases from left to right (i.e. views to the right will appear from below), I would like the z-index to increase from left to right (views to the left will appear from below).</p>
  
  <p>As a first attempt, i basically swapped the code in the example that represented pages coming in from the left vs. the right, but I found that there was an implicit z-ordering such that pages on the left were always <em>above</em> pages to the right, so as you swipe to see a page to the right, it will slide in fine but the view that disappears will disappear "on top" of the newly entered view.</p>
  
  <p><strong>Is there any way to adjust the z-indices of the pages served by a</strong> <code>ViewPager</code><strong>?</strong></p>
  
  <p>My first instinct is to somehow copy the <code>ViewPager</code> code from the support library, and modify the class to do my bidding, but it isn't clear to me where in that class the implicit ordering comes about. </p>
  
  <p>Here is my (majorly ripped off) <code>PageTransformer</code>:</p>
  
  <pre><code>public class DepthPageTransformer implements ViewPager.PageTransformer {
      private static float MIN_SCALE = 0.75f;
  
      public void transformPage(View view, float position) {
  
          int pageWidth = view.getWidth();
  
          if (position &lt; -1) { // [-Infinity,-1)
              // This page is way off-screen to the left.
              view.setAlpha(0);
  
          } else if (position &lt;= 0) { // [-1,0]  
              view.setAlpha(1 + position);
  
              // Counteract the default slide transition
              view.setTranslationX(pageWidth * -position);
  
              // Scale the page down (between MIN_SCALE and 1)
              float scaleFactor = MIN_SCALE
                      + (1 - MIN_SCALE) * (1 - Math.abs(position));
              view.setScaleX(scaleFactor);
              view.setScaleY(scaleFactor);
  
          } else if (position &lt;= 1) { // (0,1]            
              view.setAlpha(1);
              view.setTranslationX(0);
              view.setScaleX(1);
              view.setScaleY(1);
  
          } else { // (1,+Infinity]
              // This page is way off-screen to the right.
              view.setAlpha(0);
          }
      }
  }
  </code></pre>