Create a 3d shaped button in android

Question

I was trying to create a button similar in look to the round buttons over here -
http://livetools.uiparade.com/index.html
(every button looks like it is inside an immersed section) I had it by placing the button
in a circle background and giving them both a little gradient that didnt end up the same
though I got this result -



(I will upload my code once I can) how can I achieve that same look?

Answer 1

Try this code. I am able to produce an image that looks like this

which is similar to the first button you link to, using the following code. The key is to use <layer-list> to layer shapes one over the other to produce the desired effect.

File: res/drawable/button.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- Outside border/shadow -->
  <item>
    <shape android:shape="oval">
      <size android:width="200dp" android:height="200dp" />
      <gradient android:angle="90" android:startColor="#f4f4f4" android:endColor="#b9b9b9" />
    </shape>
  </item>

  <!-- Inset -->
  <item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
      <shape android:shape="oval">
        <gradient android:angle="90" android:startColor="#dcdcdc" android:endColor="#c9c9c9" />
      </shape>
  </item>

  <!-- Inside border/shadow -->
  <item android:top="15dp" android:left="15dp" android:right="15dp" android:bottom="15dp">
    <shape android:shape="oval">
      <gradient android:angle="90" android:startColor="#8c8c8c" android:endColor="#cbcbcb" />
    </shape>
  </item>

  <!-- Main button -->
  <item android:top="16dp" android:left="16dp" android:right="16dp" android:bottom="16dp">
    <shape android:shape="oval">
      <solid android:color="#ffffff" />
    </shape>
  </item>

  <!-- Button image -->
  <item android:top="70dp" android:left="70dp" android:right="70dp" android:bottom="70dp">
    <shape android:shape="rectangle">
      <solid android:color="#3b88c2" />
      <corners android:radius="20dp" />
    </shape>
  </item>

  <item android:top="75dp" android:left="75dp" android:right="75dp" android:bottom="75dp">
    <shape android:shape="rectangle">
      <solid android:color="#ffffff" />
      <corners android:radius="20dp" />
    </shape>
  </item>

  <item android:top="80dp" android:left="80dp" android:right="80dp" android:bottom="80dp">
    <shape android:shape="rectangle">
      <solid android:color="#3b88c2" />
      <corners android:radius="20dp" />
    </shape>
  </item>

</layer-list>

In your main layout, add an ImageView that will display this image.

<ImageView
    android:src="@drawable/button" />

You can make the ImageView clickable by giving it an OnClickListener in the Java code.