Custom TableLayout with multiple TextViews in rows

Question

I want to crate custom TableLayout with rows like this:

TV is for TextView, i.e. I want to add 11 TextViews to the row:

enter image description here

Each row begins with a title and then I add 5 pairs of TextViews, so that table row is as wide, as screen is. Here's my code:

public class FlowTable extends TableLayout {

    private Context context;

    public FlowTable(Context context) {
        super(context);
        this.context = context;
    }

    public FlowTable(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
    }

    public void addContent(List data) {

        TableRow tableRow = new TableRow(context);

        LayoutParams params = new LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1);

        for (int i = 0; i < data.size(); i++) {

            if (i % 5 == 0) {
                this.addView(tableRow, new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));

                tableRow = new TableRow(context);
                TextView tvRange = new TextView(context);
                tvRange.setLayoutParams(params);
                tvRange.setText(genRange(i+1));
                tableRow.addView(tvRange);

            }
            TextView tvDistance = new TextView(context);
            tvDistance.setLayoutParams(params);
            tvDistance.setText(String.valueOf(data.get(i).distance));

            TextView tvResult = new TextView(context);
            tvResult.setLayoutParams(params);
            tvResult.setText(data.get(i).result);

            tableRow.addView(tvDistance);
            tableRow.addView(tvResult);
        }
    }

    private String genRange(int currIndex){
        /********************/
        return somestring;
    }
}

Using table:

In fragment:

View root = inflater.inflate(R.layout.fragment_session_summary, container, false);
        FlowTable flowTable = (FlowTable)root.findViewById(R.id.flowTable);
        flowTable.addContent(data);

The problem: the screen is just empty! Nothing at all. Before I added the layout params to textview it worked, but row didn't occupy the screen width. My initial solution was based on the LinearLayout samples, because TableRow is an extention of LinearLayout. But I can't make it work. Thanks.

dstricks · Accepted Answer

Try programmatically setting all columns to stretch (didn't seem to work in XML for me):

...
flowTable.addContent(data);
flowTable.setStretchAllColumns(true);

Some other quick facts:

No need to try and specify height and width for TableRow within TableLayout because it will always be height=WRAP_CONTENT and width=MATCH_PARENT. See TableLayout documentation where this is listed in the Class Overview section
No need to try and specify height and widget for children of TableRow because they will always be height=WRAP_CONTENT and width=MATCH_PARENT. See TableRow documentation where this is listed in the Class Overview section

Might I also humbly suggest a bit of refactoring:

public class FlowTable extends TableLayout {
    private TableRow mCurrentRow;

    public FlowTable(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public FlowTable(Context context) {
        super(context);
        init();
    }

    private void init() {
        mCurrentRow = new TableRow(getContext());
        mCurrentRow.addView(createAndFillTextView("0")); // title for first row
        setStretchAllColumns(true);
    }

    public void addContent(List data) {
        for (int i = 0; i < data.size(); i++) {
            if ((i % 5 == 0) && (i != 0) /** Don't do this on 0! */) {
                finishRowAndStartNew(i);
            }

            mCurrentRow.addView(createAndFillTextView(data.get(i).distance));
            mCurrentRow.addView(createAndFillTextView(data.get(i).result));
        }
    }

    private void finishRowAndStartNew(int newRowIndex) {
        addView(mCurrentRow);
        mCurrentRow = new TableRow(getContext());
        mCurrentRow.addView(createAndFillTextView(genRange(newRowIndex+1)));
    }

    private String genRange(int currIndex){
        /********************/
        return String.valueOf(currIndex);
    }

    private TextView createAndFillTextView(String text) {
        TextView tv = new TextView(getContext());
        tv.setText(text);        
        return tv;
    }
}

Custom TableLayout with multiple TextViews in rows

Answers (2)

Related Questions