在android中创建一个3d形状的按钮

Create a 3d shaped button in android

提问by crazyPixel

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?

我试图在这里创建一个类似于圆形按钮的按钮 -
http://livetools.uiparade.com/index.html
（每个按钮看起来都在一个浸入部分内）我通过将按钮
放在一个圆形背景，并给它们一个小渐变，
虽然我得到了这个结果 -



（我会尽快上传我的代码）我怎样才能达到同样的外观？

回答by savanto

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.

这类似于您链接到的第一个按钮，使用以下代码。关键是使用<layer-list>将形状一层一层地叠加以产生所需的效果。

File: res/drawable/button.xml

文件：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 ImageViewthat will display this image.

在您的主布局中，添加一个ImageView将显示此图像的。

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

You can make the ImageViewclickable by giving it an OnClickListenerin the Java code.

您可以ImageView通过OnClickListener在 Java 代码中给它一个来使可点击。

回答by Droidgeek

Go to this link and Generate Custom 3D button.

转到此链接并生成自定义 3D 按钮。

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

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

buttonshape.xml

按钮形状.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="30dp"
/>
<gradient
android:gradientRadius="45"
android:centerX="35%"
android:centerY="50%"
android:startColor="##4CAB0B"
android:endColor="#004507"
android:type="radial"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android: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"
/>