kotlin android app development course, arranged in a table format – GridLayout

1. Introduction to GridLayout

GridLayout is a layout in Android that allows you to arrange UI components in a grid. It can be divided into required rows and columns using classes, and it offers various size and placement options. It is useful for constructing complex UIs and is particularly suited for visually representing sorted data.

Using GridLayout, you can easily specify the size and position of each view to design app UIs in various formats. This layout allows buttons, text views, images, and more to be arranged in a grid format.

2. Setting Up and Using GridLayout

2.1 Basic Setup

To use GridLayout, add the following to your XML layout file:

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:rowCount="2"
    android:columnCount="3">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="0"
        android:text="1"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="1"
        android:text="2"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:layout_column="2"
        android:text="3"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="0"
        android:text="4"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="1"
        android:text="5"
        android:layout_columnWeight="1"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_column="2"
        android:text="6"
        android:layout_columnWeight="1"/>

</GridLayout>

The code above sets up a GridLayout with 2 rows and 3 columns. Each TextView is constructed to be of the same size. The layout_columnWeight attribute can be used to adjust the proportion of each column.

3. Properties of GridLayout

GridLayout has several properties, some of which include:

• rowCount: Sets the number of rows in the GridLayout.
• columnCount: Sets the number of columns in the GridLayout.
• layout_row: Sets the row index for each view.
• layout_column: Sets the column index for each view.
• layout_rowWeight: Sets the weight for the row’s proportional size.
• layout_columnWeight: Sets the weight for the column’s proportional size.

4. Code Examples

4.1 Simple Calculator App

Let’s create a simple calculator UI using GridLayout. Below is the complete XML code example:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:rowCount="5"
        android:columnCount="4">

        <EditText
            android:id="@+id/inputField"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_columnSpan="4"
            android:layout_row="0"
            android:padding="16dp"
            android:hint="Enter Calculation"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:text="1"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:text="2"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="2"
            android:text="3"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="3"
            android:text="+"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="0"
            android:text="4"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="1"
            android:text="5"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="2"
            android:text="6"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_column="3"
            android:text="-"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="0"
            android:text="7"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="1"
            android:text="8"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="2"
            android:text="9"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="3"
            android:layout_column="3"
            android:text="*"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="0"
            android:text="C"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="1"
            android:text="0"
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="2"
            android:text="="
            android:layout_columnWeight="1"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="3"
            android:text="/"
            android:layout_columnWeight="1"/>

    </GridLayout>

</RelativeLayout>

The example above implements a basic calculator UI using GridLayout. Each button has a width of 0dp, and they are divided proportionally using layout_columnWeight.

4.2 Connecting with Activity

Now, let’s connect the UI with Kotlin code. The code for the MainActivity.kt file is as follows:

import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    private lateinit var inputField: EditText

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        inputField = findViewById(R.id.inputField)

        val buttons = listOf(
            R.id.btn1, R.id.btn2, R.id.btn3, R.id.btnPlus,
            R.id.btn4, R.id.btn5, R.id.btn6, R.id.btnMinus,
            R.id.btn7, R.id.btn8, R.id.btn9, R.id.btnMultiply,
            R.id.btnC, R.id.btn0, R.id.btnEqual, R.id.btnDivide
        )

        buttons.forEach { buttonId ->
            findViewById(buttonId).setOnClickListener(buttonClickListener)
        }
    }

    private val buttonClickListener = View.OnClickListener { view ->
        val button = view as Button
        val text = button.text.toString()

        when (text) {
            "C" -> inputField.text.clear()
            "=" -> calculateResult()
            else -> inputField.append(text)
        }
    }

    private fun calculateResult() {
        // Implement simple calculation logic
        // The actual calculation logic needs to be implemented appropriately
        // For demonstration purposes, just outputting the format
        val result = inputField.text.toString()
        inputField.setText(result) // Display the result in the input field
    }
}

The above code adds click listeners to each button to handle user input. When a number button is clicked, that number is added to the input field; the “C” button clears the input field, and the “=” button executes the calculation logic for the result.

5. Advantages of Using GridLayout

Using GridLayout offers the following advantages:

• Flexible layout: You can finely adjust the size and position of each view.
• Proportion adjustment: You can create proportionally-based dynamic UIs using layout_columnWeight and layout_rowWeight attributes.
• Universal application: It provides patterns that can easily be used in many user interface designs.

6. Disadvantages of GridLayout

However, GridLayout also has some disadvantages:

• Complexity: The complexity can increase when arranging multiple views.
• Performance: It can affect performance when arranging many views.

7. Summary

In this tutorial, we explored how to design a UI using GridLayout. We understood the advantages and disadvantages of GridLayout and practiced with a simple calculator app. GridLayout is a useful layout that allows the construction of UIs in a grid format, applicable in various apps.