34

I have a GridLayout with 5 columns and 3 rows. Now I can insert arbitrary child views, which is great. Even better is, that I can assign columnSpan=2 to some item in order to span it to 2 columns (the same with rowSpan).

The problem now is, that I cannot assign rowSpan or columnSpan programmatically (i.e. at runtime). Some search suggested something like this:

layoutParams.columnSpec = GridLayout.spec(0, columnSpan);

But I don't quite understand what the parameters of spec mean (start and size). The documentation is also quite poor at this point.

Any help is highly appreciated!

6 Answers 6

46
    GridLayout gridLayout = (GridLayout)findViewById(R.id.tableGrid);

    gridLayout.removeAllViews();

    int total = 12;
    int column = 5;
    int row = total / column;
    gridLayout.setColumnCount(column);
    gridLayout.setRowCount(row + 1);
    for(int i =0, c = 0, r = 0; i < total; i++, c++)
    {
        if(c == column)
        {
            c = 0;
            r++;
        }
        ImageView oImageView = new ImageView(this);
        oImageView.setImageResource(R.drawable.ic_launcher);
        GridLayout.LayoutParams param =new GridLayout.LayoutParams();
        param.height = LayoutParams.WRAP_CONTENT;
        param.width = LayoutParams.WRAP_CONTENT;
        param.rightMargin = 5;
        param.topMargin = 5;
        param.setGravity(Gravity.CENTER);
        param.columnSpec = GridLayout.spec(c);
        param.rowSpec = GridLayout.spec(r);
        oImageView.setLayoutParams (param);
        gridLayout.addView(oImageView);
    }

 have look on this image - you can change number of rows and column as you need

1
  • 3
    The question is about setting the span programmatically. But the top answer is about simply adding views to the gridlayout... So funny
    – AloDev
    May 24, 2019 at 9:21
17

How about this?

GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
layoutParams.rowSpec = GridLayout.spec(GridLayout.UNDEFINED, item.getRowSpan());
layoutParams.columnSpec = GridLayout.spec(GridLayout.UNDEFINED, item.getColumnSpan());

According to documentation, you should also call setLayoutParams on GridLayout IF you change column or row span AFTER the child views are inserted into GridLayout. You don't need this if you add them while setting span

1
  • 6
    This is the right answer. The parameters for GridLayout.spec(start, size) actually set the row (or column) and the span respectively (So perhaps should be GridLayout.spec(rowOrColumn, span)). Awful awful awful documentation. Dec 17, 2014 at 15:27
11

You could modify GridLayout layout_rowSpan attribute like this:

// View allocated in first row and first column
View child = findViewById(R.id.row0column0);

GridLayout.LayoutParams params =
   new GridLayout.LayoutParams(child.getLayoutParams());

params.rowSpec = GridLayout.spec(0, 2);    // First cell in first row use rowSpan 2.
params.columnSpec = GridLayout.spec(0, 2); // First cell in first column use columnSpan 2.
child.setLayoutParams(params);

I agree documentation needs a little bit improvement in this regard.

6

I am changing column span about 2 cell programmatically and after inflate by this code:

GridLayout.LayoutParams itemLP = (GridLayout.LayoutParams)gridItemV.getLayoutParams();
itemLP.columnSpec = GridLayout.spec(0, 2);
gridItemV.setLayoutParams(itemLP);

the important is call setLayoutParams after change columnSpec i hope it helps also to you

4

OK, I spent some hours figuring out what's going on here. Well, I didn't find any working way to set columnSpan or rowSpan at runtime.

But I found a solution that works (at least for me):

Java code

private LinearLayout addNewSpannedView(Integer resourceId, ViewGroup rootElement) {
    return (LinearLayout) ((ViewGroup) getLayoutInflater().inflate(resourceId, rootElement, true)).getChildAt(rootElement.getChildCount() - 1);
}
// set columnSpan depending on some logic (gridLayout is the layout to add the view's to -> in my case these are LinearLayouts)
shape = addNewSpannedView(columnSpan == 1 ? R.layout.grid_ll_col_span_1 : R.layout.grid_ll_col_span_2, gridLayout);

grid_ll_col_span_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/shapeWidth"
    android:layout_height="wrap_content"
    android:layout_columnSpan="2"/>

Hint: It's very important, that you set the width and height attribute, before inflate() adds the view to the root element (i.e. the parent element).

I hope, someone can use this ;-)

2
  • 1
    So shape is a LinearLayout? What if I want to add an ImageButton to my GridLayout? Dec 27, 2013 at 21:32
  • Hello..need same thing...can you suggest more
    – user4302606
    Jan 4, 2016 at 9:18
0

I might be a bit too late, but just face the same issue and to solve it I needed to specify the column weight as well and it worked perfectly. Here's my code!

val oneColSpec = GridLayout.spec(0, 2, 1f)
val twoColSpec = GridLayout.spec(2, 1, 1f)
(btnOne.layoutParams as GridLayout.LayoutParams).columnSpec = oneColSpec
(btnTwo.layoutParams as GridLayout.LayoutParams).columnSpec = twoColSpec

Need to use this constructor from GridLayout

public static Spec spec(int start, int size, float weight) {
    return spec(start, size, UNDEFINED_ALIGNMENT, weight);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.