Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to correct ConstraintLayout TextView overlapping when more than two lines

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: Layout of activity with the three text views as desired

However if I remove the text "Not Overlapping." I get: Layout of activity with the third text view overlapping the second.

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: Image showing if the first TextView was not there that the text would wrap perfectly.

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.

like image 776
MungoRae Avatar asked Nov 23 '17 21:11

MungoRae


People also ask

What is constraintlayout in Android for textview?

Android’s ConstraintLayout is a layout that allows us to order the views in a xml without having to nest them. In the case of the TextView, I found an issue when we want to align it to the left or to the right and we don’t know the length of the text. What happens if, for example, we have this kind of TextView with a ConstraintLayout as parent?

What is a constraint layout?

Constraint Layout is a ViewGroup (i.e. a view that holds other views) which allows you to create large and complex layouts with a flat view hierarchy, and also allows you to position and size widgets in a very flexible way.

What is the difference between constraintlayout and relativelayout?

How ConstraintLayout differs from RelativeLayout? In Constraint Layout, we have to add constraints to the view on all four sides whereas in Relative Layout we can simply align our UI component relative to its ID using the ids of UI components.

How do you define the position of a view in constraintlayout?

Important Note: To define a view’s position in ConstraintLayout, you must add at least one horizontal and one vertical constraint to the view. Each constraint defines the view’s position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.


2 Answers

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.

like image 189
MungoRae Avatar answered Sep 16 '22 14:09

MungoRae


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" />
like image 25
Nongthonbam Tonthoi Avatar answered Sep 18 '22 14:09

Nongthonbam Tonthoi