Search code examples
androidxamarin.androidgrid-layout

Dynamically filling any cell of GridLayout in Xamarin


I want to make a GridLayout dynamically, passing the number of rows and column and populating any particular grid cell at runtime. Till now i successfully made a grid layout of 2*2 but when i am trying to populate a button at 2nd row and 2nd column, by default its going at 1st row and 1st column.

My objective is to place any UIElement like button or TextView at any grid by keeping the other Grid cell vacant. But i am not sure how to achieve this. Please help in what am i missing.

Is it that i can only populate the GridCell right from the first one?

protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);

        RelativeLayout mainlayout = new RelativeLayout(this);
        RelativeLayout.LayoutParams layoutparameter = new 
        RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MatchParent,
        RelativeLayout.LayoutParams.MatchParent);

        mainlayout.LayoutParameters = layoutparameter;

        GridLayout gl = (GridLayout)getView();
        mainlayout.AddView(gl);

        SetContentView(mainlayout);
    }



private GridLayout getView()
        {

            GridLayout gridlayout = new GridLayout(this);

            Button b = new Button(this);
            b.Text = "Button1";


            var p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, 
            ViewGroup.LayoutParams.MatchParent);
            gridlayout.LayoutParameters = p;

            gridlayout.RowCount = 2;
            gridlayout.ColumnCount = 2;

            addViewToGridLayout(gridlayout, b, 2, 1, 2, 1);

            return gridlayout;
        }



private void addViewToGridLayout(GridLayout pGridLayout, View view, int row, int pRowSpan, int column, int pColumnSpan)
    {
        Spec rowSpan = GridLayout.InvokeSpec(GridLayout.Undefined, row);
        Spec colspan = GridLayout.InvokeSpec(GridLayout.Undefined, column);
        GridLayout.LayoutParams gridParam = new GridLayout.LayoutParams(
                rowSpan, colspan);
        pGridLayout.AddView(view, gridParam);
    }

Solution

  • Spec rowSpan = GridLayout.InvokeSpec(GridLayout.Undefined, row,GridLayout.Center);
    Spec colspan = GridLayout.InvokeSpec(GridLayout.Undefined, column, GridLayout.Center);
    

    When you set GridLayout.Undefined in method InvokeSpec . It represents the position of an unspecified column .

    So you need to modify it like

    Spec rowSpan = GridLayout.InvokeSpec(row,pRowSpan);
    Spec colspan = GridLayout.InvokeSpec(column, pColumnSpan);
    

    And the index of Row and Column are started from 0 . And when you don't set the other cell , the default size of cell will always 0 . So you could set the content of other 3 cell as a white TextView like the following.

    TextView view = new TextView(this);
    view.SetMinimumHeight(350);
    view.SetMinimumWidth(350);
    view.SetBackgroundColor(Android.Graphics.Color.Red);
    
    TextView view2 = new TextView(this);
    view2.SetMinimumHeight(350);
    view2.SetMinimumWidth(350);
    view2.SetBackgroundColor(Android.Graphics.Color.Blue);
    
    TextView view3 = new TextView(this);
    view3.SetMinimumHeight(350);
    view3.SetMinimumWidth(350);
    view3.SetBackgroundColor(Android.Graphics.Color.Yellow);
                
    addViewToGridLayout(gridlayout, view, 0, 1, 0, 1);
    addViewToGridLayout(gridlayout, view2, 1, 1, 0, 1);
    addViewToGridLayout(gridlayout, view3, 0, 1, 1, 1);
    addViewToGridLayout(gridlayout, b, 1, 1,1, 1);