Setting row and column size in a gridlayout

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.

Possible duplicate of [Android: GridLayout spacing between items](https://stackoverflow.com/questions/35270404/android-gridlayout-spacing-between-items) — second, Aug 20 '19 at 11:04

score 0 · Answer 1 · answered Aug 20 '19 at 11:23

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>

Thanks a lot for the answer. However when I add margins or set useDefaultMargins to true my ImageViews become really, really big. Any idea what I´m doing wrong? — Hannah, Aug 22 '19 at 18:34
@Hannah When you say they become big, could you explain a bit? Do you mean that they take up more space than they suppose to? — Omari Celestine, Aug 24 '19 at 00:26

Setting row and column size in a gridlayout

1 Answers1