android - Designing the TableLayout which has to be added dynamically within a RelativeLayout

Question

I have to create an activity which has the layout as shown in the attached image. I am having problems with making it look close to as shown in the image. In the previous activity a user enters his.her address and saves it. When saved a new row which contains a TextView and a ImageButton has to be created. The TextView shows name of the person and the ImageButton can be used to delete that person. Every time a new person's address is entered and saved, a new row must be created and therefore the add button keeps moving down to create a row. I have added the screenshot of how the layout looks currently. I am a beginner in android app programming and need some assistance. Kindly, please help me.

Here is part of my code:

if (requestCode == REC_INFO && resultCode == RESULT_OK && data != null) {
        RecipientArray = (ArrayList<Person>) data.getSerializableExtra("RecArray");

        TableLayout tbl = new TableLayout(this);
        TextView[] tv = new TextView[RecipientArray.size()];
        ImageButton delete_btns[] = new ImageButton[RecipientArray.size()];
        TableRow tr[] = new TableRow[RecipientArray.size()];
        for (int i = 0; i < RecipientArray.size(); i++) {

            tv[i] = new TextView(this);
            tv[i].setBackgroundResource(R.drawable.fill_rece);
            Person p = RecipientArray.get(i);
            tv[i].setText(p.getName());
            tv[i].setTextColor(Color.WHITE);
            tv[i].setGravity(Gravity.CENTER);
                            delete_btns[i] = new ImageButton(this);
                                   delete_btns[i].setImageResource(R.drawable.ipad_postcare_landscape_from);
                          d.setBounds(0, 0, delete_btns[i].getWidth(), delete_btns[i].getHeight());             
            tr[i] = new TableRow(this);
            tr[i].addView(tv[i]);
            tr[i].addView(delete_btns[i]);
            tbl.addView(tr[i]);

        }
        recs_layout.addView(tbl);//Adding TableLayout to parent RelativeLayout

    }

Here is the XML layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@id/top_bar_view"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/top_bar"
    android:contentDescription="@string/content" />

<TextView
    android:id="@+id/txt_recipients"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="8dp"
    android:padding="8dp"
    android:text="@string/text_recipients"
    android:textColor="#FFFFFF"
    android:textSize="16sp" />

<ImageButton
    android:id="@id/btn_back"
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/content"
    android:paddingTop="6dp"
    android:src="@drawable/ic_back" />

<RelativeLayout
    android:id="@+id/Rlayout_recipients"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/top_bar_view"
    android:background="@drawable/bg" >

    <ImageButton
        android:id="@+id/btn_rec_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="96dp"
        android:contentDescription="@string/content"
        android:src="@drawable/icon_add" />
</RelativeLayout>

Answer 1

I think your textview is taking all the space in the table row try setting layout params for that as well

For ex:

tv[i].setLayoutParams(new TableRow.LayoutParams(0, LayoutParams.WRAP_CONTENT, 3f));

And similarly for image button

delete_btns[i].setLayoutParams(new TableRow.LayoutParams(
                    0, LayoutParams.WRAP_CONTENT,1f));

And to table row

tr[i].setWeightSum(4f)

Here the third argument of float type is weight of the view as it is set to 1f for both your image view and textview both will occupy equal space you can change it and set it what you need.

While using weight set width to 0dp for both textview and imageview

EDIT

LayoutParams lp=new TableRow.LayoutParams(0, LayoutParams.WRAP_CONTENT);
lp.weight=3f;
tv[i].setLayoutParams(lp);