Android: 如何製作膠囊狀按鈕

假設你需要在Android App上刻畫一個膠囊形狀的按鈕，也就是操場形狀（長方形+兩個半圓，或者說類橢圓），像是下圖這樣：

膠囊狀按鈕示意圖

然而設計只有給你一個icon ，無法提供給你整個膠囊形狀的圖。（基於設計彈性也應該如此：畢竟右邊的文字可能需要依照語言替換，而按鈕整體大小也可能需要視環境調整、不能畫死）

那麼該怎麼做呢？

網路上有人說可以用java寫，但是java code拿來設定靜態介面實在太費事、不直觀、容易缺漏，可不可以只用XML做到呢？

答案是可以的，只要使用View的 android:background— —指定其為特定drawable即可。

步驟1: 準備特殊形狀

在這裡，特殊形狀指的是膠囊形。在 res/drawable 裡面新增一個shape_capsule.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="@android:color/background_light" />
    <corners android:radius="900dp"/>
</shape>

小技巧：只要把角落corners的半徑android:radius數值設定為超大，就可以做到「角是半圓形」的效果。如果想針對單個角落設定，可以用android:topLeftRadius/android:bottomRightRadius/…等。

步驟2:套用background

創建一個 Button並設定 android:background 為你剛剛創建的形狀：

Button，background套用了膠囊形狀的shape xml。

完成！
上述的xml:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_capsule"
    android:text="Button" />

如何染色/更換形狀色彩

直接指定

其實在shape裡面你也可以直接指定顏色。修改剛才的shape_capsule.xml、solid tag裡面的 android:color 即可。

小技巧：可以使用stroke tag來為shape指定邊線、或者使用gradient tag取代solid tag來製作漸層顏色。

使用Tint

如果你有很多個Button都要用不同color、又不想要每個Button重新創建一份shape，可以使用 android:tint 系列。 android:tint是Android在Lollipop (Android 5.0 / API 21)引入的屬性，中文直接翻譯叫做「著色器」。一般是用來為圖形重新著色的。舉例來說，如果你有一張像是下圖的純色icon：

純色icon示意圖

那麼你可以透過設定 android:tint 來為其重新著色：

著色後的ImageView。

上述的xml程式碼：

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_play"
    android:tint="@android:color/holo_orange_light" />

為Button指派著色器Tint

為剛剛的Button指派 android:backgroundTint ：

Button，指派了background和backgroundTint。

完成！
上述的xml:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_capsule"
    android:backgroundTint="@android:color/holo_orange_light"
    android:text="Button" />

補充：如何在Button左側加上icon

只要使用 android:drawableStart 就可以囉！

Button，設定background、backgroundTint、drawableStart。

也可以在其他方向放置drawable ( android:drawableTop / android:drawableBottom / android:drawableEnd )。

上述xml:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape_capsule"
    android:backgroundTint="@android:color/holo_orange_light"
    android:drawableStart="@drawable/ic_menu_30dp"
    android:text="Button" />

注意：設定 android:drawableStart 系列的icon大小與調適是相當痛苦/幾乎辦不到的。如果無法拿到跟按鈕大小一致的icon，通常建議用Button+ImageView或者ImageButton+TextView組合製作。

懂得這些屬性的話，要做出一開始的Button形狀也只差調整padding與更改文字/圖示了。

如果你可以舉一反三、撰寫自定義的shape的話，那就可以製作出各種形狀的Button、甚至TextView囉！

我是雷哥，一位萌新開發者。歡迎與我交流、討論遊戲與Android App相關議題。如果我的文章有幫助到您，也請不吝給點掌聲 :)