CODEWITHSUNDEEP
android-layoutandroid-tablelayout
Hong
Hong

Reputation: 18511

Why TableLayout components set to the same column do not align?

I am quite sure that I am missing something fundamental about TableLayout, but I am unable to figure out it after doing quite some search and reading. Here is the code:

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TableRow>
        <Button android:layout_column="0" android:text="00" android:visibility="gone"/>
        <Button android:layout_column="1" android:text="01"/>
    </TableRow>
    <TableRow>
        <Button android:layout_column="0"  android:text="10"/>
        <Button android:layout_column="1" android:text="11"/>
    </TableRow>
</TableLayout>

Here is the result:

enter image description here

I expected button "01" would be aligned with button "11" because both of them are set to column 1. Could anyone point out what I am mising?

[Edit] If the visibility value "gone" of "00" is an issue, why does removing it would make it work as following:

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TableRow>
        <Button
            android:layout_column="1"
            android:text="01" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:text="10" />

        <Button
            android:layout_column="1"
            android:text="11" />
    </TableRow>
</TableLayout>

Result:

enter image description here

Upvotes: 0

Views: 30

Answers (1)

Jay Rathod
Jay Rathod

Reputation: 11245

It's because you set visibility GONE for Button with value 00 so that's why it isn't taking space in layout.

Here you can find use of both.

View.GONE This view is invisible, and it doesn't take any space for layout purposes.

View.INVISIBLE This view is invisible, but it still takes up space for layout purposes.

So just by changing visibility to invisible for Button with value 00 will work as intended.

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TableRow>

        <Button
            android:layout_column="0"
            android:text="00"
            android:visibility="invisible" />

        <Button
            android:layout_column="1"
            android:text="01" />
    </TableRow>

    <TableRow>

        <Button
            android:layout_column="0"
            android:text="10" />

        <Button
            android:layout_column="1"
            android:text="11" />
    </TableRow>
</TableLayout>

Hope this will help you.

Upvotes: 1

Related Questions