Layer-drawable で画像を重ねる

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

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

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