Androidでアイコン角丸ボタンを作る

iOS だと UIButton の Image にアイコン画像をセットするだけで角丸ボタンの中に画像が表示されるのだけど、Android だと角丸ボタンを作るのに background を使っちゃうので、どうやってアイコン画像を指定すれば良いのかわからなかった…。

というわけで、思い切り基本なのだと思うのだけど、ちょこっと迷ったのでメモ。

Layer-drawable で画像を重ねる

答えは簡単。
Layer List を使って画像を重ね合わせて Button の background に指定すれば OK。

• Drawable Resources

サンプルにこんなものが載ってる。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap android:src="@drawable/android_red"
        android:gravity="center" />
    </item>
    <item android:top="10dp" android:left="10dp">
      <bitmap android:src="@drawable/android_green"
        android:gravity="center" />
    </item>
    <item android:top="20dp" android:left="20dp">
      <bitmap android:src="@drawable/android_blue"
        android:gravity="center" />
    </item>
</layer-list>

Layer List の中の item タグの分だけ画像を重ねて描いてくれる。
上にあるitemから順番に重ねて描くので一番下のitemが一番上に描かれる。

今回は「角丸ボタン」に「画像」を重ねるので、最初に「角丸ボタン」を描いて、次に「画像」を描く。
こんな感じになる。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/image_round_button"
        android:id="@+id/round_shape"/>
    <item>
        <bitmap
            android:src="@drawable/home"
            android:filter="true"
            android:gravity="center" />
    </item>
</layer-list>

角丸ボタンは image_round_button.xml として res/drawable フォルダに入れておく。
画像は home.png を res/drawable フォルダに入れておく。

このファイルを icon_button.xml とでもして res/drawable フォルダに保存しておき、アイコン角丸ボタンにしたい Button の background で指定すれば、角丸ボタンに画像が表示される！

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/icon_button" />