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.

do you actually mean, you want to add space between rows (not columns?) — manmal, Apr 02 '12 at 11:17
Do you want space in between button and column name or what? Not getting exact idea.. — Dhruvisha, Apr 02 '12 at 11:29
@manmal I have a new column per button. I want to add space between columns. Between rows it's ok. — Nico, Apr 02 '12 at 11:37

score 15 · Accepted Answer · edited May 23 '17 at 12:34

15

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

edited May 23 '17 at 12:34

Community

1
1

answered Apr 03 '12 at 10:47

manmal

3,900
2
30
42

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 ! – Nico Apr 03 '12 at 14:14
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 ? – Nico Apr 03 '12 at 14:51
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); – manmal Apr 03 '12 at 15:07
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. – manmal Apr 03 '12 at 15:10
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... – Nico Apr 03 '12 at 15:22
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. – manmal Apr 03 '12 at 15:25
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9644/discussion-between-nico-and-manmal) – Nico Apr 03 '12 at 15:41

score 9 · Answer 2 · edited Dec 06 '13 at 10:51

9

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>

edited Dec 06 '13 at 10:51

Simulant

19,190
8
63
98

answered Mar 15 '13 at 10:10

Deepu Surendran

205
2
3

Though the questioner asked how to add spacing programatically, this helped me looking for a workaround in XML. – Vijay Kumar Kanta Dec 26 '17 at 07:51

score 4 · Answer 3 · answered Feb 06 '15 at 12:17

4

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

answered Feb 06 '15 at 12:17

porthfind

1,581
3
17
30

score 0 · Answer 4 · edited Aug 19 '14 at 12:37

0

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.

edited Aug 19 '14 at 12:37

fedorqui

275,237
103
548
598

answered Aug 19 '14 at 12:11

Juzer Dhuliawala

19
1
4

Adding space between columns of a TableLayout

4 Answers4