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.

Scotticism

do you actually mean, you want to add space between rows (not columns?) – Spiry

Do you want space in between button and column name or what? Not getting exact idea.. – Rhett

@Spiry I have a new column per button. I want to add space between columns. Between rows it's ok. – Scotticism

don't forget to mark the question as answered ;) – Spiry

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

Spiry

Thanks Manmal it works but I totally don't get it ! When I try to put android:layout_marginRight="10dp" or android:layout_margin="10dp" in my button_table_row_category.xml it doesn't work. How could I do it in XML ? Thanks again ! – Scotticism

I actually don't have a class representing my layout as MyView does for the problem on your link. I just use XML, in that case, how can I do it. I'm also surprise, LayoutInflater erases my XML defined attributes ? Why that ? What's the point then to inflate an XML ? – Scotticism

haven't you read your own code? ;) you use the inflater there, you just need to add a "false" as third argument: TextView button = (TextView) inflater.inflate(R.layout.button_table_row_category, null); – Spiry

the point to use XML is mainly readability. handling of LayoutParams is quite tedious and very verbose - verbosity means more bugs and more brainwork while reading. – Spiry

Yes sorry, I haven't slep that much during the past few days... But it still doesn't work with adding a false argument to the inflater. I'm lost ... even my buttons can't wrap the text in 2 lines if it doesn't fit in one... – Scotticism

in line 13 there is a (superfluous?) call to the inflater, make sure to remove that. for the line wrapping, try adding android:singleLine="false" to the TextView. – Spiry

let us continue this discussion in chat – Scotticism

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>

Chondrite

Though the questioner asked how to add spacing programatically, this helped me looking for a workaround in XML. – Kaka

Answer 3

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

Rufinaruford

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.

Formality