Android - UI Elements going off screen

Question

I'm having trouble positioning the layout elements. The AutoComplete in my TableLayout and the button after it are expanding the TableRow larger than the width of the screen. Anyone have an idea why? Below is my XML code as well as a picture of the problem.

Thanks in advance!!

<?xml version="1.0" encoding="utf-8"?>

<TableRow android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <AutoCompleteTextView android:id="@+id/installation"
        android:textSize="14sp" android:completionThreshold="3" />
</TableRow>
<TableRow android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <Button android:id="@+id/btn_find" android:text="@string/btn_find"></Button>
</TableRow>
<TableRow android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <TextView android:id="@+id/error" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:paddingTop="20px"
        android:textColor="#FF0000" />
</TableRow>

Picture of UI

Answer 1

For the ones that do need the table layout, use the layout_weight option. See code below.

        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="6sp" android:id="@+id/detailsLayout">
            <TableRow
                android:layout_width="wrap_content"
                android:id="@+id/TableRow03"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/TextView06"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:text="Detail 1"></TextView>
                <TextView
                    android:text="@string/empty_value"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:id="@+id/sessionAudience"
                    android:layout_weight="1"></TextView>
            </TableRow>
         </TableLayout>

Answer 2

By default, widgets in a TableRow have android:layout_width="wrap_content". That does not limit you to the size of the screen -- wrap_content means "wrap content", not "wrap content but please don't go off the edge of the screen, if you don't mind".

In this case, you do not need to use a TableLayout and set of TableRows, since you do not have a table.

So, one approach is to use a RelativeLayout and have your AutoCompleteTextView use android:layout_alignParentLeft="true" and android:layout_alignParentRight="true". That will pin it to the outer edges of the RelativeLayout, which you can size with android:layout_width=fill_parent to fill the screen.