View

Tuesday, 24 May 2011

How To Add a Row Dynamically

 whenever the button is clicked, it adds a new row to the TableLayout and notice the Scrollbar from the ScrollView.

XML CODE:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:orientation="vertical">

<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Click To Add New row"></Button>

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

  <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="0">

    <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content">
        <TextView android:layout_width="fill_parent" android:text="textfield 1-1" android:layout_height="wrap_content" android:id="@+id/TextView01"></TextView>
        <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:src="@drawable/icon" android:layout_width="wrap_content"></ImageView>
      <DigitalClock android:text="DigitalClock" android:layout_width="wrap_content" android:id="@+id/digitalClock1" android:layout_height="wrap_content"></DigitalClock>
      <CheckBox android:id="@+id/CheckBox01" android:text="" android:layout_width="wrap_content" android:layout_height="wrap_content"></CheckBox>
    </TableRow>

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

[Sorce code=tablelayout.java]

public class tablelayout extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
Button btn;
int counter=0;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        btn=(Button)findViewById(R.id.Button01);
        btn.setOnClickListener( this);
       
    }
    public void onClick(View view){
    TableLayout tl=(TableLayout)findViewById(R.id.TableLayout01);
    TableRow tr=new TableRow(this);
    counter++;
    TextView tv= new TextView(this);
    tv.setText("text"+counter);
    CheckBox cb=new CheckBox(this);
    DigitalClock dc= new DigitalClock(this);
    ImageView ib=new ImageView(this);
    ib.setImageResource(R.drawable.icon);
    tr.addView(tv);
        tr.addView(ib);
        tr.addView(dc);
        tr.addView(cb);
        tl.addView(tr,new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
     
    }
  
}

[/source code]  
Output Like This.


NOTE:TableLayout is built using the TableLayout and the TableRow commands. There is no TableCols like the<td> tag in HTML. To align your view in columns you have to set the width of the elements and manually control the layout.So

4 comments:

  1. I really wana thank you for providing such informative and qualitative material so often.
    google android news

    ReplyDelete
  2. can you tell me how to remove row dinamically? thank you

    ReplyDelete
  3. Add one more Button and name as "Click to Remove".

    remove_btn=(Button)findViewById(R.id.Button02);
    Set remove_btn.setOnClickListener( this);

    //*** Place this code***//
    TableLayout tl=(TableLayout)findViewById(R.id.TableLayout01);
    TableRow tr=new TableRow(this);
    counter--;
    TextView tv= new TextView(this);
    tv.setText("text"+counter);
    CheckBox cb=new CheckBox(this);
    DigitalClock dc= new DigitalClock(this);
    ImageView ib=new ImageView(this);
    ib.setImageResource(R.drawable.icon);
    tr.removeView(tv);
    tr.removeView(ib);
    tr.removeView(dc);
    tr.removeView(cb);
    tl.removeView(tr,new TableLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));

    ReplyDelete