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.
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?
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.
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.
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.
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.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With