Center items horizontally in a GridLayout

Question

I try to center all my items in my GridLayout, I tried many things (use a RelativeLayout as a parent, then use layout_centerInParent, use the basic android:layout_gravity="center", try to add some space element...) but I didn't succeed to center my items as I want. As an image his better than words, here is what I have :

And here what I want :

And my current code is :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#66000000">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="0dp" ... />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.50">

        <android.support.v7.widget.GridLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:grid="http://schemas.android.com/apk/res-auto"
            android:id="@+id/droparea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.50"
            grid:columnCount="3"
            grid:orientation="horizontal">

            <SquareRelativeLayout
                android:id="@+id/relativelayout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                grid:layout_columnWeight="1"
                grid:layout_gravity="fill"
                android:background="@drawable/round_layout"
                android:gravity="center_vertical|center_horizontal">
                ...
            </SquareRelativeLayout>

            <SquareRelativeLayout
                android:id="@+id/relativelayout2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                grid:layout_columnWeight="1"
                grid:layout_gravity="fill"
                android:background="@drawable/round_layout"
                android:gravity="center_vertical|center_horizontal">
                ...
            </SquareRelativeLayout>

            <SquareRelativeLayout
                android:id="@+id/relativelayout3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                grid:layout_columnWeight="1"
                grid:layout_gravity="fill"
                android:background="@drawable/round_layout"
                android:gravity="center_vertical|center_horizontal"> 
                ...
            </SquareRelativeLayout>

            <SquareRelativeLayout
                android:id="@+id/relativelayout4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                grid:layout_columnWeight="1"
                grid:layout_gravity="fill"
                android:background="@drawable/round_layout"
                android:gravity="center_vertical|center_horizontal">
                ....
            </SquareRelativeLayout>

            <SquareRelativeLayout
                android:id="@+id/relativelayout5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                grid:layout_columnWeight="1"
                grid:layout_gravity="fill"
                android:background="@drawable/round_layout"
                android:gravity="center_vertical|center_horizontal">
                ...
            </SquareRelativeLayout>

            </android.support.v7.widget.GridLayout>
        </RelativeLayout>

        <include layout="@layout/draggable_linearlayout"/>

    </LinearLayout>

</RelativeLayout>

Do you have any idea, how I can have a such result with a GridLayout or something equivalent ?

Ps : the SquareRelativeLayout is just a simple CustomLayout that force my RelativeLayout to be a square (width = height).

Answer 1

Do you need a GridLayout? If no, you can try something like this:

    <LinearLayout
        android:id="@+id/firstRow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/white"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/white"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/white"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/SecondRow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:weightSum="3">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/white"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/white"/>
    </LinearLayout>