Dynamic Table in Android

In this short article first we will create a dynamic table and then we will insert some data into the table. Finally, we will retrieve data from this table and insert it into another table. Now we will move to code section.

The following is the XML code of our project is:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/textview1"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10" >

            <requestFocus />
        </EditText>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/textview2"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10" />

    </LinearLayout>

     <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button" />

    <TableLayout
        android:id="@+id/TableLayout"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="49dp"
        android:layout_marginTop="22dp" >

    </TableLayout>

    <Button
        android:id="@+id/Show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Data" />

    <TableLayout
        android:id="@+id/TableLayout2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="49dp"
        android:layout_marginTop="22dp" >

    </TableLayout>
</LinearLayout>
    </ScrollView>

</LinearLayout>

After creating the preceding XML file the Graphical Layout of the activity is as in the following:



In the preceding activity we will use 2 EditTexts (TextBoxes) to get the value of the Rows and Columns. We have two buttons and two Table Layouts in this activity. A table Layout arranges its children into rows and columns. TableLayout consists of a number of TableRow objects, each defining a row (actually, you can have other children that will be explained below). Now we move towards the source code of this Activity.

The following is the source code of this Activity:

EditText txt1;
EditText txt2;
int Row;
int Col;
int count, i, j;
String str;
String stm;
Button Create;
TableLayout TabLayout_Create;
TableLayout TabLayout_Show;
Button Show;
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    txt1 = (EditText) findViewById(R.id.editText1);
    txt2 = (EditText) findViewById(R.id.editText2);
    Create = (Button) findViewById(R.id.button1);
    Show = (Button) findViewById(R.id.Show);
    TabLayout_Create = (TableLayout) findViewById(R.id.TableLayout);
    TabLayout_Show = (TableLayout) findViewById(R.id.TableLayout2);
    Create.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub


            /*
Row= Integer.parseInt(txt1.getText().toString());
Col= Integer.parseInt(txt2.getText().toString());
*/
            str = txt1.getText().toString();
            stm = txt2.getText().toString();

            Row = Integer.parseInt(str);
            Col = Row = Integer.parseInt(stm);

            Toast.makeText(MainActivity.this,
            str, Toast.LENGTH_SHORT).show();
            Toast.makeText(MainActivity.this,
            stm, Toast.LENGTH_SHORT).show();


            // TextView[] txt;

            for (i = 1; i <= Row; i++) {
                final TableRow row = new TableRow(MainActivity.this);
                if (i % 2 == 0) {
                    row.setBackgroundColor(Color.MAGENTA);
                } else {
                    row.setBackgroundColor(Color.GRAY);
                }

                for (j = 1; j <= Col; j++) {

                    final EditText txt = new EditText(MainActivity.this);
                    txt.setTextColor(Color.GREEN);
                    txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);
                    txt.setTypeface(Typeface.SERIF, Typeface.BOLD);
                    txt.setGravity(Gravity.LEFT);
                    txt.setText("C" + i + j + " ");

                    row.addView(txt);
                }
                TabLayout_Create.addView(row);

            }


        }
    });

    Show.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub

            for (i = 0; i < Row; i++) {
                final TableRow row = (TableRow) TabLayout_Create.getChildAt(i);
                final TableRow row1 = new TableRow(MainActivity.this);

                if (i % 2 == 0) {
                    row1.setBackgroundColor(Color.YELLOW);
                } else {
                    row1.setBackgroundColor(Color.RED);
                }
                for (j = 0; j < Col; j++) {
                    final EditText etxt = (EditText) row.getChildAt(j);

                    final TextView txt = new TextView(MainActivity.this);
                    txt.setTextColor(Color.GREEN);
                    txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);
                    txt.setTypeface(Typeface.SERIF, Typeface.BOLD);
                    txt.setGravity(Gravity.LEFT);
                    txt.setText(etxt.getText());

                    row1.addView(txt);
                }
                TabLayout_Show.addView(row1);
            }

        }
    });

}

};

Now we will understand the preceding code in sections.

Code Section 1

EditText txt1;
EditText txt2;
Button Create;
TableLayout TabLayout_Create;
TableLayout TabLayout_Show;
Button Show;
txt1=(EditText)findViewById(R.id.editText1);
txt2=(EditText)findViewById(R.id.editText2);
Create =(Button)findViewById(R.id.button1);
Show=(Button)findViewById(R.id.Show);
TabLayout_Create =(TableLayout) findViewById(R.id.TableLayout);
TabLayout_Show=(TableLayout) findViewById(R.id.TableLayout2);

In the preceding code we created two objects of the EditText class. In the first txt1 object we provided the reference of edittext1. In the second txt2 object we will provide the reference of edittext2. Here edittext1 and edittext2 both are id of EditText. We used the txt1 to retrieve the number of rows and txt2 .

To retrieve the number of columns that are inserted by the user, we use two Table Layouts. The first is TableLayout_Create, in this layout we create a dynamic number of EditTexts (TextBoxes) and the second layout is TableLayout_Show. In this layout we create a dynamic number of TextView. We fetch the value of each Edittext that are present in TableLayout_Create and insert it into the TextView that are present in TableLayout_Show.

We also use two buttons. The first button is Create. This button is used for creating dynamic number of EditTexts in TableLayout_Create. Another button is Show. This button is used for fetching the data from each Editext and inserting it into a TextView.

Code Section 2

Create.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        str = txt1.getText().toString();
        stm = txt2.getText().toString();

        Row = Integer.parseInt(str);
        Col = Row = Integer.parseInt(stm);

        for (i = 1; i <= Row; i++) {
            final TableRow row = new TableRow(MainActivity.this);
            if (i % 2 == 0) {
                row.setBackgroundColor(Color.MAGENTA);
            } else {
                row.setBackgroundColor(Color.GRAY);
            }

            for (j = 1; j <= Col; j++) {

                final EditText txt = new EditText(MainActivity.this);
                txt.setTextColor(Color.GREEN);
                txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);
                txt.setTypeface(Typeface.SERIF, Typeface.BOLD);
                txt.setGravity(Gravity.LEFT);
                txt.setText("C" + i + j + " ");

                row.addView(txt);


            }
            TabLayout_Create.addView(row);

        }


    }
});

In the preceding code we created an OnClick event for the Create Button. We use two variables, Row and Col. The Row variable contains the numbers of rows and the Col variable contains the number of columns that are entered by the user into the TextViews txt1 and txt2. Then we used two loops, the outer loop creates a new row and the inner loop creates a new column final TableRow row = new TableRow(MainActivity.this).

Statement creates a new Row object into the current activity. Here MainActivity is the name of our activity. Then we created a number of Edittext objects and assign some property to each Edittext object. In the internal loop, after assigning all the properties to each edittext object we assign this Edittext object to the row object. Addview is used for assigning a view into another view. At the end of the internal loop we assigned each row to TabLayout_Create TabLayout. When we click on this button a table is created and this table will contain a number of EditTexts with a default value.

Let us see an example.



In the preceding example we created a table with 4 rows and each row contains 3 columns. Each cell of the table contains an EditText control with a default value.

Code Section 3

Show.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub

        for (i = 0; i < Row; i++) {
            final TableRow row = (TableRow) TabLayout_Create.getChildAt(i);
            final TableRow row1 = new TableRow(MainActivity.this);

            if (i % 2 == 0) {
                row1.setBackgroundColor(Color.YELLOW);
            } else {
                row1.setBackgroundColor(Color.RED);
            }
            for (j = 0; j < Col; j++) {
                final EditText etxt = (EditText) row.getChildAt(j);

                final TextView txt = new TextView(MainActivity.this);
                txt.setTextColor(Color.GREEN);
                txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);
                txt.setTypeface(Typeface.SERIF, Typeface.BOLD);
                txt.setGravity(Gravity.LEFT);
                txt.setText(etxt.getText());

                row1.addView(txt);
            }
            TabLayout_Show.addView(row1);
        }

    }
});

In the preceding code first of all we fetched the value of each EditText control that are present in ”TableLayout”, then insert this value into a TextView control and into a new TableLayout. The getChildAt method retrieves the child control of a parent control. This method takes an integer value that represents the index number of the control. We used the addView method for inserting a view into another view. So we first insert each Textview into a row and at the end of the inner loop we insert this row (view) into TabLayout_show view.

When we click on the Show button then the value will be inserted into TabLayout_Show from TabLayout_Create.