TableLayout dinámico con Android - Ejemplo de tabla

TableLayout dinámico con Android

1 comentario / Android, java / Por

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.

TableLayout dinámico con Android - Ejemplo de tabla
Ejemplo de lo que podremos lograr con el código Java

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í:

<TableLayout
    android:id="@+id/tableLayoutPackingList"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4sp"
    android:layout_marginLeft="4sp"
    android:layout_marginEnd="4sp"
    android:layout_marginRight="4sp"
    android:stretchColumns="*">
</TableLayout>

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()

TableRow fila = new TableRow(getActivity());

Diseño de la fila

Es importante definir el layout de la fila:

TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);

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:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape= "rectangle">
    <solid android:color="#ffffff"/>
    <stroke android:width="1dp" android:color="#000000"/>
</shape>

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

// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);

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:

//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setText("TALLAS");
fila.addView(tv);

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.

tableLayout.addView(fila);

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í:

String[] tallas = {"X1", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
String[] colores = {"BLANCO", "VERDE", "PÚRPURA", "AMARILLO", "MARRÓN"};

Después agrego el encabezado:

// Primero dibujar el encabezado; esto es poner "TALLAS" y a la derecha todas las tallas
TableRow fila = new TableRow(getActivity());
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);
// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);
//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setTypeface(null, Typeface.BOLD);
tv.setText("TALLAS");
fila.addView(tv);

// Ahora agregar las tallas
for (int x = 0; x < tallas.length; x++) {
    TextView tvTalla = new TextView(getActivity());
    tvTalla.setText(tallas[x]);
    fila.addView(tvTalla);
}
// Finalmente agregar la fila en la primera posición
tableLayout.addView(fila, 0);

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

// Ahora por cada color hacer casi lo mismo
for (int x = 0; x < colores.length; x++) {
    TableRow filaColor = new TableRow(getActivity());
    filaColor.setLayoutParams(lp);
    // Borde
    filaColor.setBackgroundResource(R.drawable.borde_tabla);
    // El nombre del color
    TextView textViewColor = new TextView(getActivity());
    textViewColor.setText(colores[x]);
    textViewColor.setTypeface(null, Typeface.BOLD);
    filaColor.addView(textViewColor);
    // Y ahora por cada talla, agregar un campo de texto
    for (int y = 0; y < tallas.length; y++) {
        EditText editText = new EditText(getActivity());
        editText.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);
        editText.setWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
        filaColor.addView(editText);
        filaColor.setMinimumWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
    }
    // Finalmente agregar la fila
    tableLayout.addView(filaColor);
}

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

TableLayout tableLayout = v.findViewById(R.id.tableLayoutPackingList);
String[] tallas = {"X1", "1", "2", "3", "4", "5", "6", "7", "8", "9"};
String[] colores = {"BLANCO", "VERDE", "PÚRPURA", "AMARILLO", "MARRÓN"};
// Primero dibujar el encabezado; esto es poner "TALLAS" y a la derecha todas las tallas
TableRow fila = new TableRow(getActivity());
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
fila.setLayoutParams(lp);
// Borde
fila.setBackgroundResource(R.drawable.borde_tabla);
//El elemento de la izquierda
TextView tv = new TextView(getActivity());
tv.setTypeface(null, Typeface.BOLD);
tv.setText("TALLAS");
fila.addView(tv);

// Ahora agregar las tallas
for (int x = 0; x < tallas.length; x++) {
    TextView tvTalla = new TextView(getActivity());
    tvTalla.setText(tallas[x]);
    fila.addView(tvTalla);
}
// Finalmente agregar la fila en la primera posición
tableLayout.addView(fila, 0);
// Ahora por cada color hacer casi lo mismo
for (int x = 0; x < colores.length; x++) {
    TableRow filaColor = new TableRow(getActivity());
    filaColor.setLayoutParams(lp);
    // Borde
    filaColor.setBackgroundResource(R.drawable.borde_tabla);
    // El nombre del color
    TextView textViewColor = new TextView(getActivity());
    textViewColor.setText(colores[x]);
    textViewColor.setTypeface(null, Typeface.BOLD);
    filaColor.addView(textViewColor);
    // Y ahora por cada talla, agregar un campo de texto
    for (int y = 0; y < tallas.length; y++) {
        EditText editText = new EditText(getActivity());
        editText.setInputType(InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_FLAG_DECIMAL);
        editText.setWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
        filaColor.addView(editText);
        filaColor.setMinimumWidth(Constantes.ANCHURA_PIXELES_EDITTEXT_TABLA_DINAMICA);
    }
    // Finalmente agregar la fila
    tableLayout.addView(filaColor);
}

Con eso alcanzamos el resultado de la siguiente imagen:

TableLayout dinámico con Android - Ejemplo de tabla

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á.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

1 comentario en “TableLayout dinámico con Android”

  1. Jose

    Siento molestar con algo que probablemente sea muy simple pero, no consigo modificar datos en una tablelayout y que se muestren. Creo que he probado de todo

    Responder

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *