Question

I am looking to have a button’s background be composed of a backround image, with another image overlayed on top. I do not need the button to have any text.

I have tried the following approach:

<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:background="@drawable/button_background" />

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <bitmap android:src="@drawable/background_image" android:gravity="center"></bitmap>
  </item>
  <item>
    <bitmap android:src="@drawable/foreground_image" android:gravity="center"></bitmap>
  </item>
</layer-list>

However, when I do this, the foreground image is stretched to the size of the background image, even though I am specifying gravity to center.

Answer 1

Use an imagebutton with background image, like this:

<ImageButton android:layout_width="wrap_content"
        android:background="@drawable/background_image" android:id="@+id/imageButton1"
        android:layout_height="wrap_content" android:src="@drawable/foreground_image"></ImageButton>