Hoy vamos a ver cómo crear una tabla dinámica en Android con Java, usando el elemento TableLayout. Un elemento TableLayout en Android permite crear tablas, ya sea estáticas o dinámicas.

En este caso veremos cómo crear una tabla con datos que pueden cambiar o que no siempre serán los mismos, por ello es que digo que será una tabla dinámica con Android.

Nota: tal vez quieras ver este tutorial sobre Tabs dinámicas en Android.

El elemento TableLayout

Para agregar columnas y filas dinámicas debemos tener un TableLayout. El mismo puede ser definido así:

See the gist on github.

En este caso le he puesto el id tableLayoutPackingList para recuperarla más tarde desde Java. Los demás atributos son más de diseño, excepto el de stretchColumns que nos permitirá tener columnas con la misma anchura.

Crear filas o rows dinámicas

Para agregar una fila a la tabla creamos un TableRow pasándole el contexto de la app. En el caso de una actividad es NombreDeActividad.this y en el caso de un fragment puede ser lo que regresa getActivity()

See the gist on github.

Diseño de la fila

Es importante definir el layout de la fila:

See the gist on github.

Con ese atributo decimos que la anchura de la fila será con el atributo WRAP_CONTENT.

Estilo de la fila

Si queremos que la fila tenga borde, primero definimos un drawable. Yo lo he colocado en res/drawable/borde_tabla.xml con el siguiente código:

See the gist on github.

Para aplicar ese estilo a la fila dinámica que estamos creando, debemos invocar a:

See the gist on github.

Agregar elementos a la fila

Ahora veamos cómo agregar columnas o celdas a la fila. Podemos agregar cualquier tipo de vista, no existe restricción.

Para añadir un elemento dinámico a la fila ya dinámica, simplemente invocamos a addView. Veamos el siguiente ejemplo en donde agrego un TextView dinámico:

See the gist on github.

Nota: recuerda que invoco a getActivity porque estoy dentro de un fragmento, si tú estás dentro de una actividad invoca con NombreDeActivity.this.

Podemos invocar a addView cualquier número de veces pasándole vistas, incluso más tablas.

Agregar fila a la tabla

Ya hemos creado la fila, y ya hemos agregado columnas. Ahora falta agregar esa fila a la tabla; para ello invocamos a addView de nuestro TableLayout.

See the gist on github.

Por cierto, como segundo argumento a addView podemos indicar el índice de la fila. De nuevo lo digo, puedes invocar a addView cuantas veces quieras para agregar todas las filas a la tabla.

Ejemplo completo

Ahora que ya he explicado lo básico voy a explicar cómo llegué hasta aquí. Tengo una lista de tallas (de ropa, cosa que no es significante para esto) y una de colores; debo hacer una tabla dinámica con múltiples EditText dentro de la misma.

Para simplificar pondré la lista aquí:

See the gist on github.

Después agrego el encabezado:

See the gist on github.

Y luego por cada color, agrego una fila con un EditText dinámico:

See the gist on github.

La constante de anchura es 150, y es para que no se vean tan pequeños los EditText. El código completo queda así:

See the gist on github.

Con eso alcanzamos el resultado de la siguiente imagen:

Si se ve cortada es porque la he puesto dentro de un HorizontalScroller para cuando haya más tallas. También falta poner algo de padding; pero bueno, lo importante, que es la tabla dinámica con Android, ya está.