How to keep fixed aspect ratio for a button in android

Question

I have a set of buttons in a horizontal layout. I have set an image drawable as the background for each of these buttons. But when I make the linear layout to span the width of the screen, the buttons lose their aspect ratio. I want to keep its aspect ratio as is. I mean I have to keep it square shaped through out the application what ever the screen resolution is. How can I do this. Any suggestions is appreciated.

Here is my XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip" >
            <Button
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
            <Button
                android:id="@+id/b3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
            <Button
                android:id="@+id/b4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Thank you

Answer 1

I'm giving an improvement to your XML. I have not tested it, but it should work. The suggested changes are, instead of setting the image as background, set it as src for ImageButtons. Also, if you insists the Button, you can wrap each of the buttons with another layout and set its gravity property to "center". Take a look at the following XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip" >
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
    </LinearLayout>
</LinearLayout>

Feel free to ask if it doesn't work.