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

Candida

Does it also look like that on an actual device? – Amy

Answer 1

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.

Frederique

Sorry, the Table code was removed. I do have a TableLayout defined, with orientation set to vertical and fill_parent for both the layout_width and layout_height. Any ideas? – Candida

My ideas are above. If you do not do something to tell the AutoCompleteTextView to stay within the screen limits, it will not stay within the screen limits. One way to do that is with the RelativeLayout as I described above. – Frederique

Nevermind, this helped a lot! Appears to have worked :) Thanks!! – Candida

Answer 2

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>

Supernatant