Post
Ask Question

Dynamic Table in Android

Introduction

 
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 the code section.
 
The following is the XML code of our project is,
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  2.     android:layout_width="fill_parent"    
  3.     android:layout_height="fill_parent"    
  4.     android:orientation="vertical" >    
  5.     
  6.     <LinearLayout    
  7.         android:layout_width="match_parent"    
  8.         android:layout_height="wrap_content" >    
  9.     
  10.         <TextView    
  11.             android:id="@+id/textView1"    
  12.             android:layout_width="wrap_content"    
  13.             android:layout_height="wrap_content"    
  14.             android:text="@string/textview1"    
  15.             android:textAppearance="?android:attr/textAppearanceLarge" />    
  16.     
  17.         <EditText    
  18.             android:id="@+id/editText1"    
  19.             android:layout_width="wrap_content"    
  20.             android:layout_height="wrap_content"    
  21.             android:layout_weight="1"    
  22.             android:ems="10" >    
  23.     
  24.             <requestFocus />    
  25.         </EditText>    
  26.     
  27.     </LinearLayout>    
  28.     
  29.     <LinearLayout    
  30.         android:layout_width="match_parent"    
  31.         android:layout_height="wrap_content" >    
  32.     
  33.         <TextView    
  34.             android:id="@+id/textView2"    
  35.             android:layout_width="wrap_content"    
  36.             android:layout_height="wrap_content"    
  37.             android:text="@string/textview2"    
  38.             android:textAppearance="?android:attr/textAppearanceLarge" />    
  39.     
  40.         <EditText    
  41.             android:id="@+id/editText2"    
  42.             android:layout_width="wrap_content"    
  43.             android:layout_height="wrap_content"    
  44.             android:layout_weight="1"    
  45.             android:ems="10" />    
  46.     
  47.     </LinearLayout>    
  48.     
  49.      <ScrollView    
  50.         android:id="@+id/scrollView1"    
  51.         android:layout_width="match_parent"    
  52.         android:layout_height="wrap_content" >    
  53.     
  54.         <LinearLayout    
  55.             android:layout_width="match_parent"    
  56.             android:layout_height="match_parent"    
  57.             android:orientation="vertical" >    
  58.             
  59.     <Button    
  60.         android:id="@+id/button1"    
  61.         android:layout_width="wrap_content"    
  62.         android:layout_height="wrap_content"    
  63.         android:text="@string/button" />    
  64.     
  65.     <TableLayout    
  66.         android:id="@+id/TableLayout"    
  67.         android:layout_width="200dp"    
  68.         android:layout_height="wrap_content"    
  69.         android:layout_alignParentLeft="true"    
  70.         android:layout_alignParentTop="true"    
  71.         android:layout_marginLeft="49dp"    
  72.         android:layout_marginTop="22dp" >    
  73.            
  74.     </TableLayout>    
  75.     
  76.     <Button    
  77.         android:id="@+id/Show"    
  78.         android:layout_width="wrap_content"    
  79.         android:layout_height="wrap_content"    
  80.         android:text="Show Data" />          
  81.         
  82.     <TableLayout    
  83.         android:id="@+id/TableLayout2"    
  84.         android:layout_width="200dp"    
  85.         android:layout_height="wrap_content"    
  86.         android:layout_alignParentLeft="true"    
  87.         android:layout_alignParentTop="true"    
  88.         android:layout_marginLeft="49dp"    
  89.         android:layout_marginTop="22dp" >    
  90.            
  91.     </TableLayout>    
  92. </LinearLayout>    
  93.     </ScrollView>       
  94.     
  95. </LinearLayout>   
After creating the preceding XML file the Graphical Layout of the activity is as in the following:
 
create table
 
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,
  1. EditText txt1;    
  2. EditText txt2;    
  3. int Row;    
  4. int Col;    
  5. int count, i, j;    
  6. String str;    
  7. String stm;    
  8. Button Create;    
  9. TableLayout TabLayout_Create;    
  10. TableLayout TabLayout_Show;    
  11. Button Show;    
  12. protected void onCreate(Bundle savedInstanceState) {    
  13.     super.onCreate(savedInstanceState);    
  14.     setContentView(R.layout.activity_main);    
  15.     
  16.     txt1 = (EditText) findViewById(R.id.editText1);    
  17.     txt2 = (EditText) findViewById(R.id.editText2);    
  18.     Create = (Button) findViewById(R.id.button1);    
  19.     Show = (Button) findViewById(R.id.Show);    
  20.     TabLayout_Create = (TableLayout) findViewById(R.id.TableLayout);    
  21.     TabLayout_Show = (TableLayout) findViewById(R.id.TableLayout2);    
  22.     Create.setOnClickListener(new View.OnClickListener() {    
  23.     
  24.         @Override    
  25.         public void onClick(View arg0) {    
  26.             // TODO Auto-generated method stub    
  27.     
  28.     
  29.             /*  
  30. Row= Integer.parseInt(txt1.getText().toString());  
  31. Col= Integer.parseInt(txt2.getText().toString());  
  32. */    
  33.             str = txt1.getText().toString();    
  34.             stm = txt2.getText().toString();    
  35.     
  36.             Row = Integer.parseInt(str);    
  37.             Col = Row = Integer.parseInt(stm);    
  38.     
  39.             Toast.makeText(MainActivity.this,    
  40.             str, Toast.LENGTH_SHORT).show();    
  41.             Toast.makeText(MainActivity.this,    
  42.             stm, Toast.LENGTH_SHORT).show();    
  43.     
  44.     
  45.             // TextView[] txt;    
  46.     
  47.             for (i = 1; i <= Row; i++) {    
  48.                 final TableRow row = new TableRow(MainActivity.this);    
  49.                 if (i % 2 == 0) {    
  50.                     row.setBackgroundColor(Color.MAGENTA);    
  51.                 } else {    
  52.                     row.setBackgroundColor(Color.GRAY);    
  53.                 }    
  54.     
  55.                 for (j = 1; j <= Col; j++) {    
  56.     
  57.                     final EditText txt = new EditText(MainActivity.this);    
  58.                     txt.setTextColor(Color.GREEN);    
  59.                     txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);    
  60.                     txt.setTypeface(Typeface.SERIF, Typeface.BOLD);    
  61.                     txt.setGravity(Gravity.LEFT);    
  62.                     txt.setText("C" + i + j + " ");    
  63.     
  64.                     row.addView(txt);    
  65.                 }    
  66.                 TabLayout_Create.addView(row);    
  67.     
  68.             }    
  69.     
  70.     
  71.         }    
  72.     });    
  73.     
  74.     Show.setOnClickListener(new View.OnClickListener() {    
  75.     
  76.         @Override    
  77.         public void onClick(View arg0) {    
  78.             // TODO Auto-generated method stub    
  79.     
  80.             for (i = 0; i < Row; i++) {    
  81.                 final TableRow row = (TableRow) TabLayout_Create.getChildAt(i);    
  82.                 final TableRow row1 = new TableRow(MainActivity.this);    
  83.     
  84.                 if (i % 2 == 0) {    
  85.                     row1.setBackgroundColor(Color.YELLOW);    
  86.                 } else {    
  87.                     row1.setBackgroundColor(Color.RED);    
  88.                 }    
  89.                 for (j = 0; j < Col; j++) {    
  90.                     final EditText etxt = (EditText) row.getChildAt(j);    
  91.     
  92.                     final TextView txt = new TextView(MainActivity.this);    
  93.                     txt.setTextColor(Color.GREEN);    
  94.                     txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);    
  95.                     txt.setTypeface(Typeface.SERIF, Typeface.BOLD);    
  96.                     txt.setGravity(Gravity.LEFT);    
  97.                     txt.setText(etxt.getText());    
  98.     
  99.                     row1.addView(txt);    
  100.                 }    
  101.                 TabLayout_Show.addView(row1);    
  102.             }    
  103.     
  104.         }    
  105.     });    
  106.     
  107. }    
  108.     
  109. };   
Now we will understand the preceding code in sections.
 
Code Section 1
  1. EditText txt1;    
  2. EditText txt2;    
  3. Button Create;    
  4. TableLayout TabLayout_Create;    
  5. TableLayout TabLayout_Show;    
  6. Button Show;    
  7. txt1=(EditText)findViewById(R.id.editText1);    
  8. txt2=(EditText)findViewById(R.id.editText2);    
  9. Create =(Button)findViewById(R.id.button1);    
  10. Show=(Button)findViewById(R.id.Show);    
  11. TabLayout_Create =(TableLayout) findViewById(R.id.TableLayout);    
  12. 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 the 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 is present in TableLayout_Show.
 
We also use two buttons. The first button is to Create. This button is used for creating a 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
  1. Create.setOnClickListener(new View.OnClickListener() {    
  2.     
  3.     @Override    
  4.     public void onClick(View arg0) {    
  5.         // TODO Auto-generated method stub    
  6.         str = txt1.getText().toString();    
  7.         stm = txt2.getText().toString();    
  8.     
  9.         Row = Integer.parseInt(str);    
  10.         Col = Row = Integer.parseInt(stm);    
  11.     
  12.         for (i = 1; i <= Row; i++) {    
  13.             final TableRow row = new TableRow(MainActivity.this);    
  14.             if (i % 2 == 0) {    
  15.                 row.setBackgroundColor(Color.MAGENTA);    
  16.             } else {    
  17.                 row.setBackgroundColor(Color.GRAY);    
  18.             }    
  19.     
  20.             for (j = 1; j <= Col; j++) {    
  21.     
  22.                 final EditText txt = new EditText(MainActivity.this);    
  23.                 txt.setTextColor(Color.GREEN);    
  24.                 txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);    
  25.                 txt.setTypeface(Typeface.SERIF, Typeface.BOLD);    
  26.                 txt.setGravity(Gravity.LEFT);    
  27.                 txt.setText("C" + i + j + " ");    
  28.     
  29.                 row.addView(txt);    
  30.     
  31.     
  32.             }    
  33.             TabLayout_Create.addView(row);    
  34.     
  35.         }    
  36.     }    
  37. });   
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).
 
The 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.
 
table
 
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
  1. Show.setOnClickListener(new View.OnClickListener() {    
  2.     
  3.     @Override    
  4.     public void onClick(View arg0) {    
  5.         // TODO Auto-generated method stub    
  6.     
  7.         for (i = 0; i < Row; i++) {    
  8.             final TableRow row = (TableRow) TabLayout_Create.getChildAt(i);    
  9.             final TableRow row1 = new TableRow(MainActivity.this);    
  10.     
  11.             if (i % 2 == 0) {    
  12.                 row1.setBackgroundColor(Color.YELLOW);    
  13.             } else {    
  14.                 row1.setBackgroundColor(Color.RED);    
  15.             }    
  16.             for (j = 0; j < Col; j++) {    
  17.                 final EditText etxt = (EditText) row.getChildAt(j);    
  18.     
  19.                 final TextView txt = new TextView(MainActivity.this);    
  20.                 txt.setTextColor(Color.GREEN);    
  21.                 txt.setTextSize(TypedValue.COMPLEX_UNIT_PT, 8);    
  22.                 txt.setTypeface(Typeface.SERIF, Typeface.BOLD);    
  23.                 txt.setGravity(Gravity.LEFT);    
  24.                 txt.setText(etxt.getText());    
  25.     
  26.                 row1.addView(txt);    
  27.             }    
  28.             TabLayout_Show.addView(row1);    
  29.         }    
  30.     
  31.     }    
  32. });   
In the preceding code, first of all, we fetched the value of each EditText control that is present in ”TableLayout”, then insert this value into a TextView control and into a new TableLayout. The getChildAt method retrieves the child control of 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.
 
dynamic table


Similar Articles