GRID LAYOUT – Quick Tutorial (Xamarin Android) (Code)

GridLayout is the way to go if you want to create a grid-like UI quickly and efficiently.

In this tutorial you will learn the basics of GridLayout as well as how to use the support library to enable certain features even on older versions of android.

This post contains all the code that’s been written in this YouTube video.

NO Support Library

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="3">
    <TextView
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_columnSpan="2"
        android:background="#F44336"
        android:textSize="70sp"
        android:text="1st" />
    <TextView
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="#2196F3"
        android:textSize="70sp"
        android:text="2nd" />
    <TextView
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_rowSpan="2"
        android:background="#4CAF50"
        android:textSize="70sp"
        android:text="3rd" />
    <TextView
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:background="#FFC107"
        android:textSize="70sp"
        android:text="4th" />
</GridLayout>

WITH Support Library

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="2"
    app:rowCount="3">
    <TextView
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_columnSpan="2"
        android:background="#F44336"
        android:textSize="70sp"
        android:text="1st" />
    <TextView
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#2196F3"
        android:textSize="70sp"
        android:text="2nd" />
    <TextView
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_rowSpan="2"
        android:background="#4CAF50"
        android:textSize="70sp"
        android:text="3rd" />
    <TextView
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:background="#FFC107"
        android:textSize="70sp"
        android:text="4th" />
</android.support.v7.widget.GridLayout>