Create A 3d Shaped Button In Android

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)

Solution 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-listxmlns:android="http://schemas.android.com/apk/res/android"><!-- Outside border/shadow --><item><shapeandroid:shape="oval"><sizeandroid:width="200dp"android:height="200dp" /><gradientandroid:angle="90"android:startColor="#f4f4f4"android:endColor="#b9b9b9" /></shape></item><!-- Inset --><itemandroid:top="1dp"android:left="1dp"android:right="1dp"android:bottom="1dp"><shapeandroid:shape="oval"><gradientandroid:angle="90"android:startColor="#dcdcdc"android:endColor="#c9c9c9" /></shape></item><!-- Inside border/shadow --><itemandroid:top="15dp"android:left="15dp"android:right="15dp"android:bottom="15dp"><shapeandroid:shape="oval"><gradientandroid:angle="90"android:startColor="#8c8c8c"android:endColor="#cbcbcb" /></shape></item><!-- Main button --><itemandroid:top="16dp"android:left="16dp"android:right="16dp"android:bottom="16dp"><shapeandroid:shape="oval"><solidandroid:color="#ffffff" /></shape></item><!-- Button image --><itemandroid:top="70dp"android:left="70dp"android:right="70dp"android:bottom="70dp"><shapeandroid:shape="rectangle"><solidandroid:color="#3b88c2" /><cornersandroid:radius="20dp" /></shape></item><itemandroid:top="75dp"android:left="75dp"android:right="75dp"android:bottom="75dp"><shapeandroid:shape="rectangle"><solidandroid:color="#ffffff" /><cornersandroid:radius="20dp" /></shape></item><itemandroid:top="80dp"android:left="80dp"android:right="80dp"android:bottom="80dp"><shapeandroid:shape="rectangle"><solidandroid:color="#3b88c2" /><cornersandroid:radius="20dp" /></shape></item></layer-list>

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

<ImageViewandroid:src="@drawable/button" />

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

Solution 2:

Go to this link and Generate Custom 3D button.

http://angrytools.com/android/button/

buttonshape.xml

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><cornersandroid:radius="30dp"
/><gradientandroid:gradientRadius="45"android:centerX="35%"android:centerY="50%"android:startColor="##4CAB0B"android:endColor="#004507"android:type="radial"
/><paddingandroid:left="0dp"android:top="0dp"android:right="0dp"android:bottom="0dp"
/><sizeandroid:width="270dp"android:height="60dp"
/><strokeandroid:width="3dp"android:color="#0B8717"
/></shape>

Button Code

<Button
android:id="@+id/angry_btn"android:text="Button"android:textColor="#FFFFFF"android:textSize="30sp"android:layout_width="270dp"android:layout_height="60dp"android:background="@drawable/buttonshape"android:shadowColor="#A8A8A8"android:shadowDx="3"android:shadowDy="2"android:shadowRadius="8"
/>