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

Question

我试图在这里创建一个类似圆形按钮的按钮 -
http://livetools.uiparade.com/index.html
（每个按钮看起来都像是在浸入的部分里面）我把它放在圆形背景中并给它们两个渐变的同时给它们带来了它虽然我得到了这个结果 -



（我会尽可能上传我的代码）我怎样才能达到同样的效果？

Answer 1

试试这段代码。我能够生成一个看起来像这样的图像

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

文件：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>

在主布局中，添加将显示此图片的ImageView。

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

您可以通过在Java代码中为ImageView提供OnClickListener来使{{1}}可点击。

Answer 2

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

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

<强> buttonshape.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
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"
/>