Develop Reference

Why my layout look like this ? Here is my XML file

Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)

I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

TextViews in ConstraintLayout not wrapping properly despite setting properties

For some strange reason, the TextViews in my ConstraintLayout won't budge to show all text and it appears to go over the screen's boundaries. I already tried using app:layout_constrainedWidth="true" with android:layout_width="wrap_content" but that didn't have any effect in changing the positioning, leading me to think what would happen to the '1C' and '1D' text views when I add longer text in those.
Current result
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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:layout_marginBottom="20dp"
app:cardUseCompatPadding="true"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutA"
android:padding="12dp"
android:foreground="?android:attr/selectableItemBackground">
<!--Constraint 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayoutTitle"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/ibA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ibA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--Constraint 2-->
<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"
android:id="#+id/constraintLayout">
<ImageView
android:id="#+id/ivA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/ivA"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:id="#+id/tvC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#+id/tvD"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/tvB"
style="#android:style/TextAppearance.Medium"/>
<ImageView
android:id="#+id/ivD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/ivA"
app:layout_constraintStart_toStartOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/tvD"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivD"
app:layout_constraintTop_toBottomOf="#+id/tvC"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Suraj Vaishnav's suggestion

Because there is no constraint from the right(or end) side, add this app:layout_constraintEnd_toEndOf="parent" to tvA,tvB and so on.
Update:
apply both constraints: start and end and set the width 0dp. here are the working properties for tvB:
<TextView
android:id="#+id/tvB"
app:layout_constraintStart_toEndOf="#+id/ivA"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
...
I guess you can do the same things for tvC & tvD, let me know if you face any issue.

Take all free space between elements in ConstraintLayout

I need layout with three elements:
TextView1 with fixed width
TextView2 with dynamic width
One more TextView3 with fixed width
All elements must be visible on the screen at the same time.
If TextView2 contains a lot of text, the layout should be like this:
If TextView2 contains contains little text, the layout should be like this:
How can I create it using ConstraintLayout ?

Put your TextViews in a horitzontal packed chain with a bias of 1 to align them to parent's end. To make sure that the middle TextView doesn't overlap other Views and satisfies its constraints you need to set app:layout_constrainedWidth="true" attribute for it.
<?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">
<TextView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="view1"/>
<TextView
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view3"
app:layout_constraintStart_toEndOf="#id/view1"
app:layout_constraintTop_toTopOf="parent"
android:text="view2"/>
<TextView
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view2"
app:layout_constraintTop_toTopOf="parent"
android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is the sample code:
Take a look:
Design.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#63f542"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
Output:

You can create the view with the code below, but the only constraint is you have to give max width to centered text view
<?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:id="#+id/linearLayout17"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/hint_color">
<TextView
android:id="#+id/txt1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text1"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintEnd_toStartOf="#+id/txt2"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/txt2" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:maxWidth="200dp"
android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt3"
app:layout_constraintEnd_toStartOf="#+id/txt3"
app:layout_constraintTop_toTopOf="#+id/txt3" />
<TextView
android:id="#+id/txt3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text3"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to keep my Right item right when the constraints item on the left is gone (Constraint Layout)

I have a code as below
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
It looks like below.
However, at times I need to set left_text to gone. But I still want my Right to be at the right side of the screen. How could I achieve that?
(Currently when left_text is gone, my Right went to middle as per picture below)

I manage to solve it by setting my width="0dp" and android:textAlignment="viewStart" or android:textAlignment="viewEnd"
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/right_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
android:textAlignment="viewEnd"
android:fontFamily="serif-monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/left_text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
The width="0dp" will take up the entire space

You need to use Barriers
Try this
<?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">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text
UPDATE
<?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">
<TextView
android:id="#+id/left_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:constraint_referenced_ids="left_text"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:barrierDirection="end" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#3F51B5"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT When both textview is Visible
OUTPUT When Visibility Gone of left_text

You can achieve this using Guideline. check example below
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/guideline10"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />

My answer is similar to #Basi but I want to give extra information from my perspective:
When you work with guidelines and put your view width to wrap_content what may happen is that your view will overlap your guideline like this :
So my recommendation is to constraint both side of your view and set its width to 0dp (match_constraints ) and by doing it your view will fit into its bounds and your guideline won't overlap your view, then this will look like this now :
So if you want to use guidelines as in #Basi you better use 0dp on your width:
<?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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Right"
android:textColor="#F40"
android:textAlignment="textEnd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline10"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Left"
android:textColor="#F40"
android:textAlignment="textStart"
app:layout_constraintEnd_toStartOf="#+id/guideline10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this :

You can also use SequenceLayout to make it work.
<Sequences>
<Horizontal>
<Span id="#id/left_text" size="wrap"/>
<Span size="1w"/>
<Span id="#id/right_text" size="wrap"/>
</Horizontal>
</Sequences>

I tried your code and I am curious, why do you use constraint from Left to Right and from Right to Left?
There is no need for them. If you delete those constraints you have no problem.
Just to make things clear for setting view's position you need just one horizontal and one vertical constraint.

You need bias for both TextView in Constraint Layout and app:layout_constraintStart_toStartOf="parent" of another TextView.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/right_text"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:fontFamily="serif-monospace"
android:text="Right"
android:textColor="#F40"
android:textSize="26sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Constraint Layout - Grouping together layouts in chains

I want to create a chain in constraint layout that is spread but keeping the title and the text together, without a gap between them.
I am trying to achieve the same view, but without the linear layout and instead a flat constraint layout:
<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/scrollView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.exampleapp.fragments.carousel.MainCarouselOneFragment">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/main_carousel_image_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textview1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:text="#string/text1"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_view" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="4sp"
android:text="#string/text2"
android:textAlignment="center"
android:textColor="#color/grey_transparent_50"
android:textSize="10sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textview1" />
<LinearLayout
android:id="#+id/ll_title_and_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/find_out_more_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<TextView
android:id="#+id/textView3"
style="#style/TextAppearance.Actionbar.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/text3" />
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:lineSpacingExtra="0sp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="#string/text4"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<Button
android:id="#+id/find_out_more_btn"
style="#style/Widget.Button.Secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:text="#string/find_out_more"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ll_title_and_text" />
</android.support.constraint.ConstraintLayout>
Could you please advise me if this is possible and if so, how to do it?

If I understand correctly, you want to create the layout as per the screenshot but without using a LinearLayout. If that is the case, then this should be possible if you ignore the fact that there are view pairs when you create the vertical chains. In other words, think about the positioning of textView1, textView3 and Button first, and then worry about the positioning of textView2 and textView4.
It's a bit tricky to explain, so I have created a simple layout that should do what you need. In order to create this layout, I constrained textView1 to the imageView, and textView3 to textView1. Then I created vertical chains between textView3 and button. Finally, I constrained textView2 to textView1 and textView4 to textView3. (I assumed that you wanted textView1 directly below the image)
<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">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorPrimary" />
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image"
tools:text="text1" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text2" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text1"
tools:text="text3" />
<TextView
android:id="#+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text3"
tools:text="text4" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
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/text3"
tools:text="More" />
This should give you something like: