title: How to create state_pressed effect that reduces shadow and moves content (with layer lists)?
body: <p>I have a custom <code>box_background.xml</code> drawable which should add some decorations to a box (e.g. a RelativeLayout):</p>
  
  <ul>
  <li>A small border (2dp)</li>
  <li>A shadow (8dp), to the left and bottom</li>
  </ul>
  
  <p>When pressed, the view should change a little:</p>
  
  <ul>
  <li>The shadow is smaller (say, 4dp)</li>
  <li>The content of the box moves slightly to the left &amp; bottom (i.e. "towards the shadow")</li>
  <li>(2dp border remains the same, but of course it still has to wrap the moved content nicely.)</li>
  </ul>
  
  <p>By itself, <code>box_background_normal</code> works as intended (when <code>box_background_state_pressed</code> is commented out from the selector). What I don't understand: if <code>box_background_state_pressed</code> contains an item with padding (see the XML below), that padding affects the box even when it is <strong>not</strong> pressed.</p>
  
  <p>Maybe <code>&lt;padding&gt;</code> just can't be used to achieve this kind of "state pressed" functionality...? </p>
  
  <p>My specific questions:</p>
  
  <ul>
  <li>Why on earth does padding in <code>box_background_state_pressed</code> affect the
  view when it is <strong>not</strong> pressed?</li>
  <li>How can I achieve the kind of "state pressed" effect I described above?</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/EJkkR.png" width="200"><br>
  Example 1: <strong>not pressed</strong> state when <code>box_background_state_pressed</code> is not in use at all (commented out from the selector): border, shadow and content are ok.</p>
  
  <p><img src="https://i.stack.imgur.com/uV9nq.png" width="200"><br>
  Example 2: <strong>not pressed</strong> state when <code>box_background_state_pressed</code> is in use. This is broken; the bigger padding in <code>box_background_state_pressed</code> affects the content even though the box is not pressed.</p>
  
  <p>Android API level 18. Test device: Nexus 7 (2013).</p>
  
  <p><code>box_background.xml</code>:</p>
  
  <pre><code>&lt;selector
      xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_pressed="true" android:drawable="@drawable/box_background_state_pressed" /&gt;
      &lt;item android:drawable="@drawable/box_background_normal" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p><code>box_background_normal.xml</code>:</p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;item android:top="8dp" android:right="8dp"&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;solid android:color="#33000000" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
      &lt;item android:bottom="8dp" android:left="8dp"&gt;
          &lt;shape android:shape="rectangle"&gt;    
              &lt;stroke android:width="2dp" android:color="#FF22BB00" /&gt;    
              &lt;padding
                  android:left="10dp"
                  android:bottom="10dp"
                  android:right="2dp"
                  android:top="2dp"
                  /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p><code>box_background_state_pressed.xml</code> (you could probably do this with less than 3 layers; I'm just experimenting) :</p>
  
  <pre><code>&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;item android:top="4dp" android:right="4dp"&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;solid android:color="#33000000" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
      &lt;item android:bottom="4dp" android:left="4dp"&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;stroke android:width="2dp" android:color="#FFFF6677" /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
      &lt;item&gt;
          &lt;shape android:shape="rectangle"&gt;
              &lt;solid android:color="#00FFFFFF" /&gt;
              &lt;padding
                  android:left="2dp"
                  android:bottom="2dp"
                  android:right="10dp"
                  android:top="10dp"
                  /&gt;
          &lt;/shape&gt;
      &lt;/item&gt;
  
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>(Green and pink borders just for debugging reasons; normally it would be black.)</p>