Android

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:

  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 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
  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.   
  38.     }  
  39. });  
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.

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 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.

dynamic table

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs