title: Android XML layer-list: How to position the top layer
body: <p>I have this XML drawable - tab_background_unselected:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;item&gt;
          &lt;shape android:shape="rectangle" &gt;
              &lt;solid android:color="@color/background_grey" /&gt;            
          &lt;/shape&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>which creates this shape:</p>
  
  <p><img src="https://i.stack.imgur.com/lkauX.png" alt="background rectangle"></p>
  
  <p>and this arrow shape xml drawable - tab_selected_arrow:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;item&gt;
          &lt;rotate
              android:fromDegrees="45"
              android:pivotX="-40%"
              android:pivotY="87%"
              android:toDegrees="45" &gt;
              &lt;shape android:shape="rectangle" &gt;
                  &lt;solid android:color="@color/background_dark_green" /&gt;
              &lt;/shape&gt;
          &lt;/rotate&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>which creates this shape:</p>
  
  <p><img src="https://i.stack.imgur.com/L0B44.png" alt="top layer triangle"></p>
  
  <p>I'm using this drawable XML (instead of PNG file) in order to create a layer-list: </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  
      &lt;item android:drawable="@drawable/tab_background_unselected"&gt;
      &lt;/item&gt;
      &lt;item android:drawable="@drawable/tab_selected_arrow"&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>but I want the final image to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/djgJR.png" alt="final image"></p>
  
  <p>I don't know how to set the gravity of the arrow (the second item and the top layer) to center|bottom...
  I've tried using <code>bitmap</code> tag but it only accepts image files.</p>
  
  <p>I need this to be a XML drawable because</p>
  
  <ol>
  <li>I need it to be inside a drawable selector</li>
  <li>I don't want to make it a PNG and create different file for each screen resolution</li>
  </ol>