title: 3d button with click effect
body: <p>I'm trying to create a flat button with a 3D effect that depresses when you click it
  <a href="https://i.stack.imgur.com/DShCp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DShCp.png" alt="flatbutton"></a></p>
  
  <p>I have styled a clickable textview with a selector that shows an unpressed version and a pressed version. The trouble is I don't know how to get the text to appear to move in the same way the background does i.e. it should look like a physical key being pushed down so the text moves down a bit when it's pressed and returns when it's released. Here's my code.</p>
  
  <p>TextView/button I want to style:</p>
  
  <pre><code>&lt;TextView
      android:id="@+id/chip_view"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:paddingLeft="15dp"
      android:paddingRight="15dp"
      android:paddingTop="10dp"
      android:paddingBottom="10dp"
      android:ellipsize="end"
      android:singleLine="true"
      android:scrollHorizontally="false"
      android:textColor="@color/speedDialText"
      android:background="@drawable/chip_view_selector"
  /&gt;
  </code></pre>
  
  <p>chip_view_selector.xml:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
      &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
          &lt;item android:state_pressed="false"&gt;
              &lt;layer-list&gt;
                  &lt;item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/&gt;
                  &lt;item android:drawable="@drawable/chip_view_btn_face" android:bottom="4dp"/&gt;
              &lt;/layer-list&gt;
          &lt;/item&gt;
  
          &lt;item android:state_pressed="true"&gt;
              &lt;layer-list&gt;
                  &lt;item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/&gt;
                  &lt;item android:drawable="@drawable/chip_view_btn_face" android:top="4dp" android:bottom="1dp" /&gt;
              &lt;/layer-list&gt;
          &lt;/item&gt;
      &lt;/selector&gt;
  </code></pre>
  
  <p>chip_view_btn_face.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item&gt;
      &lt;!-- Button foreground --&gt;
      &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"&gt;
          &lt;solid android:color="@color/speedDialButtonBackground" /&gt;
          &lt;padding
              android:left="1dp"
              android:right="1dp"
              android:bottom="1dp"
              android:top="1dp" /&gt;
          &lt;corners android:radius="6dp" /&gt;
      &lt;/shape&gt;
      &lt;/item&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>chip_view_shadow.xml (it's not really the shadow but the underneath layer that gives it a 3d look):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item&gt;
      &lt;!-- 3d effect part of button (not the button face) --&gt;
          &lt;shape&gt;
              &lt;solid android:color="#D3D3D3" /&gt;
              &lt;corners android:radius="6dp" /&gt;
          &lt;/shape&gt;
  &lt;/item&gt;
  &lt;/selector&gt;
  </code></pre>