Handling Dynamically added Table Rows xml Layout in TableLayout Android

Question

I have a TableLayout in fragment with following code:

<TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/projectsTableLayout"
            android:orientation="vertical"
            android:layout_margin="10dp">
</TableLayout>

This is the AddMore button which is below the TableLayout tag:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  style="?android:attr/buttonBarButtonStyle"
  android:id="@+id/add_more_projects_btn"
  android:text="@string/addmore"
  android:textColor="@color/colorAccent"
  android:layout_below="@+id/projectsTableLayout"
  android:layout_centerHorizontal="true"
  android:layout_marginTop="20dp"
  android:layout_marginBottom="20dp"/>

Also I have created TableRow layout in separate xml file with following code:

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <EditText
            android:id="@+id/project_name__ET"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="10dp"
            android:gravity="center_vertical"
            android:hint="@string/projectnametxt"
            android:inputType="text"
            android:paddingLeft="5dp"
            android:paddingRight="5dp" />

        <LinearLayout
            android:id="@+id/yearProjectTypeLinearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="05dp"
            android:orientation="horizontal"
            android:weightSum="1">

            <Spinner
                android:id="@+id/yearSpinner"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:drawSelectorOnTop="false"
                android:spinnerMode="dropdown" />

            <Spinner
                android:id="@+id/projectTypeSpinner"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:drawSelectorOnTop="false"
                android:spinnerMode="dropdown" />
        </LinearLayout>
    </LinearLayout>
</TableRow>

What I want to implement is when the application loads I will be dynamically add rows 5 times.

I want to add 5 more rows on the Add More button click. Also I have to send all the values to the webserver when the user moves ahead in the application.

I am confused how should provide the ID to the components like(EditText, Spinners) in the Rows of table and retrieve it when the user moves to next screen.

I want to code in such a way so it can be optimised and easy to retrieve all the data for as many rows added to TableLayout on the AddMore Button click.

How to retrieve values and set ids for Row Components.

EDIT ::

Modification of code as suggested by @Rohit Heera

I have written following code:

        projectTableLayout = (TableLayout) rootView.findViewById(R.id.projectsTableLayout);
        projectTableLayout.setStretchAllColumns(true);

        yearAdapter = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_spinner_dropdown_item, Constants.YEAR_ARRAY);
        projectTypeAdapter = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_spinner_dropdown_item, Constants.PROJECT_TYPE_ARRAY);
        projectListData = new ArrayList<ProjectData>();

        for(int i = 0; i < 5 ; i++)
        {
            tableRowStartCount = i;
            TableRow projectItemRow = new TableRow(getActivity().getApplicationContext());
            LayoutInflater inflator = (LayoutInflater) getActivity().getSystemService(getActivity().getApplicationContext().LAYOUT_INFLATER_SERVICE);
            projectItemRow.setLayoutParams(new TableLayout.LayoutParams(
                    TableLayout.LayoutParams.MATCH_PARENT,
                    TableLayout.LayoutParams.MATCH_PARENT, 1.0f));
            View projectRowView = inflator.inflate(R.layout.project_row_item,projectItemRow,false);


            projectNameET = (EditText) projectRowView.findViewById(R.id.project_name__ET);

            yearSpinner = (Spinner) projectRowView.findViewById(R.id.yearSpinner);
            yearSpinner.setAdapter(yearAdapter);

            projectTypeSpinner = (Spinner) projectRowView.findViewById(R.id.projectTypeSpinner);
            projectTypeSpinner.setAdapter(projectTypeAdapter);
            projectItemRow.addView(projectRowView);

            ProjectData projectObj = new ProjectData();
            projectListData.add(projectObj);

            projectTableLayout.addView(projectItemRow,tableRowStartCount);
        }

Can you please let me know how can i implement the eventlistener in the above loop?

Answer 1

Like Edit Text you need to create separte class for spinner item listeners and store the value and main list automatically get all the new values.

/**
     * this method add the dynamic table row and display the list .
     */

     List<ProjectData> mainList=new List<ProjectData>();

     // calling function
     displayList(mainList);



    public void displayList(List<ProjectData> datalist) {
        int i = 0;
        TableLayout projectsTableLayout = (TableLayout) findViewById(R.id.projectsTableLayout);
        projectsTableLayout.removeAllViews();
        for (Iterator<ProjectData> it :datalist.hasNext();) {

            TableRow singleTableRow = new TableRow(this);

            LayoutInflater inflator = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = inflator.inflate(R.layout.addattendeelistdata, null);

            RelativeLayout parentRelativeLayout = (RelativeLayout) view
                    .findViewById(R.id.comleteRL);

            EditText project_name__ET = (EditText) view
                    .findViewById(R.id.project_name__ET);
            Spinner yearSpinner = (Spinner) view
                    .findViewById(R.id.yearSpinner);
            Spinner projectTypeSpinner = (Spinner) view
                    .findViewById(R.id.projectTypeSpinner);
            project_name__ET.addTextChangedListener(new ListenEditText(it.next()) );

            singleTableRow.addView(view);

            /** Add row to TableLayout. */

            projectsTableLayout.addView(singleTableRow, i);

        }


    }

    class ListenEditText implements TextWatcher
    {
        ProjectData data;
        ListenEditText(ProjectData data)
        {
            this.data=data;

        }
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                int count) {
            // TODO Auto-generated method stub

        }

        @Override
        public void afterTextChanged(Editable s) {
            data.project_name=s.toString();

        }}


    ModelClass;

    class ProjectData
    {
    public String project_name;
    public String year;
    public String projectType;
    }

Answer 2

Use this code to add rows in table 
/**
     * this method add the dynamic table row and display the list .
     */
    public void displayList(List<Data> datalist) {
        int i = 0;
        TableLayout projectsTableLayout = (TableLayout) findViewById(R.id.projectsTableLayout);
        projectsTableLayout.removeAllViews();
        for (i = 0; i <= datalist.size(); i++) {

            TableRow singleTableRow = new TableRow(this);

            LayoutInflater inflator = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = inflator.inflate(R.layout.addattendeelistdata, null);

            RelativeLayout parentRelativeLayout = (RelativeLayout) view
                    .findViewById(R.id.comleteRL);

            EditText project_name__ET = (EditText) view
                    .findViewById(R.id.project_name__ET);
            Spinner yearSpinner = (Spinner) view
                    .findViewById(R.id.yearSpinner);
            Spinner projectTypeSpinner = (Spinner) view
                    .findViewById(R.id.projectTypeSpinner);


            singleTableRow.addView(view);

            /** Add row to TableLayout. */

            projectsTableLayout.addView(singleTableRow, i);

        }


    }

And for get Reference for each object you need to Create seperate class .
If you tell me on which event you can move to next class so i can help you better.

Thanks