android -> relative-layout changes button text alignment on click

Question

This is my main.xml:`

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:addStatesFromChildren="false"
    android:layout_height="wrap_content">
    <TableLayout
        android:id="@+id/header"
        android:layout_marginRight="2dp"
        android:layout_marginLeft="2dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true">
        <TableRow>
            <TextView
                android:id="@+id/leftHeader"
                android:textColor="@android:color/black"
                android:layout_margin="1dp"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:background="#ffcccccc"
                android:text="textview1"
                android:layout_width="30dip" />
            <TextView
                android:id="@+id/rightHeader"
                android:textColor="@android:color/black"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:layout_margin="1dp"
                android:background="@android:color/white"
                android:text="textview2"
                android:layout_width="70dip" />
        </TableRow>
    </TableLayout>
<ScrollView
    android:id="@+id/table_scroll"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="2dp"
    android:layout_marginLeft="2dp"
    android:layout_below="@+id/header"
    android:layout_above="@+id/buttonTable">
    <TableLayout
        android:id="@+id/maintable"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black">
        <TableRow
            android:id="@+id/maintableRow">
            <TextView
                android:id="@+id/maintableLeft"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginRight="1dp"
                android:layout_marginLeft="1dp"
                android:text="textview1"
                android:layout_width="30dip" />
            <TextView
                android:id="@+id/maintableRight"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:text="textview2"
                android:layout_width="70dip" />
        </TableRow>
    </TableLayout>
</ScrollView>
<TableLayout
    android:id="@+id/buttonTable"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:layout_alignParentBottom="true">
    <TableRow>
        <Button
            android:id="@+id/button_ResetData"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:text="Reset Data"
            android:layout_gravity="center"
            android:layout_weight="1" />
        <Button
            android:id="@+id/button_Refresh"
            android:layout_height="wrap_content"
            android:layout_width="fill_parent"
            android:text="Refresh"
            android:gravity="center"
            android:layout_weight="1" />
    </TableRow>
</TableLayout>

`

After I press one of the buttons its text alignment goes to the left, how can I make it stay in center? something similar happens with the first table (header) (textview1, textview2) but here it also reduses the textsize the amount of the text in the view...

EDIT: I managed to find the code that causes the change but I don't know how to fix this. Maybe some one can explain me why does this happen and how to fix it?

    private void fillTableView(List<BatteryInfo> list) {

    TextView leftHeader = (TextView) findViewById(R.id.leftHeader);
    TextView rightHeader = (TextView) findViewById(R.id.rightHeader);

    LayoutParams leftHeaderLayoutParams = leftHeader.getLayoutParams();
    LayoutParams rightHeaderLayoutParams = rightHeader.getLayoutParams();

    TableLayout contentTable = (TableLayout) findViewById(R.id.maintable);      

    contentTable.removeAllViews();

    for (int i = list.size() - 1; i >= 0; i--) {

        TextView tv1 = new TextView(this);
        tv1.setTextColor(Color.BLACK);
        tv1.setGravity(Gravity.CENTER);
        tv1.setBackgroundColor(Color.LTGRAY);
        tv1.setLayoutParams(leftHeaderLayoutParams);
        tv1.setText(String.valueOf(list.get(i).getLevel()));

        TextView tv2 = new TextView(this);
        tv2.setTextColor(Color.BLACK);
        tv2.setGravity(Gravity.CENTER);
        tv2.setBackgroundColor(Color.WHITE);
        tv2.setLayoutParams(rightHeaderLayoutParams);
        tv2.setText(list.get(i).getDurationTimeInString());

        TableRow tblRow = new TableRow(this);
        tblRow.addView(tv1);
        tblRow.addView(tv2);

        contentTable.addView(tblRow);                   
    }       
}

After I use removeAllViews or any addView function the layout of the top most table changes as I explained before. Why does this happen?

Answer 1

You can fix this by changing the android:layout_width="30dip" and android:layout_width="70dip" in leftHeader and rightHeader to android:layout_width="fill_parent". I have to admit that I'm not entirely certain why that is, though.

Instead of clearing and re-filling a TableLayout every time, though, you might want to consider using a ListAdapter. It's much more suited to what you're doing (and will probably perform better, too).

UPDATE NUMBER 2:

Notice the change in the main.xml and the change in the onCreate method. This will make your header static while letting your listview scroll, and changing from TableLayout to LinearLayout for your buttons will fix the alignment issue.

Here's how to do this with a custom adapter instead of TableLayout (which isn't really meant for dynamic data like this):

Change you main.xml to this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:addStatesFromChildren="false" android:layout_height="wrap_content">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_alignParentTop="true" android:id="@+id/header">
<TextView android:id="@+id/leftHeader" android:textColor="@android:color/black"
    android:layout_margin="1dp" android:gravity="center_horizontal"
    android:layout_weight="1" android:background="#ffcccccc" android:text="textview1"
    android:layout_width="fill_parent" android:layout_height="wrap_content"/>
<TextView android:id="@+id/rightHeader" android:textColor="@android:color/black"
    android:gravity="center_horizontal" android:layout_weight="1"
    android:layout_margin="1dp" android:background="@android:color/white"
    android:text="textview2" android:layout_width="fill_parent" android:layout_height="wrap_content"/>
</LinearLayout>

<LinearLayout android:id="@+id/buttonTable" android:orientation="horizontal"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:layout_alignParentBottom="true" >
        <Button android:id="@+id/button_ResetData"
            android:layout_height="wrap_content" android:layout_width="fill_parent"
            android:text="Reset Data" android:layout_gravity="center"
            android:layout_weight="1" />
        <Button android:id="@+id/button_Refresh"
            android:layout_height="wrap_content" android:layout_width="fill_parent"
            android:text="Refresh" android:gravity="center"
            android:layout_weight="1" />
</LinearLayout>

<ListView android:id="@+id/listView" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:layout_weight="1"
    android:fadingEdge="none"
    android:layout_below="@id/header" android:layout_above="@id/buttonTable">
</ListView>

Add XML layout files for your rows (row.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="wrap_content">
    <TextView android:id="@+id/maintableLeft"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:layout_marginRight="1dp" android:layout_marginLeft="1dp"
        android:gravity="center_horizontal" android:background="#ffcccccc"
        android:textColor="@android:color/black" android:layout_width="fill_parent" />
    <TextView android:id="@+id/maintableRight"
        android:layout_height="wrap_content" android:background="#ffcccccc"
        android:textColor="@android:color/black" android:layout_weight="1"
        android:layout_marginLeft="1dp" android:layout_marginRight="1dp"
        android:gravity="center_horizontal" android:layout_width="fill_parent" />
</LinearLayout>

Now everything is in place to create a custom class from BaseAdapter to display your information (and make your layout work better):

class CustomAdapter extends BaseAdapter {
    private List<BatteryInfo> info;
    private LayoutInflater inflater;

    public CustomAdapter(Context context, List<BatteryInfo> x) {
        this.info = x;
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public int getCount() {
        return info.size();
    }

    public Object getItem(int position) {
        return info.get(position);
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        View v;
        v = inflater.inflate(R.layout.row, parent, false);

        BatteryInfo b = (BatteryInfo) getItem(position);

        ((TextView) v.findViewById(R.id.maintableLeft)).setText(b
                .getDurationTimeInString());
        ((TextView) v.findViewById(R.id.maintableRight)).setText(b
                .getLevel());

        return v;
    }
}

Modify your onCreate method to inflate the header, add it, and then bind your data to your ListView using the new CustomAdapter (I've created a fake BatteryInfo class for this example, you'll need to modify things slightly to get this working):

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    final ListView lv = (ListView) this.findViewById(R.id.listView);
    final Context context = this;

    Button refresh = (Button) this.findViewById(R.id.button_Refresh);
    refresh.setOnClickListener(new OnClickListener() {

        public void onClick(View v) {
            List<BatteryInfo> x = new ArrayList<BatteryInfo>();
            x.add(new BatteryInfo());
            x.add(new BatteryInfo());
            x.add(new BatteryInfo());
            x.add(new BatteryInfo());


            lv.setAdapter(new CustomAdapter(context, x));
        }
    });
}