Android: Alignment of four squares

Question

I am trying to align four equally sized squares on an Android Screen & I have now tried what feels like a million different approaches, yet none of them seem to work :(.

What I've got at the moment is the following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/MasterLayout" android:layout_width="wrap_content"     android:layout_height="fill_parent"  android:background="#FFFFFF">
<TableLayout android:layout_width="fill_parent" android:id="@+id/mainlay" android:background="#444444" android:layout_weight="0.2" android:layout_height="wrap_content" android:padding="0dip">
    <TableRow android:layout_weight="1"  android:background="#BBBBBB" android:padding="0dip">
        <ImageView android:id="@+id/ImageView1" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
        <ImageView android:id="@+id/ImageView2" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
    </TableRow>
    <TableRow android:layout_weight="1" android:padding="0dip">
        <ImageView android:id="@+id/ImageView3" android:layout_marginLeft="10px" android:layout_weight="1" android:layout_marginRight="5px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
        <ImageView android:id="@+id/ImageView4" android:layout_marginLeft="5px" android:layout_weight="1" android:layout_marginRight="10px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:scaleType="centerInside" android:src="@drawable/bigbox_new"></ImageView>
    </TableRow>
</TableLayout>
</LinearLayout>

This basically does the job. However, every one of those four Images has a huge padding above and under it. How do I get rid of that? Or do I need to use a different Layout type alltogether?

To help illustrate my problem, here's a picture. On the left is what I got, on the right is what I need. Image

Thank you very much!

Cheers, Markus!

Answer 1

Remove layout_weight from your TableRows and set their layout_height to wrap_content. Then add an empty TableRow below them with layout_height set to fill_parent.