Android Layout - Spacing 6 images

Question

im trying to work out how to space 6 images on the screen in a 2X3 formation, All images have to be square and the same size with a small margin around them. Here is what I have so far which is giving me this:

Which comes from Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:weightSum="3">

    <!-- Top Row -->
    <LinearLayout
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:id="@+id/relative_1"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="3dp"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="3dp">
            <ImageView 
                android:id="@+id/img_head"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_head"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_head"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_head"
                android:layout_alignLeft="@id/img_head"
                android:layout_alignRight="@id/img_head"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_head"
                />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/relative_2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="6dp"
            android:layout_marginBottom="3dp">
            <ImageView 
                android:id="@+id/img_custom1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_custom1"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_custom1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_custom1"
                android:layout_alignLeft="@id/img_custom1"
                android:layout_alignRight="@id/img_custom1"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_custom1"
                />
        </RelativeLayout>
    </LinearLayout>


     <!-- Second Row -->
    <LinearLayout
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:id="@+id/relative_3"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="3dp"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp">
            <ImageView 
                android:id="@+id/img_custom2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_custom2"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_custom2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_custom2"
                android:layout_alignLeft="@id/img_custom2"
                android:layout_alignRight="@id/img_custom2"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_custom2"
                />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/relative_4"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="3dp">
            <ImageView 
                android:id="@+id/img_custom3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_custom3"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_custom3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_custom3"
                android:layout_alignLeft="@id/img_custom3"
                android:layout_alignRight="@id/img_custom3"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_custom3"
                />
        </RelativeLayout>
    </LinearLayout>


    <!-- Third Row -->
    <LinearLayout
        android:baselineAligned="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:id="@+id/relative_5"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="3dp"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="6dp">
            <ImageView 
                android:id="@+id/img_custom4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_custom4"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_custom4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_custom4"
                android:layout_alignLeft="@id/img_custom4"
                android:layout_alignRight="@id/img_custom4"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_custom4"
                />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/relative_6"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="3dp"
            android:layout_marginBottom="6dp">
            <ImageView 
                android:id="@+id/img_custom5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/text_custom5"
                android:src="@drawable/headlines"
                android:clickable="true"
                />
            <TextView 
                android:id="@+id/text_custom5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignTop="@id/img_custom5"
                android:layout_alignLeft="@id/img_custom5"
                android:layout_alignRight="@id/img_custom5"
                android:layout_margin="1dp"
                android:gravity="center"
                android:text="@string/text_custom5"
                />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

As you can see the bottom images are squashed, i have tried using android:weight on the linear layouts but supposedly i cant use that. What do i need to change?

Answer 1

use a GridView. it allows you to arrange sub views into an arbitrary grid arrangement with a high degree of customizability.