[Android]xmlで角丸ボタンを作る

Androidを担当しています、森脇です。
今回は画像を使わずに、xmlだけで角丸ボタンを作ってみようと思います。

ShapeDrawableを使ってボタン用のxmlファイルを作成
ShapeDrawableを利用してボタンのパーツを定義していきます。
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ボタンが押されてない時 -->
    <item android:state_pressed="false">
        <!-- ボタンの形状 -->
        <shape android:shape="rectangle">
            <!-- ボタンの色 -->
            <solid android:color="#ff4effa5"/>
            <!-- ボタンの枠線 -->
            <stroke android:width="1dp" android:color="#fffdfdfd"/>
            <!-- ボタンの角の半径 -->
            <corners android:radius="4dp"/>
            <!-- ボタン内の余白 -->
            <padding android:top="8dp" android:left="16dp" android:bottom="8dp" android:right="16dp"/>
        </shape>
    </item>
    <!-- ボタンが押された時 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ff409048"/>
            <stroke android:width="1dp" android:color="#fffdfdfd"/>
            <corners android:radius="4dp"/>
            <padding android:top="8dp" android:left="16dp" android:bottom="8dp" android:right="16dp"/>
        </shape>
    </item>
</selector>

<shape>タグではボタンの形状を指定します。
<solid>タグではボタンの色、<stroke>タグではボタンの枠線の太さ、色を指定します。
<corners>タグではボタンの角の半径を指定します。
最後に<padding>タグではボタン内の余白を指定しています。
今回はボタンが押されてない時と、ボタンが押された時それぞれでこれらを定義しています。

あとはできあがったxmlファイルをボタンの背景に設定するだけです。
今回は似たようなxmlファイルをあと2つ作成してみました。

押すと色が変わります。

こんなかんじで簡単なボタンなら開発者側だけで用意することができます。デザイナーの負担も減りますし、何より画像に比べて処理速度が速いのでオススメです。
他にも<gradient>タグでグラデーションをかけたり、LayerListを使えばもう少し複雑なボタンを描画することもできます。
http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
感覚的にCSS3でいろいろ工夫するのに似てて楽しいので、ぜひいろいろ試してみてください。