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.

Answer 2

To expand on the nine-patch suggestion, Android supports the ability to use a nine-patch image to scale an image for a button/view group to any size. One caveat is that the image has to be one that fits the nine-patch requirement -- generally speaking, image where the corners are constant, and the middle/edges must be able to scale to any dimension. If your image is a photo for instance, it won't work. Most nine-patch images have a solid color center and 'simple' edges.

The first step is to create a nine-patch drawable in your drawable folder that references your nine-patch image. The nine-patch image should have a filename similar to *.9.png.

<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/button_image" />

Once this is done, you can add the background property to the Button and it should scale seamlessly with the content (the background property below should refer to the <nine-patch> XML resource you created above.

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

I will note that your image in particular, with the horizontal lines, looks like a bad candidate for the nine-patch solution, but it might be worth a look if you're flexible on the image used.