TableLayout de Android en Kotlin

Android TableLayout es una subclase de ViewGroup que se usa para mostrar los elementos secundarios de View en filas y columnas. Organizará todos los elementos secundarios en filas y columnas y no mostrará ninguna línea de borde entre filas, columnas o celdas.

El funcionamiento de TableLayout es casi similar a la tabla HTML y contiene tantas columnas como fila con la mayoría de las celdas.

¿Cómo declarar TableLayout y TableRow?

El TableLayout se puede definir usando <TableLayout> como a continuación:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp">
   
    // Add Table rows here
</TableLayout>

y TableRow se puede definir usando

<TableRow android:background="#51B435" android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Rank" />
</TableRow>

archivo actividad_principal.xml

En este archivo, declaramos TableLayout y comenzamos a agregar filas de tablas con la ayuda de TableRow. Estamos creando una tabla de clasificación de jugadores donde definimos cuatro columnas Rango, Nombre, País y Puntos.

El código de la tabla es:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp">
  
    <TextView
        android:id="@+id/txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ICC Ranking of Players:"
        android:textSize = "20dp"
        android:textStyle="bold">
  
    </TextView>
  
  
    <TableRow android:background="#51B435" android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Rank" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Player" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Team" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Points" />
    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Virat Kohli" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="IND" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="895" />
    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Rohit Sharma" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="IND" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="863" />
  
    </TableRow>
    <TableRow android:background="#F0F7F7" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Faf du Plessis" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="PAK" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="834" />
  
    </TableRow>
  
    <TableRow android:background="#F0F7F7" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Steven Smith" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="AUS" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="820" />
  
    </TableRow>
  
    <TableRow android:background="#F0F7F7" android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="5" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ross Taylor" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="NZ" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="817" />
  
    </TableRow>
  
</TableLayout>

MainActivity.kt

Cuando hayamos creado el diseño, debemos cargar el recurso de diseño XML desde nuestro método de devolución de llamada onCreate() de actividad y acceder al elemento de la interfaz de usuario desde el XML usando findViewById .

package com.geeksforgeeks.myfirstKotlinapp
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
  
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // finding the UI elements
  
  
    }
}

Salida de diseño de tabla:

Necesitamos ejecutar usando el dispositivo virtual de Android (AVD) para ver el resultado.