Why are my TextViews being moved around?

I am trying to display a single list item after the user clicks on an item. However, I have noticed that the layout is messed up when there is too much text. Sometimes it’s pushed half way, sometimes it’s completely to the right side of the screen. I don’t understand why this is happening. How can I resolve this issue? Please note I have the exact same layout in a popup dialog with no problems.

This is my XML code:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TableLayout
        android:id="@+id/add_spot_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="1" >

        <TableRow
            android:layout_marginBottom="1sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:id="@+id/nameDetails"
                android:layout_width="fill_parent"
                android:textSize="25sp"
                android:textStyle="bold" />
        </TableRow>

        <!-- separator -->

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray" />

        <TableRow
            android:layout_marginBottom="2sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/distance"
                 />

            <TextView android:id="@+id/distanceDetails" />
        </TableRow>

        <TableRow
            android:layout_marginBottom="2sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/address"
                 />

            <TextView android:id="@+id/addrDetails" />
        </TableRow>

        <TableRow
            android:layout_marginBottom="2sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/type"
               />

            <TextView android:id="@+id/typeDetails" />
        </TableRow>

        <TableRow
            android:layout_marginBottom="2sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/terrain" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <RatingBar
                    android:id="@+id/terrainDetails"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:isIndicator="true"
                    android:max="5"
                    android:numStars="5"
                    android:stepSize="1" />
            </RelativeLayout>
        </TableRow>

        <TableRow>

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/difficulty" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <RatingBar
                    android:id="@+id/difficultyDetails"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:isIndicator="true"
                    android:max="5"
                    android:numStars="5"
                    android:stepSize="0.1" />
            </RelativeLayout>
        </TableRow>

        <TableRow
            android:layout_marginBottom="2sp"
            android:layout_marginTop="2sp" >

            <TextView
                android:layout_marginLeft="5sp"
                android:text="@string/description" />

            <TextView
                android:id="@+id/descDetails"
                android:gravity="top"
                android:lines="2"
                android:maxLines="2"
                android:scrollHorizontally="false" />
        </TableRow>

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray" />
    </TableLayout>

</ScrollView>

Here are some screenshots to show you what I mean:

What it should be:

enter image description here

What it shouldn’t be:

Pushed to the right side of the screen

enter image description here

Too much text in description. Goes off the screen

enter image description here

Pushed only half way.

enter image description here

Answer

The size of a column in a TableLayout is given by its largest content.

The way you organized your layout, the title nameDetails is in the first column.
You’ll notice that, in the cases you don’t like, the second column is neatly aligned with the end of your title.

To solve this, either move the title out of the table layout, or use the android:layout_span attribute to span it on 2 columns

Leave a Reply

Your email address will not be published. Required fields are marked *