Develop Reference

Android Studio - Constraint Layout inside Fragment not aligned properly

I am trying to use the Constraint Layout inside a Fragment for my application. The problem, as you can see from the pictures below, is that no matter what I do, the layout seems to be starting halfway through the screen.
This is my code for fragment_progress.xml:
<?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="wrap_content"
android:layout_gravity="start"
android:background="#color/app_purple"
android:textAllCaps="false"
tools:context=".ProgressFragment">
<TextView
android:id="#+id/fg_progress_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Your Progress"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="34sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/fg_progress_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="32dp"
android:text="Current Goal: "
android:textColor="#FFFFFF"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_title" />
<EditText
android:id="#+id/fg_progress_header2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="50dp"
android:text=""
android:textColor="#FFFFFF"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/fg_progress_header"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_title" />
<TextView
android:id="#+id/fg_progress_goalprogress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="50dp"
android:text="Goal Progress:"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_header" />
<EditText
android:id="#+id/fg_progress_points"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:text=""
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_goalprogress" />
<TextView
android:id="#+id/fg_progress_points2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:text="Points"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/fg_progress_points"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_goalprogress" />
<ProgressBar
android:id="#+id/fg_progress_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_points" />
<TextView
android:id="#+id/fg_progress_awardstitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="50dp"
android:text="Awards Unlocked:"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_bar" />
<EditText
android:id="#+id/fg_progress_award1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text=""
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_awardstitle" />
<TextView
android:id="#+id/fg_progress_badgestitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="50dp"
android:text="Badges Obtained:"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_award1" />
<EditText
android:id="#+id/fg_progress_badge1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text=""
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_badgestitle" />
<TextView
android:id="#+id/fg_progress_whotitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="50dp"
android:text="The World Health Organization Recommends:"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_badge1" />
<TextView
android:id="#+id/fg_progress_whoheader1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="Know that it is okay to feel how you are feeling."
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whotitle" />
<TextView
android:id="#+id/fg_progress_whocontent1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="It is normal during this crazy time to experience feelings of sadness, anger frustration, stress, or all of the above. You are allowed to feel this way and to communicate with others how you are feeling."
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whoheader1" />
<TextView
android:id="#+id/fg_progress_whoheader2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="Maintain a routine."
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whocontent1" />
<TextView
android:id="#+id/fg_progress_whocontent2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Start your day at about the same time each day. Set a goal for coursework to be completed for each morning and afternoon. Maintain adequate nutrition by eating three healthy meals per day. Try to get in at least one physical activity each day."
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whoheader2" />
<TextView
android:id="#+id/fg_progress_whoheader3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="Practice good sleep hygiene."
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whocontent2" />
<TextView
android:id="#+id/fg_progress_whocontent3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Maintain a consistent sleep schedule. The goal should be 7-9 hours per night. Limit screen time in the evening, and avoid caffeine starting in the afternoon."
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whoheader3" />
<TextView
android:id="#+id/fg_progress_whoheader4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="Connect with others."
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whocontent3" />
<TextView
android:id="#+id/fg_progress_whocontent4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="It is easy to quickly feel lonely and secluded from others during this stay-at-home period. Make an effort to stay socially connected by engaging in regular video or phone calls with friends and family."
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whoheader4" />
<TextView
android:id="#+id/fg_progress_whoheader5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:text="Take a break."
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whocontent4" />
<TextView
android:id="#+id/fg_progress_whocontent5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Take time for yourself each day. Step away from the news and from your coursework to do something you enjoy and that you find relaxing or rejuvenating."
android:textColor="#FFFFFF"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whoheader5" />
<TextView
android:id="#+id/fg_progress_fblink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="8dp"
android:text="(https://www.facebook.com/coronavirus_info/core_tips)"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="10sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fg_progress_whocontent5" />
</androidx.constraintlayout.widget.ConstraintLayout>
It used to contain a FrameLayout and a ScrollView, but I removed them to simplify the code because they were not helping. These are two pictures of how the phone screen should look like and how it really looks:
(Please ignore the Action Bar and the Bottom Navigation Menu)
Android Studio
Phone
I've literally tried everything, from switching match_parent to wrap_content, setting margins on the elements or the layout itself, changing the gravity, etc. The only thing that worked is setting a negative bottom margin of -800dp to the Constraint Layout, but that breaks the scrolling functionality, and adding a ScrollView does not help. I have no idea why this is happening. I just need the first TextView to go to the top of the screen. Everything else is properly constrained so they'll follow.
Any ideas?
Thanks in advance!

The problem here is not with the XML code of the fragment but with the host activity layout file.
Since you are hosting the fragments for the bottom navigation in an activity, if you check the XML code it might be the case that you would find that it has android:paddingTop="?attr/actionBarSize" this code in the parent view of the activity.
Remove the padding and it works fine.

TextView break long text into new lines

I have a small TextView inside CardView like design. It used with as Firebase Recycler View to display content. Here its 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="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:background="#drawable/main_design">
<ImageView
android:id="#+id/rycImage"
android:layout_width="100dp"
android:layout_height="180dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:lines="1"
android:text="Name"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="4"
android:lines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />
<TextView
android:id="#+id/rycMail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:text="e-mail"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage" />
<TextView
android:id="#+id/rycPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="phone"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycMail"
app:layout_constraintEnd_toEndOf="#+id/rycMail"
app:layout_constraintStart_toStartOf="#+id/rycMail" />
</androidx.constraintlayout.widget.ConstraintLayout>
TextView called rycDesc is a long text and i want it to break into new line if it reached its margin left and right. Right now its going beyond its constrains and over ImageView. How can i make it break line after it reaches his contrains?

<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:ellipsize="end"
android:justificationMode="inter_word"
android:inputType="textMultiLine"
android:maxLines="2"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />

Since rycDesc's left and right edges are constrained you can give it a width of 0dp so that these constraints are honored instead of wrap_content
Just change:
<TextView
android:id="#+id/rycDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
to
<TextView
android:id="#+id/rycDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
This is how it looks now:
If you are using a newer version of ConstraintLayout you can keep wrap_content and add this to rycDesc:
app:layout_constrainedWidth="true"

replace with
<TextView
android:id="#+id/rycDesc"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:ellipsize="end"
android:maxLines="4"
android:text="Desc"
android:textColor="#color/white"
android:textSize="14sp"
app:layout_constraintBottom_toTopOf="#+id/rycPhone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/rycImage"
app:layout_constraintTop_toBottomOf="#+id/rycName" />

you can use 2 LinearLayout(Horizental) instead ,one for your picture and one for all your text

Use this line inside Your TextView in xml
android:singleLine="false"

Android ConstraintLayout - Top constraint for two layout

I am stuck with ConstraintLayout and confused to use which property to do as I want.
As per the following image, I wanted to give top-constraint of Details to either TextView of OrderTakenBy or OrderCollectedBy as per the height of that view.
Scenario:
If I give top constraint of Detail view as the bottom of OrderTakenBy TextView, It will overlap (as below image) the view of OrderCollectedBy Textview if it gets more lines. Vice versa.
Note: Order Taken By or Order Collected By may contain two or three lines.
So what can I do for top constraints which can work for both dynamic heights?
Edited:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.AccountMasterAddActivity"
tools:showIn="#layout/activity_account_master_add">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_no"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/supplierNameTextView"
app:layout_constraintTop_toBottomOf="#+id/supplierNameTextView" />
<TextView
android:id="#+id/orderNoTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/textView2"
tools:text="TextView" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="#string/hint_supplier_name"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/supplierNameTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView4"
tools:text="TextView" />
<TextView
android:id="#+id/textView6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:gravity="end"
android:text="#string/hint_order_date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/supplierNameTextView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/orderDateTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6"
tools:text="TextView" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="4dp"
android:text="#string/hint_order_taken_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/orderNoTextView"
app:layout_constraintTop_toBottomOf="#+id/orderNoTextView" />
<TextView
android:id="#+id/orderTakenByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="TextView TextView"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="#string/hint_order_collected_by"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderDateTextView"
app:layout_constraintStart_toStartOf="#+id/orderDateTextView"
app:layout_constraintTop_toTopOf="#+id/textView8" />
<TextView
android:id="#+id/orderCollectedByTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:gravity="end"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView10"
app:layout_constraintStart_toStartOf="#+id/textView10"
app:layout_constraintTop_toBottomOf="#+id/textView10"
tools:text="TextView TextView TextView TextView TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/hint_details"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/orderCollectedByTextView"
app:layout_constraintStart_toStartOf="#+id/orderTakenByTextView"
app:layout_constraintTop_toBottomOf="#+id/orderCollectedByTextView" />
<TextView
android:id="#+id/detailsTextView"
style="#style/TextAppearance.AppCompat.Medium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:autoLink="phone"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/textView12"
app:layout_constraintStart_toStartOf="#+id/textView12"
app:layout_constraintTop_toBottomOf="#+id/textView12"
tools:text="TextView" />
<TextView
android:id="#+id/productLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Products"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#+id/detailsTextView"
app:layout_constraintStart_toStartOf="#+id/detailsTextView"
app:layout_constraintTop_toBottomOf="#+id/detailsTextView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/productLabel"
app:layout_constraintStart_toStartOf="#+id/productLabel"
app:layout_constraintTop_toBottomOf="#+id/productLabel" />
</androidx.constraintlayout.widget.ConstraintLayout>
Anyone can help?

You can use the Barrier To overcome this issue.
A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.
Here is the Documentation for Barrier
Add Order Taken By or Order Collected By as app:constraint_referenced_ids="view1,view2" and set the Detail view top to the bottom of the Barrie.
XML Reference:
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="411dp"
app:barrierDirection="bottom"
app:constraint_referenced_ids="order_taken_by,order_collected_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="21dp"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/detail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="New"
android:textSize="#dimen/_16sp"
app:layout_constraintTop_toBottomOf="#+id/barrier"/>
Here is the output:

Use bottom barrier
Use Deatils textview top constraint to barrier and barrier reference to OrderTakenBy, OrderCollectedBy textview.
<?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/OrderTakenBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse sdgjklsdj jgkjskg"
app:layout_constraintEnd_toStartOf="#+id/OrderCollectedBy"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/OrderCollectedBy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospital fhkhsf "
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/OrderTakenBy"
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="OrderCollectedBy, OrderTakenBy" />
<TextView
android:id="#+id/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="lorem_ipsum"
android:gravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>

I think you can wrap order taken by and order collected by in another constraint layout or to check programmatically the height(after setting the text) of the TextView's and change programmatically the top constraint.

textview color and order not working

I have a problem with the following xml file:
<?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="#drawable/search_list_leaf"
tools:context=".Flowers_List">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:text="A"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="56dp" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="112dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
tools:layout_editor_absoluteX="32dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="179dp" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="D"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="241dp" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="E"
android:textSize="30sp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="310dp" />
The problem is that, even if I change color with the command android:textColor="#color/colorIwant" I get a default color which is green (don't know why) when I run the application, while I have the right color in the design. Another problem is that even if I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
What do you think the problem is about?

I place all the letters in order on the design and then I apply contraint, when I launch the application I get all the letters distributed in a messy way.
That's because you have not put necessary constraint to child TextViews, but the absolute positions.
I tried to solve this issue, see below xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="A"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="B"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/A" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="SEARCH YOUR FLOWER"
android:textColor="#030303"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="C"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/B" />
<TextView
android:id="#+id/D"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="D"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/C" />
<TextView
android:id="#+id/E"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="E"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/D"
app:layout_constraintVertical_bias="0.0" />
As you can see, each child TextView is now constrained both sides--vertically and horizontally to the parent, that is the rootview-constraintlayout or other child view.
For example, the constraint constraintEnd_toEndOf will align the end of this view to end of another view. Same way, other constraints work and are applied.
You can also give horizontal and vertical bias to position them properly. Hope this helped a little to understand how constraint works.

for order https://stackoverflow.com/a/50855782/7616371 this is correct
and for change textColor you can use :-
android:textColor="#fff"
and for textview background color
android:background="#fff"

Adding padding or buffers to Android XML views

I have the following Android Activity:
As you can see, the EditText views need to come down just a few pixels lower so that the entire text can be displayed (without being cut off). Here is my XML for this activity:
<?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"
tools:context="com.example.myuser.myapp.O1LoginActivity">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opponent 1 Login"
android:textSize="18sp"
tools:layout_editor_absoluteY="1dp"
android:layout_marginLeft="16dp"
layout_constraintLeft_toLeftOf="parent"
layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="55dp"
android:layout_height="17dp"
android:layout_marginLeft="16dp"
android:text="Username:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/o1.username"
android:layout_width="219dp"
android:layout_height="31dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
<TextView
android:id="#+id/textView10"
android:layout_width="55dp"
android:layout_height="17dp"
android:layout_marginLeft="16dp"
android:text="Password:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/o1.username" />
<EditText
android:id="#+id/o1.password"
android:layout_width="219dp"
android:layout_height="31dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:onClick="toO2Login"
android:text="Next >>"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
I'd really prefer to keep the existing constraints (layout_constraintLeft_toLeftOf, layout_constraintTop_toBottomOf, etc.) in place, because I want each subsequent view to appear left-aligned and beneath the previous view/widget. I'm just looking to add a buffer/margin to the top of my EditText instances so that the text (when entered in) doesn't get truncated. Any ideas?

As mentioned in the comment below your question by #Mohamed_AbdAllah, the height you have given for the views is too less than the text size. Change it to wrap_content as below and it should be good.
<TextView
android:id="#+id/textView6"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="Username:"
android:textSize="14sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<EditText
android:id="#+id/o1.username"
android:layout_width="219dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6" />