Android: Alignment of four squares

Question

Hello There

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

Try using the scaleType as centerCrop, if the image size is greater then this will do the trick for you. But this is not the best way to do it, better would be to change the image resources.

HTH !

Answer 2

Try setting the ImageView height to fill_parent, I think that should do the trick. Anyway, it would help if your XML properties were split in lines, it's hard for the rest of us to read a single line of properties.

Also, why do you place a TableLayout inside a LinearLayout? Unless you have more elements inside that Linear, you can get rid of it.

Answer 3

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.