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