Adding space between columns of a TableLayout

Question

I have a TableLayout where I add dynamically TableRows. In each TableRow, I add a Button.

I just would like to add some space between my columns (which are my buttons) but I can't figure out how... I've tried to change all the possible margins but it doesn't work :( So maybe I made a mistake in my code where I inflate them from XML files:

private void createButtons(final CategoryBean parentCategory) {
    final List<CategoryBean> categoryList = parentCategory.getCategoryList();
    title.setText(parentCategory.getTitle());
    // TODO à revoir
    int i = 0;
    TableRow tr = null;
    Set<TableRow> trList = new LinkedHashSet<TableRow>();
    for (final CategoryBean category : categoryList) {

        TextView button = (TextView) inflater.inflate(R.layout.button_table_row_category, null);
        button.setText(category.getTitle());
        if (i % 2 == 0) {
            tr = (TableRow) inflater.inflate(R.layout.table_row_category, null);
            tr.addView(button);
        } else {
            tr.addView(button);
        }

        trList.add(tr);

        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                CategoryBean firstChild = category.getCategoryList() != null && !category.getCategoryList().isEmpty() ? category
                        .getCategoryList().get(0) : null;
                if (firstChild != null && firstChild instanceof QuestionsBean) {
                    Intent intent = new Intent(CategoryActivity.this, QuestionsActivity.class);
                    intent.putExtra(MainActivity.CATEGORY, category);
                    startActivityForResult(intent, VisiteActivity.QUESTION_LIST_RETURN_CODE);
                } else {
                    Intent intent = new Intent(CategoryActivity.this, CategoryActivity.class);
                    intent.putExtra(MainActivity.CATEGORY, category);
                    startActivityForResult(intent, VisiteActivity.CATEGORY_RETURN_CODE);
                }
            }
        });
        i++;
    }
    for (TableRow tableRow : trList) {
        categoryLaout.addView(tableRow);
    }
}

My button_table_row_category.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttonTableRowCategory"
    style="@style/ButtonsTableRowCategory"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/validate" />

My table_row_category.xml:

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableRowCategory"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="100dp"
    android:gravity="center"
    android:padding="5dp" >

</TableRow>

Thank you for your help.

Answer 1

In the case of a TableLayout, Buttons themselves are the columns. That means you have to advise the Buttons to keep some space inbetween. You can do this by using layout parameters. They are much easier to set in XML, but it also works programmatically. It's important that you always use the LayoutParam class of the parent layout of the element where you apply it - in this case the parent is a TableRow:

// Within createButtons():
android.widget.TableRow.LayoutParams p = new android.widget.TableRow.LayoutParams();
p.rightMargin = DisplayHelper.dpToPixel(10, getContext()); // right-margin = 10dp
button.setLayoutParams(p);

// DisplayHelper:
private static Float scale;
public static int dpToPixel(int dp, Context context) {
    if (scale == null)
        scale = context.getResources().getDisplayMetrics().density;
    return (int) ((float) dp * scale);
}

Most dimension attributes in Android take pixels if you set them programmatically - therefore you should use something like my dpToPixel() method. Please, don't EVER use pixel values in Android! You will regret it later on.

If you don't want the rightmost button to have this margin, just check with an IF and don't add the LayoutParam on it.

---

Solution in XML:

To avoid the LayoutInflater erasing your XML-defined attributes, do this while inflating (taken from Layout params of loaded view are ignored):

View view = inflater.inflate( R.layout.item /* resource id */,
                                     MyView.this /* parent */,
                                     false /*attachToRoot*/);

---

Alternative: Use a GridView like so: Android: Simple GridView that displays text in the grids

Answer 2

Add Padding Right for a component in the table row component

<TableRow
    android:id="@+id/tableRow1">

    <TextView
        android:id="@+id/textView1"
        android:paddingRight="20dp" />

 </TableRow>

Answer 3

Try android:layout_marginRight="6dp" this worked for me.

Answer 4

Try Using the setColumnStretchable function of the TableLayout. Give it a columnn index and set its stretchable property to true.

Eg. If you have 3 columns.

TableLayout tblLayout;
tblLayout.setColumnStretchable(0, true);
tblLayout.setColumnStretchable(1, true);
tblLayout.setColumnStretchable(2, true);

The above will give you equal spacing between all 3 columns of the tableLayout.