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?

Answer 1

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