I'm trying to dynamically create a table with 2 rows and 4 columns. But the size of rows and columns in each case should not be the same. Perhaps I will attach a picture:
I would like:
As I understand, when i don't use XML markup to achieve this using a GridLayout.Spec in setLayoutParams
But I don't understand what parameters I need to pass in GridLayout.Spec ?
If I want to merge the first column in the first row with the first column of the second row, what should I specify in
GridLayout.LayoutParams (GridLayout.Spec rowSpec, GridLayout.Spec columnSpec)
?
and what is Spec ?
I saw the examples there and there but do not fully understand how it works.
If in the case of XML markup I can use layout_rowSpan and layout_columnSpan to merge rows or columns then how to do it in dynamically?
Take look at this code below to get the layout that you're looking for. Comments are added to explain the values used in the GridLayout.Spec
creation.
// simple grid layout with WRAP_CONTENT width and height
GridLayout gridLayout = (GridLayout) findViewById(R.id.grid_layout);
// face view takes 2 rows, 1 column -- zero index based
GridLayout.Spec faceRow = GridLayout.spec(0, 2); // starts row 0, takes 2 rows
GridLayout.Spec faceCol = GridLayout.spec(0); // starts col 0, takes 1 col
GridLayout.Spec titleRow = GridLayout.spec(0); // starts row 0, takes 1 row
GridLayout.Spec titleCol = GridLayout.spec(1, 3); // starts col 1, takes 3 cols
GridLayout.Spec plusRow = GridLayout.spec(1); // starts row 1, takes 1 row
GridLayout.Spec plusCol = GridLayout.spec(1); // starts col 1, takes 1 col
GridLayout.Spec minusRow = GridLayout.spec(1); // starts row 1, takes 1 row
GridLayout.Spec minusCol = GridLayout.spec(2); // starts col 1, takes 1 col
GridLayout.Spec checkRow = GridLayout.spec(1); // starts row 1, takes 1 row
GridLayout.Spec checkCol = GridLayout.spec(3); // starts col 1, takes 1 col
// create the LayoutParams using our row/col for each view
GridLayout.LayoutParams faceParams = new GridLayout.LayoutParams(faceRow, faceCol);
faceParams.setGravity(Gravity.FILL_VERTICAL); // fill vertical so we take up the full 2 rows
// dummy text views to fill some space
TextView faceText = new TextView(this);
faceText.setPadding(32, 32, 32, 32); // add some random padding to make the views bigger
faceText.setLayoutParams(faceParams);
faceText.setText("FACE");
faceText.setGravity(Gravity.CENTER);
faceText.setBackgroundColor(Color.RED);
gridLayout.addView(faceText, faceParams);
GridLayout.LayoutParams titleParams = new GridLayout.LayoutParams(titleRow, titleCol);
titleParams.setGravity(Gravity.FILL_HORIZONTAL); // fill horizontal so we take up the full 3 columns
TextView titleText = new TextView(this);
titleText.setPadding(32, 32, 32, 32);
titleText.setLayoutParams(titleParams);
titleText.setText("TITLE");
titleText.setGravity(Gravity.CENTER);
titleText.setBackgroundColor(Color.BLUE);
gridLayout.addView(titleText, titleParams);
GridLayout.LayoutParams minusParams = new GridLayout.LayoutParams(minusRow, minusCol);
TextView minusText = new TextView(this);
minusText.setPadding(32, 32, 32, 32);
minusText.setLayoutParams(minusParams);
minusText.setText("MIN");
minusText.setGravity(Gravity.CENTER);
minusText.setBackgroundColor(Color.YELLOW);
gridLayout.addView(minusText, minusParams);
GridLayout.LayoutParams plusParams = new GridLayout.LayoutParams(plusRow, plusCol);
TextView plusText = new TextView(this);
plusText.setPadding(32, 32, 32, 32);
plusText.setLayoutParams(plusParams);
plusText.setText("PLS");
plusText.setGravity(Gravity.CENTER);
plusText.setBackgroundColor(Color.GREEN);
gridLayout.addView(plusText, plusParams);
GridLayout.LayoutParams checkParams = new GridLayout.LayoutParams(checkRow, checkCol);
TextView checkText = new TextView(this);
checkText.setPadding(32, 32, 32, 32);
checkText.setLayoutParams(faceParams);
checkText.setText("CHK");
checkText.setGravity(Gravity.CENTER);
checkText.setBackgroundColor(Color.MAGENTA);
gridLayout.addView(checkText, checkParams);
Hope this helps with the understanding of the GridLayout.Spec
.