Evenly spaced out row of buttons required

Question

Using 3 rows and 4 columns I have tried to evenly space out all the buttons horizontally but have failed. vertically is fine.

Below are 3 different attempts to space out the buttons, 1 for each of my 3 rows. The first row stretches the graphic (which is unwanted), the second row does not stretch but there is no spacing (spacing between the graphics is required), while the third stretches without any spacing. Please help me to evenly space these out. Other peoples solutions on this same site have not worked. Should I try using a table instead?

Visual summary= without stretching the graphic: I want | x x x x | and not | xxxx |

<?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:orientation="vertical" >

<LinearLayout
    android:id="@+id/row1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal" >

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight=".1" >
    </View>

    <Button
        android:id="@+id/a1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/blanktilesml"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/clear64" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight=".1" >
    </View>

    <Button
        android:id="@+id/a2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/blanktilesml"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/clear64" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight=".1" >
    </View>

    <Button
        android:id="@+id/a3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/blanktilesml"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/clear64" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight=".1" >
    </View>

    <Button
        android:id="@+id/a4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/blanktilesml"
        android:gravity="center_horizontal|center_vertical"
        android:src="@drawable/clear64" />

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight=".1" >
    </View>
</LinearLayout>

<LinearLayout
    android:id="@+id/row2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/b1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blanktilesml"
            android:gravity="center"
            android:src="@drawable/clear64" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/b2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blanktilesml"
            android:gravity="center"
            android:src="@drawable/clear64" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/b3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blanktilesml"
            android:gravity="center"
            android:src="@drawable/clear64" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/b4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/blanktilesml"
            android:gravity="center"
            android:src="@drawable/clear64" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/row3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal"
    android:weightSum="1" >

    <Button
        android:id="@+id/c1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".25"
        android:background="@drawable/blanktilesml"
        android:paddingLeft="10dp"
        android:src="@drawable/clear64" />

    <Button
        android:id="@+id/c2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".25"
        android:background="@drawable/blanktilesml"
        android:paddingLeft="10dp"
        android:src="@drawable/clear64" />

    <Button
        android:id="@+id/c3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".25"
        android:background="@drawable/blanktilesml"
        android:paddingLeft="10dp"
        android:src="@drawable/clear64" />

    <Button
        android:id="@+id/c4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".25"
        android:background="@drawable/blanktilesml"
        android:paddingLeft="10dp"
        android:src="@drawable/clear64" />
</LinearLayout>

</LinearLayout>

Answer 1

Try this:

<LinearLayout
    android:id="@+id/row1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageButton
            android:id="@+id/a1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/arrow_up_float"
            android:gravity="center_horizontal|center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageButton
            android:id="@+id/a2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/arrow_up_float"
            android:gravity="center_horizontal|center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageButton
            android:id="@+id/a3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/arrow_up_float"
            android:gravity="center_horizontal|center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageButton
            android:id="@+id/a4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/arrow_up_float"
            android:gravity="center_horizontal|center_vertical"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

try this for your first row. Similarly can be done for all the row,

So unless you don't want the images to be stretched you need to rap them in a layout. Doing so you will manage the spacing and the drawable will look just fine. If you stretch the buttons then the drawable will also be stretched accordingly.

Answer 2

Here is what I did with a calculator project I was working on. Requiring buttons in rows all the same size. You will need to add padding to your buttons to suit your needs.:

 <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:padding="5dp"
        android:id="@+id/NumberPad">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/NumberRow123"
            android:layout_weight="1">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button1"
                android:layout_weight="1"
                android:background="@drawable/unpressed7"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button2"
                android:layout_weight="1"
                android:background="@drawable/unpressed8"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/button3"
                android:layout_weight="1"
                android:background="@drawable/unpressed9"/>

        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/NumerRow456"
            android:layout_weight="1">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button4"
                android:layout_weight="1"
                android:background="@drawable/unpressed4"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button5"
                android:layout_weight="1"
                android:background="@drawable/unpressed5"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button6"
                android:layout_weight="1"
                android:background="@drawable/unpressed6"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:id="@+id/NumberRow789">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/button7"
                android:layout_weight="1"
                android:background="@drawable/unpressed1"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button8"
                android:layout_weight="1"
                android:background="@drawable/unpressed2"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/button9"
                android:layout_weight="1"
                android:background="@drawable/unpressed3"/>

        </LinearLayout>