Android - Relative layout align items in horizontal so that they always have same space in between them

Question

I have 2 rows per 4 images on my Relative Layout as shown in this image:

I almost have it as it's required however when the app is run the bottom and top both left and right images stick to the edge of frame however the ones in the middle have a wider spacing possibly they are sticking to the one on the corners.

I want the 4 images that are 10dip away from Layout border to stay there however the 4 inner images I want to allways have same space between them and between the ones in the corner.

My layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/userl" />

    <TextView
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/logo"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@+id/logo"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000222" />

    <TextView
        android:id="@+id/city"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/address"
        android:layout_alignRight="@+id/address"
        android:layout_below="@+id/address"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <ImageView
        android:id="@+id/gsm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/city"
        android:layout_marginTop="14dp"
        android:layout_toLeftOf="@+id/address"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/diners"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/city"
        android:layout_alignTop="@+id/master"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/master"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/visa"
        android:layout_marginRight="54dp"
        android:layout_toLeftOf="@+id/diners"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/deposit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/gsm"
        android:layout_below="@+id/gsm"
        android:layout_marginTop="18dp"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/transfer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/visa"
        android:layout_alignTop="@+id/deposit"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/history"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/master"
        android:layout_alignTop="@+id/transfer"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/upn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/history"
        android:layout_toRightOf="@+id/master"
        android:src="@drawable/userl" />

    <ImageView
        android:id="@+id/visa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/deposit"
        android:layout_alignLeft="@+id/city"
        android:layout_marginLeft="21dp"
        android:src="@drawable/userl" />

</RelativeLayout>

However I move these the inner ones always snap to the outer ones.

Answer 1

Have you tried to adding LinearLayout with android:weightSum="4" and android:layout_width="0dip" + android:layout_weight="1" to your ImageView, like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#FFFFFF"
   android:orientation="vertical" >

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/userl" />

    <TextView
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/logo"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@+id/logo"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#000222" />

    <TextView
        android:id="@+id/city"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/address"
        android:layout_alignRight="@+id/address"
        android:layout_below="@+id/address"
        android:text="Small Text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

        // First row (under @id/logo)

        <LinearLayout
            android:id="@+id/row1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="14dp"
            android:weightSum="4"
            android:layout_below="@id/logo" >

            <ImageView
                android:id="@+id/gsm"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/diners"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/master"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/deposit"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

    </LinearLayout>

        // Second row (under @id/row1)

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:weightSum="4"
        android:layout_below="@id/row1" >

            <ImageView
                android:id="@+id/transfer"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/history"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/upn"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

            <ImageView
                android:id="@+id/visa"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/userl" />

    </LinearLayout>

</RelativeLayout>  

Hope this helps.