layout_span in TableLayout in Android

Question

I would like to create a login screen for an android application. I'm using TableLayout to get the correct alignment. So two rows consist of a TextView and an EditText and I would like to add a Button below them that width is stretched to the screen. So I put the Button in another TableRow and I added layout_span="2" for the Button, but the Button is displayed in the first column.

I think this should be correct, but I must do something wrong in the xml file. Do you have an idea what is wrong?

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".LoginActivity"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingRight="15dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/evUsername" />
        <EditText
            android:id="@+id/username"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:inputType="text" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingRight="15dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="@string/evPassword" />
        <EditText
            android:id="@+id/password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:inputType="textPassword" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="@string/btnLogin" />
    </TableRow>
</TableLayout>

Thanks in advance!

Answer 1

At the end I wrapped my TableLayout in a LinearLayout and I added the Button after the TableLayout.

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".LoginActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:paddingRight="15dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="@string/evUsername" />
            <EditText
                android:id="@+id/username"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:inputType="text" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:paddingRight="15dp"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="@string/evPassword" />
            <EditText
                android:id="@+id/password"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:inputType="textPassword" />
        </TableRow>
    </TableLayout>
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btnLogin" />
</LinearLayout>

Answer 2

In your original xml file, you can simply add

android:layout_weight="1"

in your button