Android - Move textView if it doesn't fit

Question

I have 3 TextViews inside a linearLayout (horizontal), and when the last textview is too big or there is no space for it, it is matching parent and looking like the image below:

Image Here

What I want is to, IF the textview reaches the linearlayout's width, then, the textview should be moved below "Property" textView. (next line)

Take a look at how it should be:

Image here

That's a snippet of my XML:

  <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearance"
                    android:text="Property"
                    android:id="@+id/txtPropertyType" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearance"
                    android:text="/ 127 m"
                    android:id="@+id/txtArea"
                    android:layout_marginLeft="10dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearance"
                    android:text="/ 3 roomsssssssssdddd"
                    android:singleLine="false"
                    android:id="@+id/txtNumRoom"
                    android:layout_marginLeft="5dp" />
            </LinearLayout>

Thanks in advance x)

score 0 · Answer 1 · answered Jun 27 '16 at 15:00

0

Just add android:singleLine="true" on each text view. Your problem here is that your TextView is spreading on more than one line.

answered Jun 27 '16 at 15:00

Evgeni Roitburg

1,958
21
33

if I set singleLine as true, it will always ellipsize when it does not fit.. and I dont want that. – Daniel Gomes Jun 27 '16 at 15:09

score 0 · Accepted Answer · edited May 23 '17 at 11:53

Modify your xml and add another TextView below the LinearLayout:

        <LinearLayout

            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="5dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearance"
                android:text="Property"
                android:id="@+id/txtPropertyType" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearance"
                android:text="/ 127 m"
                android:id="@+id/txtArea"
                android:layout_marginLeft="10dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearance"
                android:text="/ 3 roomsssssssssdddd"
                android:singleLine="false"
                android:id="@+id/txtNumRoom"
                android:layout_marginLeft="5dp" />
        </LinearLayout>

        <TextView
            android:visibility="gone"
            android:layout_below="@+id/linearLayout"
            android:id="@+id/long_room"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="dfgdfdfgddfgdfgdd"/>

Now, you have 2 options:

OPTION 1: Check the length of the room number textview. If it's more than, say, 12 (you have to find the number considering all letters to be widest ones - like w), then make the visibility of txtNumRoom GONE and that of long_room visible.

OPTION 2: Find the height of the txtNumRoom before it gets rendered and displayed. If this height is greater than height of txtArea, that means the textview has gone multiple-lines. Again, in that case,make the visibility of txtNumRoom GONE and that of long_room visible. Refer to this question to know how to find height of a textview programmatically before it gets rendered.

it worked! I needed to do an adapter.notifyDataSetChanged(); in my listView, but it worked :D Thanks a lot! — Daniel Gomes, Jun 28 '16 at 14:52

score 0 · Answer 3 · answered Oct 10 '21 at 06:29

Since August 2020, there is the option to use a ConstraintLayout with the virtual layout Flow.

Your elements should be wrapped in a ConstraintLayout together with a Flow element like in the following sample XML:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearance"
        android:text="Property"
        android:id="@+id/txtPropertyType"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearance"
        android:text="/ 127 m"
        android:id="@+id/txtArea"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearance"
        android:text="/ 3 roomssssssssssssssssssssss"
        android:singleLine="false"
        android:id="@+id/txtNumRoom"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:constraint_referenced_ids="txtPropertyType, txtArea, txtNumRoom"
        app:flow_horizontalGap="4dp"
        app:flow_horizontalStyle="packed"
        app:flow_horizontalBias="0.0"
        app:flow_wrapMode="chain"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/flow"
        app:layout_constraintStart_toStartOf="parent"
        android:textAppearance="?android:attr/textAppearance"
        android:text="$2000.000"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The elements that are involved in the wrapping (all elements in the line that must wrap if too big) must have ids which are then added in the app:constraint_referenced_ids tag of Flow.

app:flow_horizontalStyle="packed" and app:flow_horizontalBias="0.0" are necessary to left-align your text (flow_horizontalBias won't work unless elements are packed), but can be changed depending on the layout you want to achieve.

app:flow_wrapMode tells the flow-layout how to position elements, and must be set to either chain or aligned, once again chain was necessary to be able to left-align the text.

It is also important to set the height of the Flow element to 0dp so it can determine how much space it needs by itself.

The TextView below should be constrained to the Flow element so that it can be positioned dynamically depending on the position of the elements inside.

Screenshot of the layout with small text

Screenshot of the layout with overflowing text

Android - Move textView if it doesn't fit

3 Answers3