How do I make a GridLayout where elements fill the grid equally?

Question

I'm trying to set up a layout that's divided into four equal quadrants. With a bit of research, it looked like a GridLayout would be what I need, so I tried the following:

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/frame_border"
        android:columnCount="2"
        android:layout_margin="30sp"
        android:orientation="horizontal" >
        <LinearLayout
            android:layout_column="0"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="A"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="1"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="B"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="0"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="C"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="1"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="D"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
    </GridLayout>

@drawable/frame_border is defined as follows, drawing a simple white border around an element so I can see its exact bounds:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

  <solid android:color="@android:color/transparent" />

  <stroke
      android:width="2dp"
      android:color="#FFFFFF" />

</shape>

When I define the layout like this, instead of four equal quadrants, I get a box like this:

+-----------------------------------------------+
|A|B|                                           |
+-+-+                                           |
|C|D|                                           |
+-+-+                                           |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
+-----------------------------------------------+

If, instead of android:layout_weight="1" I use android:layout_gravity="fill" for the sub-layouts, I get the following, which is also wrong:

+-----------------------------------------------+
|A|B                                            |
+-+---------------------------------------------+
|C|D                                            |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
+-+---------------------------------------------+

What's the proper magic incantation to make it so that each of the four sub-layouts takes up half of the height and half of the width of the GridLayout , dividing it into four equal quadrants?

Answer 1

Use like below, You can change TextView to any LinearLayout .

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/choice_grid"
    android:background="@android:color/holo_blue_bright"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    app:alignmentMode="alignBounds"
    app:columnCount="2"
    app:rowCount="2"
    app:rowOrderPreserved="false">

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile1"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile2"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile3"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile4"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

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

Output:

Hope this will help you.