Alignment issue with contents of table row generated programmatically

Question

I have created an activity in which I want to programmatically generate rows in a table. The table will have a checkbox, imageview, and 2 textviews in every rows. The rows are getting generated, but the alignment of the contents in the rows are not correct.

The activity code:

public class PlanTripActivity extends ActionBarActivity {

    int tableRowCount = 0;
    TableLayout plan_a_trip_table;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_plan_trip);

        plan_a_trip_table = (TableLayout) findViewById(R.id.plan_a_trip_table);

        planTripBody("", "Test Name Type",
                "P1");
    }

    //table body
    public void planTripBody(String imagename, String nameType,
            String placeId) {

        tableRowCount = tableRowCount + 1;


        // ----------------plan_a_trip_table table
        // body------------------------------------------

        TableRow plan_trip_tr_data = new TableRow(this);
        plan_trip_tr_data.setId(10);
        //plan_trip_tr_data.setBackgroundResource(R.drawable.grey_list_bg);
        plan_trip_tr_data.setLayoutParams(new LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

        // select checkbox
        final CheckBox select_checkbox = new CheckBox(this);
        select_checkbox.setId(20);
        select_checkbox.setTextColor(Color.BLACK);
        select_checkbox.setGravity(Gravity.CENTER);
        select_checkbox.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        plan_trip_tr_data.addView(select_checkbox);

        // image
        final ImageView place_imageview = new ImageView(this);
        place_imageview.setId(20);
        // test_name.setText(parser.getValue(e, KEY_SETNAME));
        //place_imageview.setPadding(5, 5, 5, 5);
        place_imageview.setImageResource(R.drawable.planatrip);
        plan_trip_tr_data.addView(place_imageview);// add the column to
                                                        // the table row
                                                        // here

        // Type
        final TextView name_type = new TextView(this);
        name_type.setId(21);// define id that must be unique
        // no_of_types.setText(parser.getValue(e, KEY_RIGHTMARKS)); // set
        // the text for the header
        name_type.setText(Html.fromHtml(nameType));
        name_type.setTextColor(Color.BLACK); // set the color
        name_type.setPadding(5, 5, 5, 5); // set the padding (if
                                                // required)
        name_type.setGravity(Gravity.LEFT);
        name_type.setTextSize(18);
        plan_trip_tr_data.addView(name_type); // add the column
                                                            // to
                                                            // the table row
                                                            // here


        // ID
        final TextView place_id = new TextView(this);
        place_id.setId(21);// define id that must be unique
        // total_amount.setText(parser.getValue(e, KEY_WRONGMARKS)); // set
        // the text for the header
        place_id.setText(placeId);
        place_id.setTextColor(Color.BLACK); // set the color
        place_id.setPadding(5, 5, 5, 5); // set the padding (if
                                                // required)
        place_id.setGravity(Gravity.CENTER);
        place_id.setTextSize(10);
        plan_trip_tr_data.addView(place_id); // add the column
                                                            // to the
        // table row here


        plan_a_trip_table.addView(plan_trip_tr_data,
                new TableLayout.LayoutParams(LayoutParams.FILL_PARENT,
                        LayoutParams.WRAP_CONTENT));

        // ----------------------On click name_type

        name_type.setOnClickListener(new OnClickListener() {

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

                if (!select_checkbox.isChecked()) {
                    select_checkbox.setChecked(true);
                } else {
                    select_checkbox.setChecked(false);
                }

            }
        });
        // ----------------------On click customer_name



    }
}

The layout file:

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

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

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

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true" >

                <TextView
                    android:id="@+id/city_name_textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="City name"
                    android:textSize="20sp" />

                <ImageView
                    android:id="@+id/update_indicator_imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@android:drawable/presence_busy" 
                    android:layout_marginLeft="10dp"/>
            </TableRow>

            <TableLayout
                android:id="@+id/plan_a_trip_table"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tableRow1"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="20dp" 
                android:stretchColumns="0,1,2,3">


            </TableLayout>

            <Button
                android:id="@+id/plan_a_trip_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/plan_a_trip_table"
                android:layout_centerHorizontal="true"
                android:text="Plan Trip" 
                android:layout_marginTop="20dp"/>

        </RelativeLayout>
    </ScrollView>

</RelativeLayout>

The output:

Expected output:

What should I do to center the checkbox, imageview and textboxes in the same line such that they do not look haphazard as in the above output?

Answer 1

In your code,you also need to align your TableRow in CENTER,as

 TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        rowParams.gravity = Gravity.CENTER;

And also set layoutParams for all the child Views.

i.e. Simply,Try to change planTripBody function with below code,it will work.

 public void planTripBody(String imagename, String nameType,
            String placeId) {

        tableRowCount = tableRowCount + 1;


        // ----------------plan_a_trip_table table
        // body------------------------------------------

        TableRow plan_trip_tr_data = new TableRow(this);

        TableRow.LayoutParams rowParams = new TableRow.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        rowParams.gravity = Gravity.CENTER;
        plan_trip_tr_data.setLayoutParams(rowParams);

        plan_trip_tr_data.setId(10);
        //plan_trip_tr_data.setBackgroundResource(R.drawable.grey_list_bg);
        plan_trip_tr_data.setLayoutParams(new LayoutParams(
                LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));

        TableRow.LayoutParams innerParams = new TableRow.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);  

        // select checkbox
        final CheckBox select_checkbox = new CheckBox(this);
        select_checkbox.setId(20);
        select_checkbox.setLayoutParams(innerParams);
        select_checkbox.setTextColor(Color.BLACK);
        select_checkbox.setGravity(Gravity.CENTER);
        select_checkbox.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        plan_trip_tr_data.addView(select_checkbox);

        // image
        final ImageView place_imageview = new ImageView(this);
        place_imageview.setId(20);
        place_imageview.setLayoutParams(innerParams);

        // test_name.setText(parser.getValue(e, KEY_SETNAME));
        //place_imageview.setPadding(5, 5, 5, 5);
        place_imageview.setImageResource(R.drawable.planatrip);
        plan_trip_tr_data.addView(place_imageview);// add the column to
                                                        // the table row
                                                        // here

        // Type
        final TextView name_type = new TextView(this);
        name_type.setLayoutParams(innerParams);

        name_type.setId(21);// define id that must be unique
        // no_of_types.setText(parser.getValue(e, KEY_RIGHTMARKS)); // set
        // the text for the header
        name_type.setText(Html.fromHtml(nameType));
        name_type.setTextColor(Color.BLACK); // set the color
        name_type.setPadding(5, 5, 5, 5); // set the padding (if
                                                // required)
        name_type.setGravity(Gravity.LEFT);
        name_type.setTextSize(18);
        plan_trip_tr_data.addView(name_type); // add the column
                                                            // to
                                                            // the table row
                                                            // here


        // ID
        final TextView place_id = new TextView(this);
        place_id.setLayoutParams(innerParams);

        place_id.setId(21);// define id that must be unique
        // total_amount.setText(parser.getValue(e, KEY_WRONGMARKS)); // set
        // the text for the header
        place_id.setText(placeId);
        place_id.setTextColor(Color.BLACK); // set the color
        place_id.setPadding(5, 5, 5, 5); // set the padding (if
                                                // required)
        place_id.setGravity(Gravity.CENTER);
        place_id.setTextSize(10);
        plan_trip_tr_data.addView(place_id); // add the column
                                                            // to the
        // table row here


        plan_a_trip_table.addView(plan_trip_tr_data,
                new TableLayout.LayoutParams(LayoutParams.FILL_PARENT,
                        LayoutParams.WRAP_CONTENT));

        // ----------------------On click name_type

        name_type.setOnClickListener(new OnClickListener() {

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

                if (!select_checkbox.isChecked()) {
                    select_checkbox.setChecked(true);
                } else {
                    select_checkbox.setChecked(false);
                }

            }
        });
        // ----------------------On click customer_name



    }

EDIT

You need to set android:gravity="center_vertical" property to TableRow to align its child vertically center.
And Use TableRow height as android:layout_height="match_parent"
and set Padding to table row as android:paddingTop="10dp",do not set Margin to Textview as

So Change your layout to below code.

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

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

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

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentTop="true"
                android:paddingTop="10dp"
                android:gravity="center_vertical"
                android:layout_centerHorizontal="true" >

                <TextView
                    android:id="@+id/city_name_textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="City name"
                    android:textSize="20sp" />

                <ImageView
                    android:id="@+id/update_indicator_imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@android:drawable/presence_busy" 
                    android:layout_marginLeft="10dp"/>
            </TableRow>

            <TableLayout
                android:id="@+id/plan_a_trip_table"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/tableRow1"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="20dp" 
                android:stretchColumns="0,1,2,3">


            </TableLayout>

            <Button
                android:id="@+id/plan_a_trip_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/plan_a_trip_table"
                android:layout_centerHorizontal="true"
                android:text="Plan Trip" 
                android:layout_marginTop="20dp"/>

        </RelativeLayout>
    </ScrollView>

</RelativeLayout>