在网格布局中设置行和列的大小

Question

I would like to create a 3x3 grid layout in Android Studios for a Tic Tac Toe Game. However I would like the ImageViews displaying the tiles to be smaller than the actual row´s and columns, so there is a little bit of space in between and it doesn´t look overly crowded. But I haven´t been able to find any answer on how to set specific row and column sizes independent of the content.

I have thought about editing the pictures, so that the tiles don´t fill the whole thing or adding some sort of invisible element that keep the rows and columns at the size I want them to be, but I feel there should be a more straightforward solution.

Answer 1

On the GridLayout you can set the rowCount and columnCount to 3 and for each ImageView , set the rowWeight and columnWeight to 1 .

As for the spacing, you can set a layout_margin for each off the ImageView so they ware evenly spaced.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    android:rowCount="3"
    android:orientation="horizontal"
    android:background="#CCCCCc">

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

</GridLayout>