Divide the width between the table elements evenly

Question

I am trying to make a table to display something like this:

 ________
|__|__|__|
|__|__|__|

All boxes need to be split evenly, and the middle box in the bottom row will have a very large image that will be forced into a smaller size. This is my current XML layout, but I wind up with a layout like this:

 ________
|_|____|_|
|_|____|_|

---

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
        <TextView
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Top Center"
            android:padding="3dip" />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Unused"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="----&gt;" />
        <ImageView
            android:id="@+id/mainImg"
            android:layout_column="2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
        />
        <TextView
            android:layout_column="3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="&lt;----" />
    </TableRow>
</TableLayout>

What am I doing wrong?

Answer 1

I’m not sure what you’re doing wrong. I tried a table layout like yours in the past and could not get it to work properly. I’ve found accomplishing a layout like yours to be easier using a relative layout.

You set the left box to left_align, the right box to right_align, etc. Then give them all a dip value to correspond with the size screen you are currently using and they will update correctly across other screen sizes.

Unfortunately, once you get beyond 3 in a row (say 4 or 5 boxes), this fix no longer works.

Edit: As per Mal's comment it appears an alternative is to use a relative layout with his XML code.

I will post my original fix for reference. I also neglected to mention this is actually a relative layout inside a frame layout.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >  

    <Button
            android:id="@+id/start"
            android:layout_width="110dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
        android:text="@string/title_start" />

    <Button
        android:id="@+id/options"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_options" />   

    <Button
        android:id="@+id/scores"
        android:layout_width="110dip"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/title_scores" />  

</RelativeLayout>

Answer 2

You have to use linear layouts with weights.

Try this out, you may have to add some more stuff, but it should get you started.

<?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:layout_width:"fill_parent" android:layout_height:"fill_parent" android:orientation="vertical">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
            <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</LinearLayout>