Android: create square cell table

Question

I am designing a basic tic tac toe game for android as my 'Hello World' project. I want a 3x3 table with all cells as squares in it.

The way I've done makes the column shrink if there is nothing in any of the cells in it. I am trying this with the 9 TextViews in a GridLayout.

I welcome all suggestions to do this.

My way looks like this -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/LayoutStyle"
    tools:context=".GameBoard">


    <GridLayout
        style="@style/GameBoardGrid"
        android:id="@+id/gridTitle">

        <TextView
            android:id="@+id/tile00"
            style="@style/GameTile"
            android:layout_column="0"
            android:layout_row="0"
            android:text=""/>

        <TextView
            android:id="@+id/tile01"
            style="@style/GameTile"
            android:layout_column="1"
            android:layout_row="0"
            android:text="X"/>

        <TextView
            android:id="@+id/tile02"
            style="@style/GameTile"
            android:layout_column="2"
            android:layout_row="0"
            android:text="O"/>

        <TextView
            android:id="@+id/tile10"
            style="@style/GameTile"
            android:layout_column="0"
            android:layout_row="1"
            android:text=""/>

        <TextView
            android:id="@+id/tile11"
            style="@style/GameTile"
            android:layout_column="1"
            android:layout_row="1"
            android:text="O"/>

        <TextView
            android:id="@+id/tile12"
            style="@style/GameTile"
            android:layout_column="2"
            android:layout_row="1"
            android:text="X"/>

        <TextView
            android:id="@+id/tile20"
            style="@style/GameTile"
            android:layout_column="0"
            android:layout_row="2"
            android:text=""/>

        <TextView
            android:id="@+id/tile21"
            style="@style/GameTile"
            android:layout_column="1"
            android:layout_row="2"
            android:text="X"/>

        <TextView
            android:id="@+id/tile22"
            style="@style/GameTile"
            android:layout_column="2"
            android:layout_row="2"
            android:text="O"/>

    </GridLayout>

</RelativeLayout>

Where, the style GameTile is -

<style name="GameTile">
    <item name="android:textSize">60sp</item>
    <item name="android:layout_gravity">fill</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">@dimen/padding_grid_text</item>
    <item name="android:paddingRight">@dimen/padding_grid_text</item>
    <item name="android:fontFamily">Roboto-Thin</item>
    <item name="android:background">@color/gray</item>
    <item name="android:layout_margin">@dimen/margin_grid_cell</item>
    <item name="android:layout_weight">1</item>
</style>

Answer 1

Change your GridLayout to LinearLayout as follows:

    <TextView
            android:id="@+id/tile00"
            style="@style/GameTile"
            android:text=" "/>

    <TextView
            android:id="@+id/tile01"
            style="@style/GameTile"
            android:text="X"/>

    <TextView
            android:id="@+id/tile02"
            style="@style/GameTile"
            android:text="O"/>

</LinearLayout>
<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridTitle">

    <TextView
            android:id="@+id/tile10"
            style="@style/GameTile"
            android:text=""/>

    <TextView
            android:id="@+id/tile11"
            style="@style/GameTile"
            android:text="O"/>

    <TextView
            android:id="@+id/tile12"
            style="@style/GameTile"
            android:text="X"/>

</LinearLayout>
<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gridTitle">

    <TextView
            android:id="@+id/tile20"
            style="@style/GameTile"
            android:text=""/>

    <TextView
            android:id="@+id/tile21"
            style="@style/GameTile"
            android:text="X"/>

    <TextView
            android:id="@+id/tile22"
            style="@style/GameTile"
            android:text="O"/>

</LinearLayout>

And your style as:

<style name="GameTile">
    <item name="android:textSize">60sp</item>
    <item name="android:layout_gravity">fill</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">@dimen/padding_grid_text</item>
    <item name="android:paddingRight">@dimen/padding_grid_text</item>
    <item name="android:fontFamily">Roboto-Thin</item>
    <item name="android:background">@color/gray</item>
    <item name="android:layout_margin">@dimen/margin_grid_cell</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
</style>