Erstellen Sie eine 3D-geformte Schaltfläche in android

Question

Ich habe versucht, hier einen Knopf ähnlich in Blick auf die runden Tasten über zu schaffen - (sieht jede Taste wie es in einem Tauchschnitt)
http://livetools.uiparade.com/index.html
ich es hatte, indem die Taste
in einem Kreis Hintergrund und sie beide ein wenig Gefälle zu geben, die die gleiche
am Ende knapp über, obwohl ich dieses Ergebnis bekam -



(ich werde meinen Code hochzuladen, sobald ich kann), wie kann ich das gleiche erreichen aussehen?

Answer 1

Versuchen Sie diesen Code. Ich bin in der Lage, ein Bild zu erzeugen, wie dieses

sieht, die auf den ersten Knopf ähnlich ist, dass Sie eine Verknüpfung zu dem folgenden Code verwenden. Der Schlüssel ist, <layer-list> zu verwenden, um Formen übereinander zu schichten, um den gewünschten Effekt zu erzeugen.

Datei: res/ziehbar/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 Ihrem Haupt-Layout, fügen Sie ein ImageView, die dieses Bild angezeigt wird.

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

können Sie die ImageView klickbare machen, indem sie eine OnClickListener im Java-Code zu geben.

Answer 2

Gehen Sie zu diesem Link und generieren Sie benutzerdefinierte 3D-Schaltfläche.

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-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" 
/>