Develop Reference

Dynamic view height in constraint layout with chain style packed/spread

It has been quite some time since I used XML layout for Android. I am struggling with what seems to be very simple thing, yet I cannot find a quick solution.
I have a constraintLayout with an image, title, description and a button:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside"
android:text="#string/some_very_long_text"/>
<Button
android:id="#+id/button"
app:layout_constraintTop_toBottomOf="#id/description"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title"
android:layout_width="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:background="#color/black"
android:text="Button"
android:layout_height="36dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I want to achieve the following result when the description is short:
Description is aligned to bottom of the title and button aligned to bottom of the image
The following result when description is long:
the button is pushed down/aligned to bottom of the description
I tried to create a chain with either packed (and vertical bias) or spread-inside, however I am only able to achieve either result 1 or 2 and not both.
The idea to do it in XML only, not in Java/Kotlin code.

Since you specify that the button is 39dp in height, you can set a Space widget 39dp from the bottom of the description using a bottom margin. Now set a barrier with a direction = bottom to the Space widget and the description. Now the barrier will float between the bottom of the Space widget and the bottom of the description and will alight on whichever is lower.
Now you can set the top of the button to the bottom of the Barrier and the button will float. The XML is below.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover"
tools:text="Title" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="spread_inside" />
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="#id/image_cover"
app:layout_constraintStart_toStartOf="#id/title" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/barrier" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="description,space" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you don't explicitly know the height of the button, you can create an invisible clone of the button with the same constraints and use the invisible button for the barrier.
Here is another version that also works, but I am not sure why. It doesn't use a Space.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<ImageView
android:id="#+id/image_cover"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:text="Title"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/image_cover"
app:layout_constraintTop_toTopOf="#id/image_cover" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/some_very_long_text1"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="#id/title"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintVertical_bias="0.0"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_margin="0dp"
android:background="#color/black"
android:padding="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#id/barrier"
app:layout_constraintStart_toStartOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="image_cover,description" />
</androidx.constraintlayout.widget.ConstraintLayout>
Update: I was curious about the last layout above. Although it works, I wouldn't use it and I have come to the conclusion that it is a bug since the barrier is located below the button but should be immediately below either the description or the image cover. I am using "androidx.constraintlayout:constraintlayout:2.1.4".
More: I no longer think that this is a bug but a reasonable resolution to a, seemingly, impossible condition: The barrier is positioned to the bottom of the TextView and ImageView. The button's bottom is constrained to the barrier while the TextView's bottom is constrained to top of the button. If the barrier is positioned immediately below its referenced views then the wrap_content height of the TextView cannot be honored since the button will intrude into the TextView height (For the long text.)
What is pictured above could be a compromise. The barrier is still below its referenced views, although much farther below, and all constraints and layout sizes can be honored.
It's hard to tell if this is intentional or not or if it will continue to be the case going forward. I believe that the Space solution is the better solution.

Android Constraint Layout Barrier and Gone Margin

I have a constraint layout looks like this:
A-B
--------- (barrier that refer to A and B bottom)
C (constraint_top_bottomOf barrier)
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent"
tools:context=".TypographyActivity"
android:background="?attr/lightPrimary">
<TextView
android:id="#+id/textviewA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textviewB"
app:layout_constraintTop_toTopOf="parent"
android:text="Text A" />
<TextView
android:id="#+id/textviewB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/textviewA"
app:layout_constraintTop_toTopOf="parent"
android:text="Text B" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textviewA, textviewB" />
<TextView
android:id="#+id/textviewC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_goneMarginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier"
android:text="Text C" />
</androidx.constraintlayout.widget.ConstraintLayout>
goneMarginTop in textviewC always triggered even when A and B are visible.
Is there a way I can add goneMarginTop to textviewC, when A and B are gone without wrapping A and B to another layout?
Thank you.

Barriers do not show in layouts and, I believe, they are set to "gone" always. That is why you are seeing the gone margin on text view "C" - it is constrained to a "gone" widget.
If you want to use a gone margin, you will have to constraint text view "C" to a widget that is gone when text views "A" and "B" are both gone. One way to do this is to create a Space widget and constrain its top to the barrier. Then constrain the top of "C" to the Space widget. You will have to ensure that the Space widget is gone when both "A" and "B" are gone and visible when either "A" or "B" (or both) is visible.
The details will depend upon your needs, but the general layout will look something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light">
<TextView
android:id="#+id/textviewA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Text A"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#+id/textviewB"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textviewB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Text B"
android:visibility="visible"
app:layout_constraintStart_toEndOf="#id/textviewA"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textviewA, textviewB" />
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/barrier" />
<TextView
android:id="#+id/textviewC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Text C"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/space"
app:layout_goneMarginTop="30dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to give background color to Group in Constraintlayout

I have grouped 3 textview in a constraint layout. I have background to the group, but its not working.
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv" />
Is there anyway other round to do it.

According to the documentation, Group is only used for controlling the visibility of a set of widgets.
You can set the background to a View and constrain the view to how you desire the background to appear.
In the code sample below, after setting the background to the View with ID background, I constrained the top, left and right sides of the view to the parent and the bottom of the view to the last TextView in the group, which in this case is the TextView with ID textView3. I also added a 16dp bottom padding to textView3 so the background doesn't look weird. You could also use a Guideline for this.
Also note that the view background needs to be added before the group of views that need the background. If it's placed after the group of views, the background would be drawn over the group (and that's not what you want).
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#444444">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingBottom="16dp"
android:text="TextView 3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2"/>
</android.support.constraint.ConstraintLayout>
I hope this helps.

Though the group is only for visibility purpose but you can easily put a background to group.
Group view doesn't have any width and height, so wrap content wouldn't be visible on actual screen.
Provide constraints to Group view and set background attributes.
Eg:
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="0dp" //match constraint
android:layout_height="0dp" //match constraint
android:background="#color/text_color_3"
app:constraint_referenced_ids="price_tv,currency_unit_tv,frequency_tv"
app:layout_constraintBottom_toBottomOf="#+id/frequency_tv"
app:layout_constraintEnd_toEndOf="#+id/price_tv"
app:layout_constraintStart_toStartOf="#+id/price_tv"
app:layout_constraintTop_toTopOf="#+id/price_tv" />
//below are your TextViews aligned vertically
<TextView android:id="#+id/price_tv"/>
<TextView android:id="#+id/currency_unit_tv" .../>
<TextView android:id="#+id/frequency_tv" .../>
Hope it helps :)

Group is useful for the visibility purpose in ConstraintLayout. ConstraintLayout is introduced to remove the hierarchy of the multiple ViewGroups(Layouts).
We can simply use for the background purpose. If you simply have 3 TextView and want to apply the background color to the TextView don't add it to any ViewGroup(Layout), just check this:
<?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="match_parent"
android:background="#AAA">
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFF"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
tools:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/textView1"
app:layout_constraintStart_toStartOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
</android.support.constraint.ConstraintLayout>
Result:
You can find the source here

Group is only used for controlling the visibility of Referenced Ids in app:constraint_referenced_ids. According to the documentation. Solution is just put views in a Viewgroup. I had to put all the views in ConstraintLayout to constrol the visibility + benefits of chaining views in CL.
<android.support.constraint.ConstraintLayout
android:id="#+id/area_range_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
visibility = "View.VISIBLE"
>
<TextView
android:id="#+id/area_title_tv"
style="#style/filter_heading_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_AREA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/area_range_from"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:hint="#string/STR_MIN_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMin==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMin())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintEnd_toStartOf="#+id/textView254"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/area_title_tv" />
<EditText
android:id="#+id/area_range_to"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="#string/STR_MAX_AREA"
android:inputType="number"
android:maxLength="10"
android:text='#{searchQueryModel.areaMax==null ? "": StringUtils.getDelimeterString(String.valueOf(safeUnbox(searchQueryModel.getAreaMax())))}'
android:textAlignment="center"
android:textDirection="anyRtl"
android:textSize="14sp"
app:layout_constraintBaseline_toBaselineOf="#+id/textView254"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView254" />
<TextView
android:id="#+id/textView254"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/STR_TO"
android:textColor="#color/text_color_3"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBaseline_toBaselineOf="#+id/area_range_from"
app:layout_constraintEnd_toStartOf="#+id/area_range_to"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/area_range_from" />
<TextView
android:id="#+id/area_range_value_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text='#{`(` + areaUnit + `)`}'
android:textColor="#color/colorPrimary"
android:textSize="#dimen/text_size_normal"
app:layout_constraintBottom_toBottomOf="#+id/area_title_tv"
app:layout_constraintStart_toEndOf="#+id/area_title_tv"
app:layout_constraintTop_toTopOf="#+id/area_title_tv" />
</android.support.constraint.ConstraintLayout>

Use the new Layer that was introduced in ConstraintLayout 2

As per the official documentation, group is only used to control the visibility and you cannot change the background of the views of a particular group.
Documentation: This class controls the visibility of a set of referenced widgets. Widgets are referenced by being added to a comma separated list of ids.
To change it dynamically, use for all the three TextViews.
textView.setBackgroundColor(Color.RED);
or
textView..setBackgroundColor(Color.parseColor("#ffffff"));

ConstraintLayout Treats Multiple Horizontal Chains Differently

I am attempting to set up what I thought should be a simple layout with a ConstraintLayout I have a series of text entries, with labels whose size can change from language to language. There is a barrier to the right side of the labels so the text entries stay aligned even when the label lengths change.
I want the text entries to be a nominal size (200dp for the top one and 150dp for the others in this example) but to be able to shrink as needed to fit the screen if the labels are long and the screen is small. In landscape mode, or on a larger screen, the entries should be their max size and aligned left against the barrier.
After a lot of trial and error, I got the layout below to work, by setting two of the chains to "spread_inside" and the last one to "packed". Setting them all to spread_inside messes up the layout (entry_2 shrinks to its minimum size).
This smells like something that will stop working this way in a future ConstraintLayout update (this is using com.android.support.constraint:constraint-layout:1.1.0-beta5). The behavior of this layout is different using beta4 (also wrong, but differently wrong, beta4 aligns them all on the right side of the screen).
Am I missing something here? Does anyone else have similar chain patterns that have worked? Is there a better way of doing this?
<?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="match_parent"
android:padding="16dp"
tools:context="com.mypackage.testapp.MainActivity">
<TextView
android:text="Label 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"
android:id="#+id/label_1" />
<EditText
android:id="#+id/entry_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_1"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"/>
<TextView
android:text="Label 2 Is very very long"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_2"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"
android:id="#+id/label_2" />
<EditText
android:id="#+id/entry_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_2"
app:layout_constraintTop_toBottomOf="#+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_2"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_2"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"/>
<TextView
android:text="Label Three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_3"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"
android:id="#+id/label_3" />
<EditText
android:id="#+id/entry_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:inputType="text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_weight="100.0"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toLeftOf="#+id/space_3"
app:layout_constraintTop_toBottomOf="#+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<Space
android:id="#+id/space_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/entry_3"
app:layout_constraintHorizontal_weight="0.01"
app:layout_constraintTop_toTopOf="#+id/entry_3"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"/>
<android.support.constraint.Barrier
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />
</android.support.constraint.ConstraintLayout>
Edit:
I reported this issue to the ConstraintLayout team at Google and they confirmed that it is a bug. Once fixed, I should be able to do this without the complicated chains.

The Android dev team confirmed this is a bug, and it has been fixed in the beta6 release. The layout now works without the need for any chains or spaces (the solution below is what they suggested in the ticket).
https://issuetracker.google.com/issues/74469361
<TextView
android:id="#+id/label_1"
android:tag="48,103,136,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 1"
app:layout_constraintBottom_toBottomOf="#+id/entry_1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_1" />
<EditText
android:id="#+id/entry_1"
android:tag="505,63,512,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="200sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="#+id/label_2"
android:tag="48,254,442,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label 2 Is very very long"
app:layout_constraintBottom_toBottomOf="#+id/entry_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_2" />
<EditText
android:id="#+id/entry_2"
android:tag="505,214,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/entry_1"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<TextView
android:id="#+id/label_3"
android:tag="48,405,218,57"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label Three"
app:layout_constraintBottom_toBottomOf="#+id/entry_3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/entry_3" />
<EditText
android:id="#+id/entry_3"
android:tag="505,365,450,136"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginStart="8dp"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/entry_2"
app:layout_constraintWidth_max="150sp"
app:layout_constraintWidth_min="100sp" />
<android.support.constraint.Barrier
android:id="#+id/guideline"
android:tag="490,48,0,0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:barrierDirection="right"
app:constraint_referenced_ids="label_1,label_2,label_3" />

My guess would be the fact that you're not really setting up a chain.
https://developer.android.com/training/constraint-layout/index.html
A chain works properly only if each end of the chain is constrained to another object on the same axis
For a proper chain, your labels would need to be part of it as well. You can probably just ditch the chain attributes and constrain the edit texts to the barrier and the parent rights.
Hope that helps.

Try it with Relative Layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent"
android:padding="16dp">
<TextView
android:id="#+id/label_1"
android:text="Label 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
<EditText
android:id="#+id/entry_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_1"
android:layout_toEndOf="#+id/label_1"
android:maxLength="20"
android:textSize="20sp"
android:inputType="text" />
<TextView
android:id="#+id/label_2"
android:text="Label 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:layout_below="#+id/label_1"/>
<EditText
android:id="#+id/entry_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_2"
android:layout_toEndOf="#+id/label_2"
android:maxLength="20"
android:textSize="20sp"
android:inputType="text" />
<TextView
android:id="#+id/label_3"
android:text="Label 3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textSize="20sp"
android:layout_below="#+id/label_2"/>
<MultiAutoCompleteTextView
android:id="#+id/entry_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_alignBaseline="#+id/label_3"
android:layout_toEndOf="#+id/label_3"
android:maxLength="200"
android:textSize="20sp"/>
</RelativeLayout>
Edit: This should be your basic structure for form, provided if ConstraintLayout is not the only option.
Just use Relative Layout, Table Layout is not necessary here
Set value for android:maxLength
For including more text-characters use MultiAutoCompleteTextView

Why is my android constraintLayout losing its bottom row of textviews?

I am trying to use this layout as a header in a listview but the bottom row of textviews below the inner constraintlayout is not visible - it's like its height has collapsed to zero.
In the xml the inner constraintlayout declaration has a red line under it with a popup message "This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint..." (jump to the LEFT? does that even make sense?) and I have tried to add vertical constraints like
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
but what happens is the whole layout loses its height.
I also find it very confusing when the design editor changes my xml without asking or warning me. It seems to like to set layout_width and height elements to "0dp" alot and also setting the guidelines width and height to
android:layout_width="wrap_content"
android:layout_height="wrap_content".
Back when the only elements were the bottom row of textviews I did not set layout_width and layout_height as the constraints seemed to do the work. But now that I have added the top part "leaderinfo", the designer has added them as "0dp". I know I can reset them to be "wrap_content" and then the textviews will reappear but why should that be necessary - doesn't the designer set them to "0dp" for a good reason?
Thanks for any help !
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/listheaderbg"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/leaderinfo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/subsection1background"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_profilepic"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="2dp"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_username"
tools:text="#string/username"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toTopOf="#+id/iv_profilepic"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_firstname"
tools:text="#string/first_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_username"
tools:layout_editor_absoluteX="150dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_lastname"
tools:text="#string/last_name"
android:paddingStart="10dp"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_profilepic"
app:layout_constraintTop_toBottomOf="#+id/tv_firstname"
tools:layout_editor_absoluteX="150dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:elevation="0dp"
app:elevation="0dp"
app:fabSize="mini"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toStartOf="#+id/guideline04"
app:srcCompat="#android:drawable/ic_input_add"
app:layout_constraintTop_toTopOf="parent"
android:tint="#FFFFFF"
app:backgroundTint="#color/submitbuttoncolor_hotpink"
tools:layout_editor_absoluteX="351dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_weight"
android:src="#drawable/ic_scale"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/iv_profilepic"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_weight"
tools:text="#string/_225"
android:padding="5dp"
app:layout_constraintStart_toEndOf="#+id/iv_weight"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
app:layout_constraintBottom_toBottomOf="#+id/iv_weight"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline02"
android:id="#+id/iv_height"
android:src="#drawable/ic_height"
app:layout_constraintTop_toTopOf="#+id/iv_weight"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_height"
tools:text="#string/_0_0"
app:layout_constraintStart_toEndOf="#+id/iv_height"
app:layout_constraintTop_toTopOf="#+id/iv_height"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_height"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline01"
android:id="#+id/iv_age"
android:src="#drawable/ic_age"
app:layout_constraintTop_toBottomOf="#+id/tv_weight"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_age"
tools:text="23"
app:layout_constraintStart_toEndOf="#+id/iv_age"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_age"
tools:layout_editor_absoluteX="62dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline02"
android:id="#+id/iv_country"
android:src="#drawable/ic_flag"
app:layout_constraintTop_toTopOf="#+id/iv_age"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="206dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_country"
tools:text="CA"
app:layout_constraintStart_toEndOf="#+id/iv_country"
app:layout_constraintTop_toTopOf="#+id/iv_country"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_country"
tools:layout_editor_absoluteX="248dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/iv_followers"
android:src="#drawable/ic_followers"
app:layout_constraintStart_toStartOf="#+id/guideline01"
app:layout_constraintTop_toBottomOf="#+id/tv_age"
android:layout_marginTop="10dp"
android:tint="#color/tealicon"
tools:layout_editor_absoluteX="21dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/MyTextView.thin"
android:id="#+id/tv_followers"
tools:text="223"
app:layout_constraintStart_toEndOf="#+id/iv_followers"
app:layout_constraintTop_toTopOf="#+id/iv_followers"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="#+id/iv_followers"
tools:layout_editor_absoluteX="62dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline01"
app:layout_constraintGuide_percent="0.05"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="21dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline02"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="206dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline03"
app:layout_constraintGuide_percent="0.69"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="284dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline04"
app:layout_constraintGuide_percent="0.95"
android:orientation="vertical"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="391dp" />
</android.support.constraint.ConstraintLayout>
<TextView
android:id="#+id/text1"
style="#style/MyTextView"
android:gravity="center"
android:text="#string/exercise"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline1"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
android:gravity="center"
android:text="#string/rm1"
android:id="#+id/text2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="213dp" />
<TextView
style="#style/MyTextView"
app:layout_constraintStart_toEndOf="#+id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
android:gravity="center"
android:text="#string/rm1bw"
android:id="#+id/text3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:layout_marginBottom="2dp"
android:layout_marginTop="2dp"
android:background="#color/listheaderbg"
android:layout_height="0dp"
android:layout_width="0dp"
tools:layout_editor_absoluteX="310dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
android:id="#+id/iv_rank"
android:src="#drawable/ic_rank"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/leaderinfo"
android:visibility="gone"
android:background="#color/listheaderbg"
tools:layout_editor_absoluteX="376dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
app:layout_constraintGuide_percent="0.44"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="181dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline2"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.71"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="292dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline3"
app:layout_constraintGuide_percent="0.83"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="341dp" />

For the first issue about the inner layout needing a vertical constraint, you just need to constrain the top like this:
app:layout_constraintTop_toTopOf="parent"
The bottom does not need a constraint since the height is wrap_content.
Concerning the bottom text views, you have the outer constraint layout as wrap_content, so if the text views also have a height of wrap_content, then the layout can determine the appropriate size of the outer container which is the height of the inner constraint layout + the height of the text views.
But if the text views are set to 0dp which means to match the constraints, then there is a dependency that cannot be resolved. In other words, the size of the height of the text views depend upon the size of the outer constraint layout (match constraints) but the size of the outer constraint layout depends on the size of its contents which include the height of the text views but that can't be determined without knowing the size of its container. It can't be both, so the designer is trying to help you out of this dilemma by making the changes that you mention.
The bottom line is to constrain just the top of the inner layout and to specify a height size for the text views. If you make those changes, then it should work.