如何在运行时使用自定义（水平和垂直）分隔符创建动态TableLayout

Question

Basically I want to create function which dynamically create a TableLayout with horizontal and vertical custom dividers which I insert into FrameLayout (container). I can easily do that in XML, but I need to do that in runtime, mainly because I dont know how big the table gonna be, also it might be big (want to avoid copy+paste code in XML many times).

Here is what I want exactly (tho static), but in XML:

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/unitsTableContainer"
        android:layout_margin="30dp">

        <View style="@style/TableVerticalDivider"/>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

        </TableRow>

        <View style="@style/TableVerticalDivider"/>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

            <TextView style="@style/UnitTableDefaultText"/>

            <View style="@style/TableHorizontalDivider"/>

        </TableRow>

        <View style="@style/TableVerticalDivider"/>

    </TableLayout>

Here is my best result doing it in runtime (dynamic):

private void createTable() {
    TableLayout tableLayout;
    View verticalTableColumnDivider;
    View horizontalTableRowDivider;
    TableRow tableRow;
    TextView textView;

    tableLayout = new TableLayout(getApplicationContext());
    tableLayout.setStretchAllColumns(true);

    for (int currentRow = 0; currentRow < 2; currentRow++) {
        tableRow = new TableRow(getApplicationContext());

        verticalTableColumnDivider = getLayoutInflater().inflate(R.layout.template_vertical_table_divider, null);
        horizontalTableRowDivider = getLayoutInflater().inflate(R.layout.template_horizontal_table_divider, null);
        tableRow.addView(horizontalTableRowDivider);

        for (int currentColumn = 0; currentColumn < 4; currentColumn++) {
            textView = (TextView) getLayoutInflater().inflate(R.layout.template_default_table_text, null);
            tableRow.addView(textView);

            horizontalTableRowDivider = getLayoutInflater().inflate(R.layout.template_horizontal_table_divider, null);
            tableRow.addView(horizontalTableRowDivider);
        }
        tableLayout.addView(verticalTableColumnDivider);
        tableLayout.addView(tableRow);
    }

    verticalTableColumnDivider = getLayoutInflater().inflate(R.layout.template_vertical_table_divider, null);
    tableLayout.addView(verticalTableColumnDivider);

    FrameLayout tableLayoutContainer = (FrameLayout) findViewById(R.id.unitsTableContainer);
    tableLayoutContainer.addView(tableLayout);
}

Here are templates and their styles (ofcourse styles are in one XML file, and all 3 templates are in separated layout XML file):

<View style="@style/TableHorizontalDivider"/>

<style name="TableHorizontalDivider">
    <item name="android:layout_width">4dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">?android:attr/listDivider</item>
    <item name="android:visibility">visible</item>
</style>

<View style="@style/TableVerticalDivider"/>

<style name="TableVerticalDivider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">4dp</item>
    <item name="android:background">?android:attr/listDivider</item>
    <item name="android:visibility">visible</item>
</style>

<TextView style="@style/UnitTableDefaultText"/>

<style name="UnitTableDefaultText">
    <item name="android:textColor">#222222</item>
    <item name="android:text">Test</item>
    <item name="android:textSize">16sp</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">0dp</item>
</style>

And here is result, top table is made dynamically, bottom table is what it should look like but made statically: result of my tries

No problems with putting textViews into TableLayout, as you can see only dividers are problem, row dividers are too thin, and column dividers (if you look closely) they are also too thin and stacked on row dividers, dont know why they are drawn horizontally instead of vertically. So if anybody knows why dividers are drawn wrong, and / or have solution how to do that differently, please let me know.

Answer 1

OK, I found out how to do this. I made a class where you put your text content as String[][] for the table, and it creates the table in runtime:

public class SimpleTextTableWithBorders extends TableLayout {

private Context mContext;
private String[][] mTableContent;
private int mTextColor, mBorderColor;
private int mTextViewBorderWidth, mTableBorderWidth;

public SimpleTextTableWithBorders(Context context, String[][] tableContent) {
    super(context);
    mContext = context;
    mTableContent = tableContent;
    mTextColor = 0xff111111;
    mBorderColor = 0xAA444444;
    mTextViewBorderWidth = 4;
    mTableBorderWidth = mTextViewBorderWidth * 2;
    setupTable();
}

private void setupTable() {
    TableRow tableRow;
    TextView textView;

    setStretchAllColumns(true);
    setBackground(borderDrawable(mTableBorderWidth));
    setPadding(mTableBorderWidth, mTableBorderWidth, mTableBorderWidth, mTableBorderWidth);

    for (int currentRow = 0; currentRow < mTableContent.length; currentRow++) {
        tableRow = new TableRow(mContext);

        for (int currentColumn = 0; currentColumn < mTableContent[0].length; currentColumn++) {
            textView = new TextView(mContext);
            textView.setTextColor(mTextColor);
            textView.setBackground(borderDrawable(mTextViewBorderWidth));
            textView.setText(mTableContent[currentRow][currentColumn]);
            textView.setGravity(Gravity.CENTER);
            textView.setPadding(0, 6, 0, 6);
            tableRow.addView(textView);
        }
        addView(tableRow);
    }
}

private GradientDrawable borderDrawable(int borderWidth) {
    GradientDrawable shapeDrawable = new GradientDrawable();
    shapeDrawable.setStroke(borderWidth, mBorderColor);
    return shapeDrawable;
}

}

The key thing what I was looking for was pretty much GradientDrawable. There are no setters and getters, but if someone need, you can put it there with other useful methods and use it as you want.

Here is the example result: