How to correct ConstraintLayout TextView overlapping when more than two lines

Question

I am having a problem with constraint layout where the text in one text view reaching the second line will not push down another text view that is constrained to be below it, until the middle of the line.

I have built a simple layout with three text views. The first text view sits on the left and has a set width. The second one sits to the right of this, between it and its parent. The third sits below the second and to the left of the first.

I want it to look like:

However if I remove the text "Not Overlapping." I get:

The point at which it changes (The "O" in "Not Overlapping")appears to be when the length of the text fills two lines when the first Text View is not there:

So how do I change this layout so that even when I have a text view on the left side of the screen it will push Text View 3 down as soon as it reaches two lines? As opposed to pushing it down half way through the second line.

My XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.testapp.myapplication.MainActivity">

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="120dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="Text View 1"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text_view_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#22AA99"
        android:text="Text View 2 Showing problem with overlap. Overlapping. Not O"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintLeft_toRightOf="@id/text_view_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text_view_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF00FF"
        android:text="Text View 3"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/text_view_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text_view_2" />

</android.support.constraint.ConstraintLayout>

Thanks.

Your width of `text_view_1` is only 1 dp? Can you even see the text? — Nongthonbam Tonthoi, Nov 23 '17 at 22:08

score 46 · Accepted Answer · answered Jan 29 '18 at 09:51

46

I have since found

app:layout_constrainedHeight="true"

from constraint layout 1.1.0-beta2 which enforce constraints on wrap_content. I therefore feel this is the correct solution as this also allows me to set the app:layout_constraintBottom_toBottomOf="parent" which enables a margin at the bottom of the view.

answered Jan 29 '18 at 09:51

MungoRae

1,912
1
16
25

12

and for horizental overlapping we use this `app:layout_constrainedWidth="true"` – tamtom Jul 19 '18 at 09:13
You have saved my life... (okay, I might be exagerating, but you still saved me from a nice headache) – Manuel Mariano Silva Jan 25 '21 at 20:24
1

MungoRae & @tamtom you answers really helped me. Thanks a lot. – King Of The Jungle Jul 13 '21 at 12:57

score 4 · Answer 2 · answered Nov 23 '17 at 22:15

Remove this line:

app:layout_constraintBottom_toBottomOf="parent"

from your TextView with id text_view_3 like:

<TextView
    android:id="@+id/text_view_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FF00FF"
    android:text="Text View 3"
    android:textAppearance="@style/TextAppearance.AppCompat.Body2"
    app:layout_constraintLeft_toRightOf="@id/text_view_1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/text_view_2" />

Yeh that fixes it. Do you know why? I guess it must be because the overall parent is set to wrap_content so pinning it to the bottom is confusing for it. Thanks though. :) — MungoRae, Nov 24 '17 at 09:14

How to correct ConstraintLayout TextView overlapping when more than two lines

2 Answers2

Linked