Android TableLayout not behaving like a table

Question

Given this layout XML snippet:

    <TableLayout
        android:id="@+id/review_ltpv_table"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:stretchColumns="*">

        <!-- TODO: This row's cells don't line up with the rows below. Fix. -->
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/review_text_view_look"
                android:text="@string/review_look"
                android:textAppearance="@style/TextBody" />

            <TextView
                android:id="@+id/review_text_view_taste"
                android:text="@string/review_taste"
                android:textAppearance="@style/TextBody" />

            <TextView
                android:id="@+id/review_text_view_portion"
                android:text="@string/review_portion"
                android:textAppearance="@style/TextBody" />

            <TextView
                android:id="@+id/review_text_view_value"
                android:text="@string/review_value"
                android:textAppearance="@style/TextBody" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp" >

            <ToggleButton
                android:id="@+id/review_look_positive"
                style="@style/ButtonPositive"
                android:onClick="onLookPositive"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_taste_positive"
                style="@style/ButtonPositive"
                android:onClick="onTastePositive"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_portion_positive"
                style="@style/ButtonPositive"
                android:onClick="onPortionPositive"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_value_positive"
                style="@style/ButtonPositive"
                android:onClick="onValuePositive"
                android:textOn="@null"
                android:textOff="@null" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="0dp" >

            <ToggleButton
                android:id="@+id/review_look_negative"
                style="@style/ButtonNegative"
                android:onClick="onLookNegative"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_taste_negative"
                style="@style/ButtonNegative"
                android:onClick="onTasteNegative"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_portion_negative"
                style="@style/ButtonNegative"
                android:onClick="onPortionNegative"
                android:textOn="@null"
                android:textOff="@null" />

            <ToggleButton
                android:id="@+id/review_value_negative"
                style="@style/ButtonNegative"
                android:onClick="onValueNegative"
                android:textOn="@null"
                android:textOff="@null" />
        </TableRow>

    </TableLayout>

I see this:

Why do the vertical borders between the cells in the top row not line up with those in the rows below? This is not a table!

If I remove android:stretchColumns="*" from the layout tag it looks even worse - the cells in the top row just bunch up on the left.

If I add android:layout_weight="1" to the TextViews it makes no difference.

This is API level 22.

Aznhar · Answer 1 · 2017-07-05T12:49:00.153

0

I think you do not use the "weight" correctly, I would suggest to try to change your first row to :

    <TableRow
        android:weightSum="4">

        <TextView
            android:id="@+id/review_text_view_look"
            android:text="@string/review_look"
            android:layout_weight="1"
            android:textAppearance="@style/TextBody" />

        <TextView
            android:id="@+id/review_text_view_taste"
            android:text="@string/review_taste"
            android:layout_weight="1"
            android:textAppearance="@style/TextBody" />

        <TextView
            android:id="@+id/review_text_view_portion"
            android:text="@string/review_portion"
            android:layout_weight="1"
            android:textAppearance="@style/TextBody" />

        <TextView
            android:id="@+id/review_text_view_value"
            android:text="@string/review_value"
            android:layout_weight="1"
            android:textAppearance="@style/TextBody" />
    </TableRow>

So every cells have the same weight and will be of the same size

edited Jul 05 '17 at 12:49

answered Jul 05 '17 at 12:16

Aznhar

610
1
10
30

Does't make a scrap of difference, sorry. If this worked, it would also beg the question: what's the point of a TableLayout if it needs to be told all these weights? – Eliot Jul 05 '17 at 12:41
try to remove all the layout_width and layout_height from every TableRow, I think those attributes changes the TableLayout behaviour – Aznhar Jul 05 '17 at 12:48
No luck, sorry. – Eliot Jul 05 '17 at 12:51
have you tried this : https://stackoverflow.com/questions/12889979/right-align-column-in-android-table-layout – Aznhar Jul 05 '17 at 12:58
Yes, no difference. – Eliot Jul 05 '17 at 14:47

Android TableLayout not behaving like a table

1 Answers1