Android - Scaling of Button with background image

Question

I have a screen layout that includes 3 Button controls contained within a linear layout (horizontal). The Buttons each have a background image. See XML below :

<LinearLayout
    android:id="@+id/notificationform_llt_ApprovalBtns"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:orientation="horizontal"
    android:paddingLeft="8dp"
    android:paddingRight="8dp" >

    <Button
        android:id="@+id/notificationform_btn_Approve"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_approve"
        android:onClick="btnApprove_Click" />
    <Button
        android:id="@+id/notificationform_btn_Reject"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/btn_reject"
        android:onClick="btnReject_Click" />
    <Button
        android:id="@+id/notificationform_btn_Delegate"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_delegate"
        android:onClick="btnDelegate_Click" />
</LinearLayout>

The screen looks great on my Galaxy W phone (3.7"), but when running on my Nexus 7 the buttons are stretched horizontally but not vertically and therefore look squashed. If I understand it right both these devices have similar resolution and both look for images in the drawable-hdpi folder which is where my images are stored. I've tried making the images 9-patch but this didn't make any difference. How can I make the images scale proportionally on both height and width?

Solution

The buttons get stretched horizontally because the LinearLayout is set to fill parent, and each button have weights that make them stretch. The heights are set to wrap_content, and there isn't any content. The image is set as a background, which won't have any effect on how big the button is.

It's probably best you change the Buttons to ImageButtons and use android:src instead of android:background. For example :

<ImageButton
    android:id="@+id/notificationform_btn_Approve"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:src="@drawable/btn_approve"
    android:onClick="btnApprove_Click" />