Develop Reference

ConstraintLayout view with width of 0dp disappears

I am trying to learn constraint layout by converting a list item from a linear + relative layout. I have a checkbox and 3 text views arranged in a line followed by a recyclerview underneath.
Phone preview:
Tablet preview:
Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_qty"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintStart_toEndOf="#+id/checkBox"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="parent"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/line_item_name"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see the preview renders fine but when I run the code, the name of the item is gone (it's width needs to be 0dp, if it's wrap_content then on phones it just previews as one line of text and overlaps the qty and price text views).
Image from device (tablet):
Is it because I am aligning baselines to the name and the name itself has no bottom constraint?

Add app:layout_constraintStart_toEndOf="line_item_name" to your line_item_price, so your price will be always come after your item name
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintBaseline_toBaselineOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="line_item_name" //Add this
tools:text="€4.50" />

It's good that you are learning new things and trying to implement them.
Below is the code that will give you your desired output.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/line_item_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="8dp"
app:layout_constraintTop_toTopOf="#+id/checkBox"
app:layout_constraintBottom_toBottomOf="#+id/checkBox"
app:layout_constraintStart_toEndOf="#+id/checkBox"
android:textAppearance="?attr/textAppearanceBody2"
android:textStyle="bold"
tools:text="5 x" />
<TextView
android:id="#+id/line_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody2"
app:layout_constraintEnd_toStartOf="#+id/line_item_price"
app:layout_constraintStart_toEndOf="#+id/line_item_qty"
app:layout_constraintTop_toTopOf="#+id/line_item_qty"
app:layout_constraintBottom_toBottomOf="#+id/line_item_qty"
tools:text="Club sandwich with ranch dressing and extra mustard" />
<TextView
android:id="#+id/line_item_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?attr/textAppearanceBody1"
app:layout_constraintTop_toTopOf="#+id/line_item_name"
app:layout_constraintBottom_toBottomOf="#+id/line_item_name"
app:layout_constraintEnd_toEndOf="parent"
tools:text="€4.50" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/item_mods_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/checkBox"
tools:itemCount="3"
tools:listitem="#layout/item_line_modifier"
tools:orientation="vertical" />
</androidx.constraintlayout.widget.ConstraintLayout>
Do let me know if you have any queries on this.
Output :

What is the difference between Start and Left in ConstraintLayout?

I know that Start = Left and End = Rignt in ConstraintLayout.
However, apart from this, what appears on the preview screen was slightly different.
When constraint is used as layout_constraintLeft_toLeftOf="parent" (and Right)
When constraint is used as layout_constraintStart_toStartOf="parent" (and End)
As you can see the difference in the image, when Left and Right are used, they are not completely attached to the parent, but are slightly apart.
But Start and End are attached to parent.
Up until this point, I thought they were the same thing.
What is the difference between the two?
Currently, what I want to do is to attach only the first LinearLayout to the left in the first image. (Leave the positions of the second and third LinearLayout fixed)
XML
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginVertical="8dp">
<LinearLayout
android:id="#+id/ll_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#id/ll_weight"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="16dp" />
<TextView
android:id="#+id/unit_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="set"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_weight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/ll_set"
app:layout_constraintRight_toLeftOf="#id/ll_rep">
<EditText
android:id="#+id/weight"
android:layout_width="53dp"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:maxLength="5"
android:textSize="16dp" />
<TextView
android:id="#+id/unit_kg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="lb"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_rep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/ll_weight"
app:layout_constraintRight_toRightOf="parent">
<EditText
android:id="#+id/rep"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:maxLength="5"
android:textSize="16dp" />
<TextView
android:id="#+id/unit_rep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rep"
android:textSize="16dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Your problem is you are using app:layout_constraintLeft_toLeftOf and app:layout_constraintRight_toLeftOf. If you want to change it you should change both of them to layout_constraintStart_toStartOf and layout_constraintEnd_toStartOf.
You should use one of these combinations(left and right) or (start and end).
You should not use app:layout_constraintStart_toStartOf with app:layout_constraintRight_toLeftOf
Also, when you have to support RTL languages such as Arabic, the start!=left and end!=right

ConstraintLayout set constraint priorities?

I'm trying to implememnt the following layout in Android using ConstraintLayout.
However, the two username TextViews need to expand until they reach the max width, which depends on each phone's screen.
The first username should be visible, as much as possible, it should have an 8dp margin and then the "reply arrow" which has a fixed width, and then, if it fits, as much of the "reply to username" TextView should be visible.
The dot separator, date and likes TexViews should awlays be visible, at wrap_content.
In iOS we have managed to implement such a layout by using content hugging and content compression resistance priorities. Are there similar features in Android?
Here's my XML layout for reference:
<?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:id="#+id/newspaperLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:id="#+id/commentDepthView"
android:layout_width="2dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/default_margin"
android:background="#color/blueDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/commentAuthorTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/blue"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/commentTextView"
app:layout_constraintEnd_toStartOf="#id/replyToArrowImageView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#+id/commentDepthView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Username"/>
<ImageView
android:id="#+id/replyToArrowImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#id/commentReplyToTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/commentAuthorTextView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"
app:srcCompat="#drawable/reply_to_arrow"/>
<TextView
android:id="#+id/commentReplyToTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:ellipsize="end"
android:lines="1"
android:textColor="#color/blue"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#+id/dotSeparatorTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/replyToArrowImageView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"
tools:text="Reply To Username"
/>
<TextView
android:id="#+id/dotSeparatorTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/dot_separator"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#+id/commentDateTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/commentReplyToTextView"
app:layout_constraintTop_toTopOf="#id/commentAuthorTextView"/>
<TextView
android:id="#+id/commentDateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toStartOf="#id/commentLikesTextView"
app:layout_constraintStart_toEndOf="#id/dotSeparatorTextView"
app:layout_constraintTop_toTopOf="#+id/commentAuthorTextView"
tools:text="1/1/1970"/>
<TextView
android:id="#+id/commentLikesTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintBottom_toBottomOf="#+id/commentAuthorTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDateTextView"
app:layout_constraintTop_toTopOf="#+id/commentAuthorTextView"
tools:text="0 Likes"/>
<TextView
android:id="#+id/commentTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDepthView"
app:layout_constraintTop_toBottomOf="#+id/commentAuthorTextView"
tools:text="This is test comment that is really relly long. Well not that long, but it's long enough, don't you think?"/>
<View
android:id="#+id/separatorView"
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginStart="#dimen/default_margin"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginEnd="#dimen/default_margin"
android:background="#color/grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/commentDepthView"
app:layout_constraintTop_toBottomOf="#+id/commentTextView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Any suggestion is welcome, even using a different layout than ConstraintLayout. Thank you very much.

Give first username
android:layout_width="0dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_default="wrap"
and to second
android:layout_width="0dp"
rest is wrap_content and chain them

ConstraintLayout, when constraint dependent view is gone, the layout view behave weirdly

I'm using ConstraintLayout where I will show as below
I would like to hide First (using gone), and which the view I expect to be as below (where ElasticBody will stretch over to use up the original First view space as well.
However, when I actual set First to gone, my view turn out to be as below (all image as from Android Studio Design view). My Elastic Body is missing as well, and the height expanded weirdly.
My layout code as below
<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="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:visibility="gone"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintStart_toEndOf="#+id/txt_first"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
(Note, if you remove the gone, you'll get the first image view).
Why is this so? How could I fix it where when my First is gone, I could the Elastic Body stretch out correctly?
p/s: I know how to do it in LinearLayout and RelativeLayout... but wonder if this is a limitation on ConstraintLayout?

Try following.
Set the first view's left and top constraints to "parent". After that:
set the txt_body textview width to "0dp"
set the left constraint to the first view's right side
set the right constraint to the tail view's left side.
So, whenever you set the first view's visibility to "gone", the body view will be stretched like how you want it.
<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="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/txt_body"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:background="#f0f"
android:layout_height="wrap_content"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintRight_toLeftOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/txt_first"
/>
<TextView
android:id="#+id/txt_tail"
android:background="#ff0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Update
If you want to do using barrier then also you can do it.
<androidx.constraintlayout.widget.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="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/txt_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#0ff"
android:text="First"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintEnd_toStartOf="#+id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#f0f"
android:text="Elastic Body"
android:textSize="26sp"
app:layout_constraintStart_toEndOf="#+id/barrier"
app:layout_constraintEnd_toStartOf="#+id/txt_tail"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt_tail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="Tail"
android:textSize="26sp"
app:layout_constraintEnd_toEndOf="parent"
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="start"
app:constraint_referenced_ids="txt_body,txt_first" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="txt_body,txt_tail" />
</androidx.constraintlayout.widget.ConstraintLayout>

Say, you want to have a picture like this:
Here you have indents between the title and "Nice work", between "Nice work" and time, also horizontal indent to "Opinions". They are centered vertically.
"Opinions" is attached to the star, so that can be multilined and stay centered. I show results for 2 variants: in the first row opinions are multilined, while in the next row it is a single line. In columns you can see 4 variants of showing/hiding 2 labels.
A more simple and preferrable way is to wrap both labels into LinearLayout and insert it into parent ConstraintLayout. Then you can set vertical gravity, show or hide labels, hide the LinearLayout itself.
If you don't want to have nested layouts, use Barriers and Groups. It is a difficult task that can waste many hours. A key is having additional Views for aligning. Here I have 2 hiding labels ("Nice work" and "Opinions"), and I have to add 2 views (spaces).
The height of the right space is equal to the height of the star (14dp).
To simplify hiding several views, I joined them into groups.
You can see horizontal dotted lines - they are Barriers. I align them on tops and bottoms of the most big views (barrier_2 is similar):
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
Vertical aligning is based on these 2 additional Spaces (see marginTop="10dp"):
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
It is difficult to cover all situations, so see the following layout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="5dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lineSpacingExtra="4sp"
android:lines="1"
android:paddingBottom="5dp"
android:text="«Title text»"
android:textColor="#333333"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="left_text,opinion" />
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#112233"
android:paddingLeft="5dp"
android:paddingTop="4dp"
android:paddingRight="5dp"
android:paddingBottom="4dp"
android:text="Nice work"
android:textColor="#ffffff"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toStartOf="#id/title"
app:layout_constraintTop_toTopOf="#id/left_text_space" />
<Space
android:id="#+id/left_text_space"
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Group
android:id="#+id/left_text_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="left_text,left_text_space" />
<Space
android:id="#+id/opinion_space"
android:layout_width="1dp"
android:layout_height="14dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="#id/left_text_space"
app:layout_constraintTop_toBottomOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="left_text,opinion" />
<ImageView
android:id="#+id/opinion_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="#id/barrier_2"
app:layout_constraintStart_toEndOf="#id/left_text_space"
app:layout_constraintTop_toTopOf="#id/opinion_space"
app:srcCompat="#drawable/ic_filled_rate_star" />
<TextView
android:id="#+id/opinion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:lineSpacingExtra="1sp"
android:text="1. Opinion 1.\n2. Opinion 2.\n3. Opinion 3.\n4. Opinion 4."
android:textColor="#1122aa"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/opinion_icon"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/opinion_icon"
app:layout_constraintTop_toTopOf="#id/opinion_icon" />
<androidx.constraintlayout.widget.Group
android:id="#+id/opinion_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
app:constraint_referenced_ids="opinion_icon,opinion,opinion_space" />
<ImageView
android:id="#+id/time_icon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="8dp"
android:contentDescription="#null"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier_2"
app:srcCompat="#drawable/ic_time" />
<TextView
android:id="#+id/time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="7dp"
android:layout_marginLeft="7dp"
android:ellipsize="end"
android:lineSpacingExtra="1sp"
android:lines="2"
android:paddingBottom="7dp"
android:text="17:00"
android:textColor="#9e9e9e"
android:textSize="11sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="#id/time_icon"
app:layout_constraintTop_toTopOf="#id/time_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then in your activity you can show/hide labels. Hide Groups, not views inside, because strangely inside a Group views are always visible.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
left_text_group.visibility = View.GONE
opinion_group.visibility = View.VISIBLE
}

An answer has already been given linking to Barriers. I will provide an example of how I've actually implemented it:
<TextView
android:id="#+id/textView1"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
android:text="Some other text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView1,textView2" />
This example shows 2 TextViews either of which can be gone. The Views are on stacked from top to bottom, so barrierDirection is set to bottom. Should you need another direction, just change that line accordingly.
Setting any of the 2 TextViews to gone, will result in the Barrier shifting to the bottom of the other, and if we set both to gone, it'll just shift up to the element that textView1's top constraint was referencing, in this case, the parent.
Note: If your textView1's top constraint is something else, i.e. it's below another element, the barrier will end up there if both views are set to gone.

Imitate TableLayout with ConstraintLayout

I want to do this layout with ConstraintLayout.
But I failed even to do the 1(green) part of it.
What I do is I add 3 TextViews 1,2 and 3 (pink) connect them to the left of parent and tell them to be one under the other. It works.
Then I need to add views 4 and 5 so they always be on the right of 2 and 3 and its content must be aligned vertically to the left edge just as shown on the picture.
The problem that when I add
app:layout_constraintLeft_toRightOf="2 OR 3"
the text in 4 and 5 is not aligned properly. I get this
When I use Guideline I get this
app:layout_constraintLeft_toRightOf="#id/guideline"
Does anyone know what can help with this?
Edit. P.S. layout of 1st attempt
<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"
android:id="#+id/constraintLayout"
>
<TextView
android:id="#+id/instrument_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="AUDUSD"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<TextView
android:id="#+id/trade_action_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="BUYjhkjhkjhvg"
app:layout_constraintStart_toStartOf="#+id/instrument_name"
app:layout_constraintTop_toBottomOf="#id/instrument_name"
tools:layout_editor_absoluteX="16dp"
android:layout_marginTop="1dp"/>
<TextView
android:id="#+id/net_pl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Net p/l"
app:layout_constraintStart_toStartOf="#+id/trade_action_label"
app:layout_constraintTop_toBottomOf="#id/trade_action_label"/>
<TextView
android:id="#+id/record_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123"
app:layout_constraintTop_toTopOf="#id/trade_action_label"
app:layout_constraintLeft_toRightOf="#id/trade_action_label"
tools:layout_editor_absoluteY="33dp"
/>
<TextView
android:id="#+id/pl_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"
app:layout_constraintTop_toTopOf="#id/net_pl"
app:layout_constraintLeft_toRightOf="#id/net_pl"/>
</android.support.constraint.ConstraintLayout>
Edit. (screenshot of how the result should look like)

You can use a Barrier to replicate the behavior of the TableLayout.
<?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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/warehouse"
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_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="#string/hospital"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<android.support.constraint.Barrier
android:id="#+id/barrier7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView2,textView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/lorem_ipsum"
app:layout_constraintStart_toEndOf="#+id/barrier7"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
More info here: https://constraintlayout.com/basics/barriers.html

I took a closer look at what you are trying to do. I think that you need to look into using weighted chains in your ConstraintLayout. See the documentation here.
Make sure you use a version of ConstraintLayout that implements chains.
Update
Here is an example of what you are trying to do. I have simplified your layout to better show what will work. Notice the cross linking of box1<->box2 and box3<->box4. These links establish the chains.
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/box1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="16dp"
android:text="Text box 1 xxxxxxx"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#id/box2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 2 yyyyyyyyyy"
app:layout_constraintLeft_toRightOf="#id/box1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box1" />
<TextView
android:id="#+id/box3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 3 zzzz"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/box4"
app:layout_constraintTop_toBottomOf="#id/box1" />
<TextView
android:id="#id/box4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:text="Text box 4"
app:layout_constraintLeft_toRightOf="#id/box3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#id/box3" />
</android.support.constraint.ConstraintLayout>
Here is an image of the layout.
Use app:layout_constraintHorizontal_weight to effect how much space each view gets.