設計XML按鈕Android

Question

以下是使用XML設計按鈕的應用程序示例。

我怎麼能有相同的design with XML？

如何讓我的按鈕look like it is floating就像下圖所示？

Answer 1

我想你會需要使用一個形狀繪製具有分層列表，這裏要說的是對頂部和底部（陰影效果）不同顏色的按鈕的例子。您將此設置爲Button的背景屬性。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

    <item> 
     <shape android:shape="rectangle" > 
      <corners android:radius="2dp" /> 

      <solid android:color="@color/button_border_dark" /> 
     </shape> 
    </item> 
    <item android:top="1dp"> 
     <shape android:shape="rectangle" > 
      <corners android:radius="2dp" /> 

      <solid android:color="@color/button_border_light" /> 
     </shape> 
    </item> 
    <item 
     android:bottom="1dp" 
     android:top="1dp"> 
     <shape android:shape="rectangle" > 
      <corners android:radius="2dp" /> 

      <solid android:color="@color/button_general_color" /> 
     </shape> 
    </item> 

</layer-list> 

Answer 2

用這個....

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 

    <Button 
    android:id="@+id/button1" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:layout_marginLeft="25dp" 
    android:layout_marginRight="25dp" 
    android:background="@drawable/selected" // selected is the name of your custom file 
    android:text="Register" 
    android:textColor="#fff" /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:layout_marginLeft="25dp" 
    android:layout_marginRight="25dp" 
    android:background="#37a8f7" 
    android:text="Login" 
    android:layout_marginTop="15dp" 
    android:textColor="#fff" /> 

</LinearLayout> 

你可以在紅色按鈕繪製文件夾自定義文件selected.xml。

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ff0000"/> 
    <corners android:radius="1dp"/> 
    <padding android:left="3dp" android:top="2dp" 
     android:right="3dp" android:bottom="2dp" /> 
</shape> 

並將其設置爲紅色按鈕。

而且你可以使你的藍色按鈕相同。

Answer 3

這裏是按鈕的XML。您還可以使用自定義字體以及陰影，使其成爲您想要的方式。

<Button 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:background="@android:color/holo_blue_dark" 
      android:textColor="@android:color/white" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:layout_gravity="center" 
      android:shadowColor="@android:color/holo_blue_light" 
      android:id="@+id/btnClickMe" 
      android:text="Click Me!" 
      />