Set button's background to image, scaling as needed

Question

I have a simple layout:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

and this is the output:

But I want the button with the background to stay the same size as it would without an image as a background (the right one). Basically, I want to "place" the button over the image so that the center of the image is on the button background, but the button doesn't resize to fit the whole background.

I have tried android:scaleType="centerCrop" on the Button but it didn't change anything. Any help is appreciated, thanks

Edit The size of the button needs to wrap_content because the text is dynamic

Answer 1

The button width and height are set to wrap_content. In this case, the background Image is a content, too. Simply change width and height to the value you want:

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

If you want all buttons to have the same size, consider creating a dimen value:

Dimen

    <resources>
        <dimen name="button_width">100dp</dimen>
        <dimen name="button_height">50dp</dimen>
    </resources>

Layout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button5"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:text="Button"
            android:gravity="center"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/button6"
            android:layout_width="@dimen/button_with"
            android:layout_height="@dimen/button_height"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

Also, consider using a ImageButton for your purpose.

ImageButton

EDIT

Try this out:

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_background"
            android:layout_alignStart="@+id/buttonId"
            android:layout_alignEnd="@+id/buttonId"
            android:layout_alignTop="@+id/buttonId"
            android:layout_alignBottom="@+id/buttonId"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/buttonId"/>

 </RelativeLayout>

Additionally, add a scaleType to the ImageView to make it centered, streched, whatever...

android:scaleType="center"

EDIT 2

adding padding to the button works for me:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_settings"
        android:layout_alignStart="@+id/buttonId"
        android:layout_alignEnd="@+id/buttonId"
        android:layout_alignTop="@+id/buttonId"
        android:layout_alignBottom="@+id/buttonId"
        android:scaleType="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:text="This is a button with a very long text that may take up multiple lines and stuff"
        android:id="@+id/buttonId"/>

</RelativeLayout>
<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_settings"
            android:layout_alignStart="@+id/buttonId2"
            android:layout_alignEnd="@+id/buttonId2"
            android:layout_alignTop="@+id/buttonId2"
            android:layout_alignBottom="@+id/buttonId2"
            android:scaleType="center"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a button with a very long text that may take up multiple lines and stuff"
            android:id="@+id/buttonId2"/>

</RelativeLayout>

Note: You can't really see the paddingStart and paddingEnd in the screenshot, but it works just fine.